iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Tailwind 4

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwind v4 is the biggest rewrite of the framework - new engine, CSS-first config, smaller and faster.

Tailwind v4 - what changed

EXAMPLE
/* 1. CSS-first config. No more tailwind.config.js by default. */
/* app.css */
@import 'tailwindcss';

@theme {
  --color-brand-500: #3b82f6;
  --font-sans: 'Inter Variable', sans-serif;
  --radius-card: 0.75rem;
}


/* 2. Lightning-fast engine.
 *    First build: ~5x faster than v3
 *    Incremental builds: ~100x faster
 *    No JIT cold-start cost
 */


/* 3. Native CSS cascade layers */
@layer theme, base, components, utilities;


/* 4. Variants now compose left-to-right and read naturally */
<button class='bg-brand-500 hover:bg-brand-700 dark:bg-brand-300 md:hover:bg-brand-900'>
  Click
</button>


/* 5. New @utility for custom utilities */
@utility container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}


/* 6. Container queries built-in */
<div class='@container'>
  <div class='@md:flex @md:gap-4'> ... </div>
</div>


/* 7. Native CSS variables in @theme become available as bg-(--color-name) too */
.banner { background: bg-(--color-brand-500); }


/* 8. Migration from v3
 *    - Run: npx @tailwindcss/upgrade
 *    - Or migrate incrementally: keep v3 build alongside v4 import
 *    - Watch out for: arbitrary properties syntax, removed legacy variants
 */


/* 9. PostCSS plugin or Vite plugin
 *    PostCSS: 'tailwindcss' alone, no autoprefixer needed
 *    Vite:    @tailwindcss/vite is fastest
 */


/* 10. CLI mode (rarely used directly now)
 *     npx @tailwindcss/cli -i app.css -o build.css --watch
 */

Why it matters

v4 makes Tailwind cheaper to set up and faster to build. The CSS-first config is the right move - design tokens stop being JavaScript objects and become CSS custom properties the rest of your stylesheet can use.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// Tailwind 4 — Vite-native, faster, no PostCSS required.
// One @import 'tailwindcss'; in your CSS does it all.
Try it Yourself »

Discussion

Loading…