Tailwind CSS 4.0으로의 마이그레이션 및 변경점

Tailwind CSS 4.0 Migration and Changes

npx @tailwindcss/upgrade

/* v3 */
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */
 
/* v4 */
@import "tailwindcss";

{/* v3 버전 */}
<input class="shadow-sm" />
{/* v4 버전 */}
<input class="shadow-xs" />
 
{/* v3 버전 */}
<input class="shadow" />
{/* v4 버전 */}
<input class="shadow-sm" />

{/* v3 버전 */}
<input class="outline outline-2" />
 
{/* v4 버전 */}
<input class="outline-2" />

{/* v3 버전 */}
<input class="focus:outline-none" />
 
{/* v4 버전 */}
<input class="focus:outline-hidden" />

{/* v3 버전 */}
<input class="ring ring-blue-500" />
 
{/* v4 버전 */}
<input class="ring-3 ring-blue-500" />

<div class="bg-gradient-to-r from-red-500 via-orange-400 to-yellow-400 dark:via-none dark:from-blue-500 dark:to-teal-400"></div>

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer base {
  input::placeholder,
  textarea::placeholder {
    color: var(--color-gray-400);
  }
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

@layer base {
  dialog {
    margin: auto;
  }
}

@utility tab-4 {
  tab-size: 4;
}

{/* v3 버전 */}
<ul class="py-4 first:*:pt-0 last:*:pb-0">
 
{/* v4 버전 */}
<ul class="py-4 *:first:pt-0 *:last:pb-0">

<div class="bg-(--brand-color)"></div>

@custom-variant hover (&:hover);

<button class="transition hover:outline-2 hover:outline-cyan-500"></button>

.my-class {
  background-color: var(--color-red-500);
}

@config "../../tailwind.config.js";

let styles = getComputedStyle(document.documentElement);
let shadow = styles.getPropertyValue("--shadow-xl");

@import 'tailwindcss';
@theme {
  --color-primary: #1da1f2;
  --font-sans: 'Inter', sans-serif;
}
@utilities {
  .btn {
    @apply px-4 py-2 rounded bg-primary text-white;
  }
}

// Before (3.x)
theme: {
  extend: {
    colors: {
      brand: '#3490dc',
    },
  },
}
 
// After (4.x)
@theme {
  --color-brand: #3490dc;
}

{/* Before (3.x) */}
<div class="text-slate-900/80"></div>
 
{/* After (4.x) */}
<div class="text-slate-900 text-opacity-80"></div>