在NextJS Project中没有尾风配置

Question

在带有尾风的新版本的NextJ中，尾风CSS配置文件没有生成，但是我需要在项目中使用tailwind.config.js进行下一个主题的设置。 谁能帮忙？

我尝试创建尾风配置，但我无法做到这一点。

Answer 1

tailwind.config.js

。

更改

next-themes

变体以使用

dark

深色选择器使用

next-themes

：

@custom-variant

@import "tailwindcss";

@custom-variant dark ([data-theme="dark"], [data-theme="dark"] *);

如果您想自动交换CSS颜色而不使用

<div class="text-red-500 dark:text-blue-500">Foo</div>

，则可以利用CSS变量：dark:

@import "tailwindcss";

@custom-variant dark ([data-theme="dark"], [data-theme="dark"] *);

@theme {
  --color-primary: red;
}

@layer theme {
  [data-theme="dark"] {
    --color-primary: blue;
  }
}