Tailwind V4

Tailwind CSS v4

Harness Tailwind CSS v4's CSS-first configuration, new utilities, and performance improvements.

Quick Start

/* app.css — Tailwind v4 CSS-first configuration */
@import "tailwindcss";

/* Native CSS custom properties for theme */
@theme {
  --color-brand: #6c5ce7;
  --color-brand-light: #a29bfe;
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 120rem;
  --animate-fade-in: fade-in 0.5s ease-in-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* @apply with modern CSS features */
.btn-primary {
  @apply bg-brand text-white px-4 py-2 rounded-lg 
         hover:bg-brand-light transition-colors
         focus-visible:outline-2 focus-visible:outline-brand;
}

/* Container queries with @cq-* */
.card-grid {
  @apply grid grid-cols-1 gap-4;
  @container (min-width: 30rem) {
    @apply grid-cols-2;
  }
  @container (min-width: 50rem) {
    @apply grid-cols-3;
  }
}

<!-- v4 new features -->
<div class="
  /* 3D transforms */
  perspective-1000 rotate-x-45 rotate-y-30
  
  /* Scroll-driven animations */
  scroll-mt-20 scroll-snap-align-start
  
  /* New color functions */
  bg-linear-to-r from-red-500 to-blue-500
  
  /* Field sizing */
  field-sizing-content

  /* Text balancing */
  text-balance
  
  /* Inset shadows */
  shadow-inner-sm

  /* Container queries */  
  @max-md:flex-col @min-lg:flex-row
">

Key Concepts

Tailwind v4 is CSS-first (no tailwind.config.js). New features: @theme directive, container queries, 3D transforms, scroll-driven animations, CSS @layer support, text-balance, and field-sizing.

When to Use

• New projects starting with Tailwind v4
• Upgrading from v3 for smaller config and new features
• Projects needing container queries or 3D transforms

Step-by-Step

1. Install v4: npm install tailwindcss @tailwindcss/vite and add the Vite plugin (or the PostCSS equivalent).
2. Create CSS entry: @import "tailwindcss"; in your main CSS file — no tailwind.config.js needed.
3. Theme via @theme: define design tokens (colors, fonts, breakpoints, animations) as CSS custom properties.
4. Use v4 utilities: container queries (@container, @min-*/@max-*), 3D transforms, text-balance, field-sizing.
5. Compose with @apply inside modern CSS (@layer, nesting) and reference @theme tokens.
6. Build and verify: run the dev server, then compare production CSS size vs a v3 baseline; no v3 migration warnings.

Examples

/* app.css — custom variant + data attribute styling */
@import "tailwindcss";

@theme {
  --color-brand: #6c5ce7;
  --font-display: "Inter", sans-serif;
}

@custom-variant data-active (&[data-active="true"]);

.card[data-active="true"] {
  @apply border-brand text-brand bg-brand/10;
}

<!-- v4 responsive + container query combo -->
<div class="@container">
  <div class="
    grid grid-cols-1
    @min-lg:grid-cols-3
    max-md:flex-col
    space-y-4
  ">
    <section class="text-balance shadow-inner-sm">Card A</section>
    <section class="bg-linear-to-r from-violet-500 to-fuchsia-500">Card B</section>
  </div>
</div>

Validation

1. @theme custom properties are available in all utility classes
2. Container queries respond at correct breakpoints
3. Build output is smaller than equivalent v3 configuration
4. No v3 migration warnings during build