将 Tailwind 深色变体与自定义类一起使用

Posted 2023-03-06

【中文标题】将 Tailwind 深色变体与自定义类一起使用

【英文标题】：Using Tailwind dark variant with custom classes

【发布时间】：2021-12-04 13:22:28

【问题描述】：

tailwind 是否允许 dark 变体与自定义类一起使用？

考虑这个简单的工作示例：

<div class="bg-white dark:bg-black">
    Hello, world
</div>

上面会为元素应用黑色背景，但如果尝试使用自定义类，则不会：

`style.css`
.card-background 
    @apply bg-black;


`index.html`
<div class="bg-white dark:card-background">
    Hello, world
</div>

【参考方案1】：

你有两种方式，

如果您只想使用颜色，可以将颜色插入到 tailwind 配置文件中

如果不是，您必须为您需要的每个自定义类定义暗类。

例如

 .dark 
   .dark\:card-background 
     @apply bg-black;