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

Question

我正在尝试找到一种在顺风中使用我动态生成的调色板的方法。我已经使用@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 使用的 PurgeCSS 支持variables应该删除未使用的变量的选项，但 Tailwind 中的 PurgeCSS 选项是不同的。

顺风选项：

module.exports = {
  purge: ['./**/*.{js,jsx,ts,tsx}'],
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      palette,
    },
  },
}

PurgeCSS 选项：

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

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

标签： tailwind-csscss-purge