Tailwind - 使用带有备用调色板的暗模式

如何解决Tailwind - 使用带有备用调色板的暗模式

我正在尝试找到一种在顺风中使用我动态生成的调色板的方法。我已经使用 @adobe/leonardo 和 style-dictionary 来生成我的调色板，它构建了如下内容：

const paletteLight = {
  'blue': {
    '01': '#032d52','02': '#033560','03': '#044176','04': '#044d8c','05': '#0559a4','DEFAULT': '#0559a3'
},const paletteDark = {
  'blue': {
    '01': '#aed8fd','02': '#97cdfc','03': '#74bcfb','04': '#51abfa','05': '#2b98f9','DEFAULT': '#0559a3'
}

基本上，这个调色板的概念是在明暗模式下使用一种具有相同对比度的蓝色，但在具有 white 色基的浅色调色板和具有 black 色基的深色调色板中。

>

我找到了一个解决方法：

/* vars.css */
:root {
  --blue-01: #032d52;
  --blue-02: #033560;
  --blue-03: #044176;
  --blue-04: #044d8c;
  --blue-05: #0559a4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue-01: #aed8fd;
    --blue-02: #97cdfc;
    --blue-03: #74bcfb;
    --blue-04: #51abfa;
    --blue-05: #2b98f9;
  }
}

等等在我的 tailwind 配置中：

module.exports = {
  purge: ['./**/*.{js,jsx,ts,tsx}'],theme: {
    colors: {
      transparent: 'transparent',current: 'currentColor',blue:
        '01': 'var(--blue-01)','02': 'var(--blue-02)','03': 'var(--blue-03)','04': 'var(--blue-04)','05': 'var(--blue-05)'
    },...
}

优点：

• 感谢 blue-03 dark:blue-04
，我可以以更好的暗模式方式使用选择器类，例如 @adobe/leonardo

缺点：

• 我无法自动从 vars.css 中删除未使用的颜色，或者我可能不知道是否有办法在 tailwind 中执行此操作

这不会是 10 个调色板大小的问题，但由于我工作的公司规模庞大，（我们有 100 多个编辑网站，40 多个软件产品）我有一个巨大的集中颜色调色板，也是因为在许多情况下这些产品是相关的。

我知道 Tailwind 使用支持选项 variables 的 PurgeCSS，该选项应该删除未使用的变量，但 Tailwind 中的 PurgeCSS 选项不同。

顺风选项：

module.exports = {
  purge: ['./**/*.{js,palette,},}

PurgeCSS 选项：

module.exports = {
  content: ['./**/*.{js,variables: true,}

是否存在某种方法可以直接从 Tailwind 配置中删除未使用的变量并避免在我的构建中添加 PurgeCSS 层？