DEV Community

Alex Spinov
Alex Spinov

Posted on

Tailwind CSS 4 Has a Free Utility Framework: 10x Faster Builds, CSS-First Configuration, and Native Cascade Layers

#css #tailwindcss #webdev #frontend

Tailwind CSS changed frontend styling. But v3 had pain points: JavaScript config files, PostCSS plugin chains, 4-second build times on large projects, and an ever-growing tailwind.config.js.

Tailwind CSS 4 rewrites the engine in Rust (Oxide), moves configuration to CSS, and builds in milliseconds.

What Changed

Feature Tailwind 3 Tailwind 4
Build speed 300-500ms 5-20ms
Configuration tailwind.config.js CSS @theme
Setup PostCSS + config Import only
CSS layers Manual Native @layer
Container queries Plugin Built-in

Setup (No Config File!) 

/* app.css — that's the entire setup */
@import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode 
<link href="app.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

No tailwind.config.js. No PostCSS plugin. Just import and use.

Theme Customization in CSS 

@import "tailwindcss";

@theme {
  --color-brand: #3498db;
  --color-brand-dark: #2980b9;
  --font-display: "Cal Sans", sans-serif;
  --breakpoint-3xl: 1920px;
  --spacing-18: 4.5rem;
}
Enter fullscreen mode Exit fullscreen mode 
<h1 class="font-display text-brand text-4xl">Hello</h1>
<div class="bg-brand-dark p-18 3xl:grid-cols-4">Content</div>
Enter fullscreen mode Exit fullscreen mode

New Features in v4

Container Queries (Built-in) 

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

3D Transforms 

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

Composable Variants 

<div class="group-has-checked:bg-green-500">
  Shows green when a child checkbox is checked
</div>
Enter fullscreen mode Exit fullscreen mode

Migration From v3 

npx @tailwindcss/upgrade
Enter fullscreen mode Exit fullscreen mode

Most v3 projects migrate automatically. The main change: move tailwind.config.js customizations to @theme in CSS.

Start here: tailwindcss.com

Need custom data extraction, scraping, or automation? I build tools that collect and process data at scale — 78 actors on Apify Store and 265+ open-source repos. Email me: Spinov001@gmail.com | My Apify Actors

Top comments (0)