如何在 tailwindcss 中创建自定义变体？

Posted 2023-03-07

技术标签:

【中文标题】如何在 tailwindcss 中创建自定义变体？【英文标题】：How to create a custom variant in tailwindcss? 【发布时间】：2021-01-10 16:59:48 【问题描述】：

我在 tailwindcss 文档之后制作了 dark 变体，但这不起作用，不幸的是，在这个文档中，没有给出确切的解释！！

如何制作这样的变体：

<p class="dark:text-white text-gray-700"></p>

有人可以帮帮我吗？

【问题讨论】：

【参考方案1】：

<p style="color='color'" ></p>

写下“颜色”的颜色名称

【讨论】：

【参考方案2】：

现在，只要在用户的操作系统上启用暗模式，暗：class 类将优先于无前缀的类。

只有在您的操作系统启用后才能使用暗模式。

另外，也许您没有在 tailwind.config.js 中添加深色设置

// tailwind.config.js
module.exports = 
  darkMode: 'media',
  // ...

如果您想支持手动切换暗模式而不是依赖操作系统首选项，请更改类的媒体设置

【讨论】：

以上是关于如何在 tailwindcss 中创建自定义变体？的主要内容，如果未能解决你的问题，请参考以下文章