初次接触 Tailwind CSS v4，深度解析其发展路线和变革！

发表时间: 2024-03-12 09:39

昨天为大家展示了 Tailwind CSS v4 预览版所带来的一些引人注目的新特性。这些新特性不仅为开发者提供了更高效的样式编写方式，还进一步提升了前端开发的体验。

而今天我将更深入地教大家如何实际体验 Tailwind CSS v4 预览版，并带大家一同探索它的版本路线图，看看与 Tailwind CSS v3 版本相比，它究竟有哪些显著的变化。

体验 Tailwind CSS v4

我们已经标记了几个 alpha 版本，您可以从今天开始在您的项目中使用它。

如果您正在使用 VS Code 的 Tailwind CSS IntelliSense 扩展，请确保从扩展页面切换到预发布版本；如果您正在使用我们的 Prettier 插件，请确保安装最新版本。

如果发现问题，请在 GitHub 上告诉我们。在我们标记稳定版之前，我们真的希望这个东西是无懈可击的，并且报告任何问题将对我们有很大帮助。

安装 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";

安装 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";

安装 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

这个新引擎是从头开始重写的，直到现在我们一直专注于使用新的配置方法重新构想开发者体验。我们非常重视向后兼容性，这也是我们在今年晚些时候发布稳定版 v4.0 之前需要做大部分工作的地方。

除此之外，我相信我们将找到很多要修复的错误、一些令人振奋的新CSS特性，并完善一些需要更多打磨才能正式发布的 API 接口。我不想承诺一个具体发布时间表，但我个人非常希望能在暑假开始之前标记 v4.0 版本为稳定版。

我们不轻易进行重大更改，但到目前为止，在 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-*，因此我们认为在这里使事物保持一致是一个有益的改变。

还有一些其他真正低级别实施细节上可能会在您项目中表面出现变化，但没有像这些更改那样故意. 如果遇到任何令人惊讶的问题，请告诉我们。