Tailwind CSS v4.0：从v3升级的一些技巧和插件使用方法

最近，在建立个人博客时，我刚开始使用Tailwind CSS v3.4。我遇到了将库升级到最新版本的需求。虽然这份迁移指南帮了忙，但我找不到相关资源介绍这些插件，例如@tailwindcss/typography（用于prose相关规则）和@tailwindcss/forms（用于表单元素）。因此写下了这篇文章。这篇文章会很短。

假设你已经对这个库有一定基本的了解。此外，本文将使用SvelteKit作为首选框架，但你需要的只是一个需要升级Tailwind CSS到v4的项目。

第一步：运行 Tailwind CSS 的升级工具

为了减轻开发者在迁移过程中的压力，Tailwind CSS 的团队提供了一个实用工具，帮助轻松地在版本间迁移。只需在你的项目的根目录下运行：

运行 Tailwind CSS 升级工具
$
npx @tailwindcss/upgrade@next

点击这里进入全屏模式，点击这里退出全屏模式

你应该按照安装提示进行操作，并看看它如何帮你解决问题。它将帮助纠正你代码中的某些破坏性更改，如果使用了 postcss，它还会帮你修复配置。修正你在主 CSS 文件中使用 Tailwind 时的导入语句，升级 package.json 中的 Tailwind 版本。如果它无法迁移到一些内容，你会收到相应的通知。

第二步：使用插件

上述步骤相当简单和基础。正如我之前提到的那样，迁移指南文档 包含了这些内容。然而，大多数项目不仅仅使用基础的 Tailwind 配置。例如，你需要 @tailwindcss/typography 才能让这条规则生效：

    .content {
      @apply dark:prose-invert prose-headings:font-bold prose-a:no-underline hover:prose-a:underline prose-pre:rounded-lg prose-pre:p-4;
    }

    /* 此代码片段定义了.content 类的样式，包括在暗模式下反转文本、使标题加粗、移除链接下划线、悬停时添加下划线以及代码块的圆角和内边距。*/

全屏模式 退出全屏

要是没有它，你可能会遇到类似的情况：

无法应用未知的实用类样式：dark:prose-invert.

全屏模式退出全屏

同样的，如果没有@tailwindcss/forms，你就很难轻松地处理表单控件，特别是checkboxes。

在版本 3 中，添加类似的插件可以在 tailwind.config.ts 中进行：

    ...
    import forms from '@tailwindcss/forms';
    import typography from '@tailwindcss/typography';
    import type { Config } from 'tailwindcss';

    export default {
        ...
        theme: {
            ...
        },
        plugins: [typography, forms,...]
    } satisfies Config;

全屏开启，全屏关闭

然而，使用 v4，你可以完全不用那个文件了。相反，使用你的主要的 CSS 入口文件，在其中导入 tailwindcss。

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
@plugin ...;

全屏模式 退出全屏

这样一来，Tailwind CSS 能轻松编译了。

第三步：启用夜间模式

默认，v4 使用 prefers-color-scheme 媒体特性来原生支持暗模式。然而，我们大多数人更习惯于通过添加或删除类来切换亮色和暗色主题。因此，在 v3 中，我们通过修改 tailwind.config.ts 文件实现了这一点：

    ...
    export default {
        ...
        darkMode: 'class',
        theme: {
            ...
        },
        plugins: [...]
    } 符合 Config;

进入全屏模式/退出全屏

在 v4 中，该文件也将被淘汰。主入口的 CSS 文件就派上用场了：

@import "tailwindcss";
...
@custom-variant dark (&:where(.dark, .dark *));

切换到全屏 切换回正常视图

这样一来，你之前的那个开关功能又回来了！

好了！如果有其他建议，不妨分享出来。

喜欢这篇文章吗？我是一名软件工程师兼技术作家，正在积极寻找新的工作机会，特别是在网络安全、金融、医疗保健和教育等行业。如果你觉得我的专长适合你们团队，不妨聊聊！你可以在LinkedIn和X上找到我。也可以通过电子邮件john@johnowolabiidogun.dev联系我。

觉得这篇文章有用的话，不妨分享到你的朋友圈或同行中，帮助更多人了解！