Tailwind 已开源 V4 Alpha

Tailwind 团队公布了他们在 Tailwind CSS v4 alpha 上的开源进展。该版本是对如何为 web 应用编写 CSS 的很早期的一览。

以下是我们从迄今为止关于 V4 的公告中了解到的信息：

Tailwind V4 依旧支持 tailwind.config.js 以使迁移到 v4 更加容易，不过将来会是 CSS 优先的配置体验：

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

公告中另一个吸引我眼球的功能是零配置内容检测。Tailwind 将抓取你的项目，查找模板文件，并使用内置的启发式方法来查找模板。稳定的 v4 版本将包括对明确定义的内容路径的支持，但我喜欢 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

v4 引擎从头开始的重写，吸收了迄今为止的所有知识，使之变得更快。以下是迄今为止我们对新引擎的了解：

• 速度提高10 倍
• 占用更小
• 在框架的重要和可并行的部分使用 Rust
• 只有一个依赖项(Lightening CSS)

如果你准备尝试，请记住这是一个 alpha 版本，还有很多工作要做才能完成 V4。你可以通过以下几种方式开始使用 Alpha 版本：Vite、PostCSS 或 CLI。