如何在 Tailwindcss 3 中添加自定义变体？

Question

我已经无计可施了。我知道可以使用 Tailwindcss 3 添加自定义变体 - 我已尽我所能遵循文档。但为什么这不起作用？

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
   // ... rest of tailwind config,
   plugins: [
     plugin(function({addVariant}) {
        addVariant('rs-d', 'html[data-desktop] &');
     })
   ]
};

我们希望使用它来使用 Tailwind Variants 编写特定于平台的样式（移动、桌面、Cordova 应用程序等），因此我可以继续使用 html[data-PLATFORM] 选择器是至关重要的。

有趣的是，VS Code 的 Tailwind 扩展正确地接受了更改——但它没有包含在样式输出中。为什么？？？

Answer 1

事实证明我在 Tailwind 方面没有做错任何事。问题是由于后端错误，生产样式被加载到开发环境中。一切都很好；我只是看不到变化。

如何在 Tailwindcss 3 中添加自定义变体？

How do I add a custom variant in Tailwindcss 3?

tailwind-css

tailwind-3

tailwind-variants