🚀 Tailwind CSS v4：新功能

免责声明：本文由 ChatGPT 根据使用 LLMiner（搜索查询 -> 单个 markdown 工具）抓取的搜索结果编写。

Tailwind CSS v4.0 终于进入测试阶段，天哪，它包含了一些**突破性的变化**，将增强您的开发工作流程。从**超快的引擎重写**到时尚的全新**CSS 优先配置**，此版本就像为您的项目添加了喷气燃料。无论您是现有的 Tailwind 粉丝还是新手，请系好安全带，我们将探索 Tailwind CSS v4.0 中的所有新功能！

🔥 全新高性能引擎 — Oxide

Tailwind CSS v4.0 引入了 **Oxide**，这是对其引擎的彻底重写。数字令人震惊：

这种涡轮增压速度源自几项关键改进：

由 Rust 提供支持：框架中性能关键的部分是用 Rust 编写的。

自定义解析器：Tailwind 放弃了 PostCSS，转而采用其自己的优化解析器。

Lightning CSS 集成：转换、添加前缀和缩小的速度比以往更快。

🎯 这为什么重要？

您在项目上工作的时间越长，您运行的增量构建就越多。现在，每次调整都感觉很好。构建速度更快意味着生产力更高——并且有更多时间可以连续观看您一直忽略的系列剧。😎

🎨CSS-First 配置

告别“tailwind.config.js”混乱。Tailwind CSS v4.0 允许您使用新的“@theme”指令直接在 CSS 中配置设计令牌：

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.84 0.18 117.33);
  --font-sans: "Inter", sans-serif;
  --spacing: 0.25rem;
}

通过将配置调整得更接近其所属的位置（即您的 CSS），可以使您的工作流程更加现代化。

💡 好处

更少的 JavaScript：减少 JS 占用空间。

原生 CSS 变量：以内联方式使用主题值或与 Motion 等库一起使用。

简化覆盖：使用 --*: initial 轻松扩展或重置设计令牌。

需要灵活性？Tailwind 仍然支持经典的 JS 配置以实现向后兼容。

🌈 采用 P3 色域的现代化色彩

v4.0 中的颜色现在默认为 **OKLCH** 而不是 RGB，从而实现：

更宽的色域：更鲜艳、更现代的色彩。

平滑渐变：对渐变效用进行更好的插值。

举一个生动的例子：

改进的渐变与“bg-conic-*”和“bg-radial-*”等实用程序相结合，只需**最小的努力**就能让您的设计栩栩如生。

🪄 自动源检测

还记得配置可怕的“内容”数组吗？忘掉它吧。Tailwind CSS v4.0 引入了**零配置内容检测**：

自动扫描您的项目以查找模板。

忽略 .gitignore 文件、二进制文件和垃圾。

与 Vite 的模块图无缝协作。

对于特殊情况，你可以使用 `@source` 指令明确添加源：

@import "tailwindcss";
@source "../node_modules/my-library/src/components";

🤯 TL;DR：

更少的设置、更智能的检测和更少的麻烦。

📐 容器查询 - 原生支持

不再需要插件！Tailwind v4.0 为核心库带来了 **原生容器查询** 支持：

您甚至可以组合 `@min-*` 和 `@max-*` 变体来实现**强大的响应式设计**。

🏗️ 可组合变体

Tailwind CSS v4.0 中的变体现在可以组合。这意味着您可以链接复杂的选择器：

想要更多吗？结合使用 `not-*`、`in-*` 和 `has-*` 变体，实现最大的灵活性。

🧊 3D 变换

Tailwind CSS v4.0 首次引入 **3D 变换**！了解 `rotate-x-*`、`scale-z-*`、`translate-z-*` 等：


  Look, I’m in 3D!

想要深度？结合使用 `spective-*` 实用程序：


  
    3D Shadow Power

🧹 你需要了解的重大变化

Tailwind v4.0 清理了一些旧包袱。以下是主要删除和更改的内容：

删除了已弃用的实用程序：与 text-opacity-*、flex-grow-* 及其他实用程序说再见。

没有默认边框颜色：边框现在默认为 currentColor。

环默认为 1px：与使用 outline-* 作为焦点环一致。

单独的 CLI 和 PostCSS 插件：需要时单独安装它们。

使用 Tailwind 升级工具轻松迁移您的项目。

🏁 如何升级到 Tailwind CSS v4.0 Beta

入门很简单。安装您选择的测试版本和插件：

**使用 Vite：**

npm install tailwindcss@next @tailwindcss/vite@next

**使用 PostCSS：**

npm install tailwindcss@next @tailwindcss/postcss@next

**使用 CLI：**

npm install tailwindcss@next @tailwindcss/cli@next

运行升级工具：

npx tailwindcss@next upgrade

测试您的项目，进行微调，然后享受旅程！

🎉 总结

Tailwind CSS v4.0 是现代 Web 开发的**游戏规则改变者**。凭借其涡轮增压 Oxide 引擎、简化的配置、鲜艳的颜色更新和强大的实用程序，很难不让人兴奋。这个测试版已经让人感觉很完美，我迫不及待地想看看开发人员用它开发了什么。

准备好了吗？🚀 立即升级，让 Tailwind v4.0 将您的 CSS 工作流程提升到新的水平！

**您最喜欢 Tailwind CSS v4.0 中的哪个新功能？发表评论，让我们讨论吧！**

祝你编码愉快！👨‍💻👩‍💻

CLIS.CC