首页 Tailwindcss-v3中使用暗黑模式
文章
取消

Tailwindcss-v3中使用暗黑模式

根据官网文档配置 tailwind.config.js

1
2
3
4
5
/** @type {import('tailwindcss').Config} */

module.exports = {
  darkMode: "class",
};

className 中直接添加样式 (生效)

1
<div className="dark:bg-black"></div>

查看元素发现生效样式

1
2
3
4
:is(.dark .dark\:bg-black) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

使用@apply指令添加样式 (生效)

1
2
3
import "./index.scss";

<div className="bg"></div>;
1
2
3
.bg {
  @apply dark:bg-black;
}

查看元素发现生效样式

1
2
3
4
:is(.dark .bg) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

使用CSS Modules添加样式 (失效)

1
2
3
import style from "./index.module.scss";

<div className={style.bg}></div>;
1
2
3
.bg {
  @apply dark:bg-black;
}

查看元素发现编译后的样式

因为 module 作用域的原因,从而导致 dark mode 全局样式没有生效

1
2
3
4
:is(._dark_rfi4e_1 ._bg_rfi4e_1) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

解决方案: 添加 class 属性选择器

修改配置文件 tailwind.config.js

1
2
3
4
5
/** @type {import('tailwindcss').Config} */

module.exports = {
  darkMode: ["class", '[class="dark"]'],
};

className 中直接添加样式 (生效)

查看元素发现生效样式

1
2
3
4
:is([class="dark"] .dark\:bg-black) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

使用@apply指令添加样式 (生效)

查看元素发现生效样式

1
2
3
4
:is([class="dark"] .bg) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

使用CSS Modules添加样式 (生效)

查看元素发现生效样式

1
2
3
4
:is([class="dark"] ._bg_rfi4e_1) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
本文由作者按照 CC BY 4.0 进行授权