如何使用 Tailwind 自定义暗模式颜色

Question

我正在尝试为我的项目设置 Tailwind（这是我第一次使用它），但不知道我应该如何定义深色和浅色主题的颜色；有没有办法做这样的事情：

@tailwind base;
@tailwind components;
@tailwind utilities;
@dark
{
   --red: #FFC8C8;
}
@light
{
   --red: #F00000;
}

module.exports = {
   darkMode: 'class',
   theme: {
      extend: {
         'red': 'var(--red)',
      }
   }
};

这是我正在尝试做的事情的假设表示。不幸的是，我为 Tailwind 找到的教程都没有解释如何做这样的事情。有没有办法使用 Tailwind 自定义暗模式调色板？谢谢。

Answer 1

您唯一需要的是在 tailwind.config 文件中设置颜色

module.exports = {
   darkMode: 'class',
   theme: {
      extend: {
         'red': '#FFC8C8',
      }
   }
};

现在你可以像这样使用它 => dark:bg-red, dark:text-red ...