DEV Community

Alex Spinov
Alex Spinov

Posted on

Tailwind CSS v4 Has a Free Lightning-Fast Engine That Changes Everything

#css #tailwindcss #webdev #frontend

Tailwind v4 is a complete rewrite with a new engine that is 10x faster, CSS-first configuration, and zero-config detection.

What Changed

Tailwind v3 Tailwind v4
Config tailwind.config.js CSS @theme directive
Build speed Fast 10x faster (Rust engine)
Content detection Manual paths Automatic
PostCSS Required Optional
Install npm + config npm + import

Setup (Simplified) 

npm install tailwindcss @tailwindcss/vite
Enter fullscreen mode Exit fullscreen mode 
// vite.config.ts
import tailwindcss from "@tailwindcss/vite";

export default {
  plugins: [tailwindcss()],
};
Enter fullscreen mode Exit fullscreen mode 
/* app.css — that is your entire config */
@import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode

No tailwind.config.js. No content paths. No PostCSS config. It just works.

CSS-First Configuration 

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-display: "Cal Sans", sans-serif;
  --breakpoint-3xl: 1920px;
  --animate-fade-in: fade-in 0.5s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
Enter fullscreen mode Exit fullscreen mode

Custom colors, fonts, breakpoints — all in CSS.

New Features

Container Queries 

<div class="@container">
  <div class="@sm:grid-cols-2 @lg:grid-cols-3">
    <!-- Responds to container size, not viewport -->
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

3D Transforms 

<div class="rotate-x-45 rotate-y-12 perspective-800">
  3D transformed element
</div>
Enter fullscreen mode Exit fullscreen mode

Not Variant 

<div class="not-last:mb-4">Margin on all except last</div>
<div class="not-disabled:hover:bg-blue-500">Hover only if not disabled</div>
Enter fullscreen mode Exit fullscreen mode

Starting Style (Entry Animations) 

<div class="starting:opacity-0 starting:scale-95 transition-all duration-300">
  Animates in on mount
</div>
Enter fullscreen mode Exit fullscreen mode

Field Sizing 

<textarea class="field-sizing-content">Auto-grows with content</textarea>
Enter fullscreen mode Exit fullscreen mode

Migration from v3 

npx @tailwindcss/upgrade
Enter fullscreen mode Exit fullscreen mode

Automatic migration tool that:

  • Converts tailwind.config.js to CSS @theme
  • Updates deprecated utilities
  • Removes unnecessary PostCSS config

Performance

v4 uses a Rust-based engine (Lightning CSS):

  • Full builds: 10x faster
  • Incremental rebuilds: nearly instant
  • CSS output: smaller (better minification)

Building beautiful web interfaces? I create developer tools and web solutions. Email spinov001@gmail.com or check my Apify tools.

Top comments (0)