DEV Community

Alex Spinov
Alex Spinov

Posted on

Tailwind CSS v4 Has a Free Engine That's 10x Faster — No Config File, CSS-First Configuration

#css #tailwindcss #webdev #frontend

The Tailwind Config Problem

Tailwind v3: tailwind.config.js, PostCSS plugin, content paths, theme extension. The config file grows to 200 lines. Build time: 3-5 seconds.

Tailwind v4: no config file. Configure everything in CSS. New Rust-based engine: 10x faster builds.

What Tailwind v4 Gives You

CSS-First Configuration 

/* app.css — this IS your config */
@import 'tailwindcss';

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-display: 'Inter', sans-serif;
  --breakpoint-3xl: 1920px;
}
Enter fullscreen mode Exit fullscreen mode

No JavaScript config file. No PostCSS setup. Just CSS.

Automatic Content Detection

Tailwind v4 automatically finds your template files. No content: ['./src/**/*.{html,tsx}'] needed.

New Utilities 

<!-- Container queries -->
<div class="@container">
  <div class="@lg:grid-cols-3 @sm:grid-cols-1">
    Responds to container size, not viewport
  </div>
</div>

<!-- 3D transforms -->
<div class="rotate-x-45 rotate-y-12 perspective-800">
  3D transformed element
</div>

<!-- Color mixing -->
<div class="bg-red-500/50 mix-blend-multiply">
  Blended colors
</div>

<!-- Starting style (for CSS transitions from display:none) -->
<div class="starting:opacity-0 starting:scale-95">
  Animates in on first render
</div>
Enter fullscreen mode Exit fullscreen mode

Composable Variants 

<!-- Combine ANY variants -->
<div class="group-hover:first:text-blue-500">
  Blue when parent is hovered AND this is first child
</div>

<div class="not-last:border-b">
  Border on all except last
</div>
Enter fullscreen mode Exit fullscreen mode

Performance

Tailwind v3 Tailwind v4
Full build 300ms 30ms
Incremental 50ms 5ms
Config JavaScript CSS
PostCSS Required Built-in

Migration 

npx @tailwindcss/upgrade
Enter fullscreen mode Exit fullscreen mode

Automatic migration tool converts your v3 config to v4 CSS.

Quick Start 

npm install tailwindcss @tailwindcss/vite
Enter fullscreen mode Exit fullscreen mode 
/* app.css */
@import 'tailwindcss';
Enter fullscreen mode Exit fullscreen mode

That's it. No PostCSS. No config file.

Why This Matters

Tailwind v4 removes the configuration complexity that made people hesitate to adopt Tailwind. CSS-first config + instant builds = the best Tailwind has ever been.

Building beautiful data UIs? Check out my web scraping actors on Apify Store — data for your Tailwind dashboards. For custom solutions, email spinov001@gmail.com.

Top comments (0)