昨天为大家展示了 Tailwind CSS v4 预览版所带来的一些引人注目的新特性。这些新特性不仅为开发者提供了更高效的样式编写方式，还进一步提升了前端开发的体验。
而今天我将更深入地教大家如何实际体验 Tailwind CSS v4 预览版，并带大家一同探索它的版本路线图，看看与 Tailwind CSS v3 版本相比，它究竟有哪些显著的变化。
体验 Tailwind CSS v4
我们已经标记了几个 alpha 版本，您可以从今天开始在您的项目中使用它。
如果您正在使用 VS Code 的 Tailwind CSS IntelliSense 扩展，请确保从扩展页面切换到预发布版本；如果您正在使用我们的 Prettier 插件，请确保安装最新版本。
如果发现问题，请在 GitHub 上告诉我们。在我们标记稳定版之前，我们真的希望这个东西是无懈可击的，并且报告任何问题将对我们有很大帮助。
使用 Vite
安装 Tailwind CSS v4 alpha 和我们的新 Vite 插件：
$ npm install tailwindcss@next @tailwindcss/vite@next
然后将我们的插件添加到您的 vite.config.ts 文件中：
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [tailwindcss()],
})
最后，在您的主 CSS 文件中导入 Tailwind CSS：
@import "tailwindcss";
使用 PostCSS
安装 Tailwind CSS v4 alpha 和单独的 PostCSS 插件包：
$ npm install tailwindcss@next @tailwindcss/postcss@next
然后将我们的插件添加到您的 postcss.config.js 文件中：
module.exports = {
plugins: {
'@tailwindcss/postcss': {}
}
}
最后，在您的主 CSS 文件中导入 Tailwind CSS：
@import "tailwindcss";
使用 CLI
安装 Tailwind CSS v4 alpha 和单独的 CLI 包：
$ npm install tailwindcss@next @tailwindcss/cli@next
接下来，在您的主 CSS 文件中导入Tailwind CSS：
@import "tailwindcss";
最后，使用 CLI 工具编译您的 CSS：
$ npx @tailwindcss/cli@next -i app.css -o dist/app.css
Tailwind CSS v4 路线图
这个新引擎是从头开始重写的，直到现在我们一直专注于使用新的配置方法重新构想开发者体验。我们非常重视向后兼容性，这也是我们在今年晚些时候发布稳定版 v4.0 之前需要做大部分工作的地方。
- 支持 JavaScript 配置文件：重新引入与经典
tailwind.config.js文件兼容以便轻松迁移到 v4 版本。 - 显式内容路径配置：当自动内容检测对您的设置不够好时，可以告诉 Tailwind CSS 确切位置您的模板所在。
- 支持其他暗黑模式：目前我们只支持使用媒体查询来实现暗黑模式，并且仍需重新实现选择器和变体策略。
- 插件和自定义工具：我们还没有插件支持，或者编写自定义工具使其能够自动适配变体。显然，在发布稳定版之前我们会解决这个问题。
- 前缀支持：目前还无法为类配置前缀，但肯定会再次加回来。
- 白名单和黑名单：目前无法强制 Tailwind CSS 生成某些类或阻止它生成其他类。
- 支持
important配置：目前无法让所有实用程序都带有!important生成，但我们计划实施此功能。 - 支持
theme()函数：对于新项目并不需要此函数因为现在可以使用var()，但出于向后兼容性考虑将会实施它。 - 独立 CLI 命令行界面：我们尚未为新引擎开发独立 CLI 命令行界面, 但绝对会在 v4.0 版本发布之前完成。
除此之外，我相信我们将找到很多要修复的错误、一些令人振奋的新CSS特性，并完善一些需要更多打磨才能正式发布的 API 接口。我不想承诺一个具体发布时间表，但我个人非常希望能在暑假开始之前标记 v4.0 版本为稳定版。
Tailwind CSS v4 的变化
我们不轻易进行重大更改，但到目前为止，在 Tailwind CSS v4 中有一些我们正在以不同方式处理的事情值得分享：
- 移除不推荐的 Utils：我们已经移除了很久以前停止文档化的实用工具，比如
text-opacity-*、flex-grow-*和decoration-slice，取而代之的是它们现代化的替代品，比如text-{color}/*、grow-*和box-decoration-slice。 - PostCSS 插件和 CLI：
tailwindcss包不再包含这些内容，因为并非每个人都需要它们，相反应该单独安装它们，使用@tailwindcss/postcss和@tailwindcss/cli。 - 没有默认的 BorderColor：在此之前默认情况下
border实用程序会设置为gray-200, 现在默认设置为像浏览器一样的当前颜色。我们做出了这个改变是为了让您更难意外地将错误的灰色引入到项目中（如果您正在使用zinc或slate或其他东西作为主要灰色）。 - Rings 默认值为 1px：之前，默认情况下,
ring实用程序是一个 3px 蓝环, 现在是一个 1px 的环，并且使用currentColor。我们发现自己在项目中将ring-*实用程序作为边框的替代方案，并对焦点环使用outline-*，因此我们认为在这里使事物保持一致是一个有益的改变。
还有一些其他真正低级别实施细节上可能会在您项目中表面出现变化，但没有像这些更改那样故意. 如果遇到任何令人惊讶的问题，请告诉我们。
