如何在TailwindCSS 4中迁移自定义变体配置？

你的方向完全正确，TailwindCSS 4 已将自定义变体的定义从配置文件迁移至 CSS 中，通过 @custom-variant 语法实现。以下是具体迁移步骤：

1. 在 styles.css 中定义变体 #

在引入 Tailwind 核心指令的 CSS 文件里，添加以下代码（需放在 @tailwind base/components/utilities 之前）：

@custom-variant js .js &;
@custom-variant no-js .no-js &;

2. 使用方式保持不变 #

定义完成后，你仍可沿用 TailwindCSS 3 中的变体调用方式，例如：

<div class="bg-gray-200 js:bg-blue-200 no-js:bg-green-200">示例内容</div>

3. 清理旧配置 #

记得删除 tailwind.config.js 中原有的插件配置代码，避免冗余。

内容的提问来源于stack exchange，提问作者Mike Harrison