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 中对更少或零配置的总体目标 😍

在 @vite_js 项目中试用早期的 Tailwind CSS v4 alpha 版本 -

🚫 无 `postcss.config.js` 文件
🚫 无 `tailwind.config.js` 文件
🚫 无需配置 `content` 通配符
🚫 无需在您的 CSS 中使用 `@ tailwind` 指令

未来将是简洁的 ✨

希望本周开源给勇敢的你 🤙🏻 pic.twitter.com/zY7vyF1iTs

— Adam Wathan (@adamwathan) 2024 年 3 月 3 日

v4 引擎是一个从头开始的重写，它汲取了迄今为止的所有经验教训，并使一切变得更快。以下是我们目前了解到的关于新引擎的信息

• 速度提升高达 10 倍
• 更小的占地面积
• 它在框架的昂贵和可并行化的部分使用 Rust
• 只有一个依赖项（Lightening CSS）

对于那些准备尝试它的人来说，请记住这是一个 alpha 版本，团队还有很多工作要做才能发布 V4。您可以通过几种方式开始使用 Alpha 版本：Vite、PostCSS 或 CLI。请参阅发布公告中的 “尝试使用 Alpha 版本” 部分以开始使用。

请参阅 开源我们对 Tailwind CSS v4.0 的开发进度 以获取完整公告！