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

Question

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

如何制作这样的变体：

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

有人能帮帮我吗？

Answer 1

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

写'color'

的颜色名称

Answer 2

Now whenever dark mode is enabled on the user’s operating system, dark:{class} classes will take precedence over unprefixed classes.

暗模式仅在您的操作系统启用时可用。

此外，您可能没有在 tailwind.config.js

中添加深色设置

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

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

的媒体设置

How to create a custom variant in tailwindcss?