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!