浅色/深色主题样式覆盖后续添加的Tailwind类，如何解决？

我在app.css里搭建了浅色/深色主题结构，给<div>、<a>等标签设置了默认样式：

<html lang="en" data-theme="dark">
... 代码省略
</html>

@import "tailwindcss";
@import "tailwindcss/utilities";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@theme {
    --color-light-bg: #ffffff;
    --color-light-primary: #e6e6e6;
    --color-light-secondary: #d1d1d1;
    --color-light-text: #000000;
    --color-light-accent: #26a1ff;

    --color-dark-bg: #1e1e1e;
    --color-dark-primary: #292929;
    --color-dark-secondary: #363636;
    --color-dark-text: #ffffff;
    --color-dark-accent: #006aba;
}

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    @apply bg-light-primary text-light-text;
}

[data-theme="dark"] {
    body {
        @apply bg-dark-bg text-dark-text;
    }
}

div {
    @apply bg-light-bg;
}

[data-theme="dark"] div {
    @apply bg-dark-primary;
}

button {
    @apply bg-light-accent text-light-text;
}

[data-theme="dark"] button {
    @apply bg-dark-accent text-dark-text;
}

a {
    @apply text-light-text;
}

[data-theme="dark"] a {
    @apply text-dark-text;
}

但这些全局标签样式的优先级高于后续添加的Tailwind内联类，比如给NavLink加text-red-500时，会被主题里的text-light-text/text-dark-text覆盖——因为标签选择器的特异性（1）比类选择器（10）高，导致自定义类不生效。

以下是几个可行的解决方法：

方案1：用:where()降低全局样式特异性 #

:where()伪类不会增加选择器的特异性（特异性为0），这样Tailwind的类选择器就能轻松覆盖默认样式。修改全局标签样式如下：

/* 替换原div样式 */
:where(div) {
    @apply bg-light-bg;
}
[data-theme="dark"] :where(div) {
    @apply bg-dark-primary;
}

/* 同理修改button、a等标签 */
:where(a) {
    @apply text-light-text;
}
[data-theme="dark"] :where(a) {
    @apply text-dark-text;
}

:where(button) {
    @apply bg-light-accent text-light-text;
}
[data-theme="dark"] :where(button) {
    @apply bg-dark-accent text-dark-text;
}

方案2：改用Tailwind的@layer base定义基础样式 #

Tailwind的@layer base专门用来定义基础HTML元素样式，生成的样式优先级会低于工具类（因为工具类属于utilities层，优先级更高）。把所有基础样式移到@layer base里：

@import "tailwindcss";
@import "tailwindcss/utilities";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@theme {
    --color-light-bg: #ffffff;
    --color-light-primary: #e6e6e6;
    --color-light-secondary: #d1d1d1;
    --color-light-text: #000000;
    --color-light-accent: #26a1ff;

    --color-dark-bg: #1e1e1e;
    --color-dark-primary: #292929;
    --color-dark-secondary: #363636;
    --color-dark-text: #ffffff;
    --color-dark-accent: #006aba;
}

@layer base {
    body {
        height: 100vh;
        width: 100vw;
        display: flex;
        @apply bg-light-primary text-light-text;
    }

    div {
        @apply bg-light-bg;
    }

    button {
        @apply bg-light-accent text-light-text;
    }

    a {
        @apply text-light-text;
    }

    [data-theme="dark"] body {
        @apply bg-dark-bg text-dark-text;
    }

    [data-theme="dark"] div {
        @apply bg-dark-primary;
    }

    [data-theme="dark"] button {
        @apply bg-dark-accent text-dark-text;
    }

    [data-theme="dark"] a {
        @apply text-dark-text;
    }
}

方案3：用!强制提升Tailwind类优先级（不推荐） #

如果只是临时需要覆盖样式，可以给Tailwind类加!前缀，强制提升它的优先级。但这种方法会增加样式维护成本，尽量少用：

<NavLink to="/genres" className="!text-red-500">Genres</NavLink>

内容的提问来源于stack exchange，提问作者Ganz