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 —
— Adam Wathan (@adamwathan) March 3, 2024
🚫 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
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!
