Tailwind CSS v4.0 Alpha

Last year on Tailwind connect there was an announcement on Oxide - an high performance engine for Tailwind CSS to simplify the developer experience and to take advantage on how the web platform has evolved in recent years.

Let's see what are the new changes we can expect in Tailwind CSS v4.0

1. A new engine, built for speed

The new engine is built with Rust from ground-up rewrite, which would make the framework to better model the problem space making things faster with lesser code

Up to 10x faster - We can do a full build of the tailwind website in 105ms instead of 960ms.
Smaller footprint - the new engine is over 35% smaller installed, even with the heavier native packages and these packages are rewritten using Rust and Lightning CSS.
Rust - Tailwind team has migrated the most expensive and parallelizable parts of the framework to Rust, keeping the core of the framework in Typescript for extensibility.
One dependency - The only thing that Tailwind CSS is going to depend on the Lightning CSS
Custom Parser - The team has written own custom CSS parser and designed own datastructures tailored to our needs, making parsing over 2x as fast like PostCSS.

2.Unified toolchain

Tailwind CSS v4 is not just a plugin anymore - It's all-in-one tool for processing your CSS because it is now integrated with Lightning CSS directly into the framework. so there is no need to install anything in the CSS pipeline.

Built-in @import handling - no need to setup and configure a tool like postcss-import.
Built-in vendor prefixing - you don’t have to add autoprefixer in your projects anymore.
Built-in nesting support - no plugins needed to flatten nested CSS, it works out of the box.
Syntax transforms - modern CSS features like oklch() colors and media query ranges are transpiled to syntax with better browser support.

3.Designed for the modern web

Native cascade layers - The real @layer is been used now, which solves the tons of past issues which we deal with
Explicitly defined custom properties - @property is used to define internal custom properties with proper types and constraints, making it possible to do things like transition background gradients.
Using color-mix for opacity modifiers - making it easier than ever to use our opacity modifier syntax when using CSS variables for colors, or even adjusting the opacity of currentColor
Container queries in core — support for container queries directly to core, with new @min-* and @max-* variants to support container query ranges.

4.Composable Variants

The new architecture makes it possible to compose together variants that act on selectors like group-*, peer-*, has-*, and a new not-*variant.

In earlier releases, variants like group-has-* were explicitly defined in the framework, but now group-* can compose with the existing has-* variant, which can compose with other variants like focus

<div class="group">
  <div class="group-has-focus:opacity-100">
    ....
  </div>
</div>

5.Zero configuration content detection

In the early alpha releases, it’s not even possible to configure your content paths. For most projects, you’re never going to need to do this ever again — Tailwind just finds your template files for you.

It depends on how you integrate Tailwind into your project.

Using the PostCSS plugin or the CLI,Tailwind will crawl your entire project looking for template files, using a bunch of heuristics we’ve built in to keep things fast, like not crawling directories that are in your .gitignore file, and ignoring binary file formats.
Using the Vite plugin, using the module graph. we know exactly what files we’re actually using, so it’s maximally performant, and with no false positives or negatives.

6.CSS-first configuration

A major goal of Tailwind CSS v4.0 is making the framework feel CSS-native, and a less like a Javascript library.

Once you have installed Tailwind CSS just import it in the main.css with the import statement like below

  @import "tailwindcss";

And instead of setting up all of your customizations in a JavaScript configuration file, you just use CSS variables:

@import "tailwindcss";

@theme {
  --font-family-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-neon-pink: oklch(71.7% 0.25 360);
  --color-neon-lime: oklch(91.5% 0.258 129);
  --color-neon-cyan: oklch(91.3% 0.139 195.8);
}

The special @theme directive tells Tailwind to make new utilities and variants available based on those variables, letting you use classes like 3xl:text-neon-lime in your markup:

<div class="max-w-lg 3xl:max-w-xl">
  <h1 class="font-display text-4xl">
    Data to <span class="text-neon-cyan">enrich</span> your online business
  </h1>
</div>

Adding new CSS variables behaves like extend did in earlier versions of the framework, but you can override a whole set of variables by clearing the namespace with syntax like --color-*: initial before defining all of your custom values:

@import "tailwindcss";

@theme {
  --color-*: initial;

  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

Let's try the alpha

If you’re using the Tailwind CSS IntelliSense extension for VS Code, make sure you switch to the prerelease version from the extension page, and if you’re using our Prettier plugin, make sure you install the latest version.

a. Using Vite

Install the Tailwind CSS v4 alpha and the new Vite plugin

npm install tailwindcss@next @tailwindcss/vite@next

Then add the plugin into vite.config.ts file

import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

Finally, import Tailwind in your main CSS file:

@import "tailwindcss";

b. Using PostCSS

Install the Tailwind CSS v4 alpha and the separate PostCSS plugin package:

npm install tailwindcss@next @tailwindcss/postcss@next

Then add our plugin to your postcss.config.js file:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}

Finally, import Tailwind in your main CSS file:

@import "tailwindcss";

c. Using CLI

Install the Tailwind CSS v4 alpha and the separate CLI package:

npm install tailwindcss@next @tailwindcss/cli@next

Next, import Tailwind in your main CSS file:

@import "tailwindcss";

Finally, compile your CSS using the CLI tool:

npx @tailwindcss/cli@next -i app.css -o dist/app.css

If you face any issue feel free to create an issue on the Tailwind Github page.

And that's the end of this post will catch up in a new one. Till then Happy Learning!!!

nidhinkumar's Blog