Tailwind has Open-sourced the V4 Alpha

The Tailwind team announced that they are open-sourcing their progress on the Tailwind CSS v4 alpha. This version is a very early peek into something that will be an incredible way to write CSS for web applications.

Here’s what we know from the announcement about V4 so far:

Tailwind V4 will still support tailwind.config.js to make migrating to v4 easy, but the future is a CSS-first configuration experience:

@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;
}

Another feature from the announcement post that caught my eye was the zero-configuration content detection. Tailwind will crawl your project, looking for template files and using built-in heuristics to find templates. The stable v4 release will include support for explicitly defined content paths, but I love the overall aim of less or zero configuration in V4 😍

Playing with an early Tailwind CSS v4 alpha in a @vite_js project —

🚫 No `postcss.config.js file
🚫 No `tailwind.config.js` file
🚫 No configuring `content` globs
🚫 No `@ tailwind` directives in your CSS

The future is clean ✨

Hoping to open-source this week for the bold 🤙🏻 pic.twitter.com/zY7vyF1iTs
— Adam Wathan (@adamwathan) March 3, 2024

The v4 engine is a ground-up rewrite, taking all the learnings so far and making things faster. Here is what we know about the new engine so far:

Up to 10x faster
A smaller footprint
It’s using Rust in expensive and parallelizable parts of the framework
Only one dependency (Lightening CSS)

For those ready to try it out, remember that this is an alpha build, and the team has a lot more work to get to V4. You can get started with the Alpha in a few ways: Vite, PostCSS, or CLI. See the “Try out the Alpha” section of the release announcement to get started.

See Open-sourcing our progress on Tailwind CSS v4.0 for the full announcement!