如何在TailwindCSS中拥有动态的“主”类？

Question

我需要有一个动态的主题，我的网站，从一个数据库，可能的值是theme-1，theme-2等，我希望每一个改变该网站的调色板，即primary顺风颜色为green为theme-1，但blue为theme-2。

我尝试过使用https://github.com/upupming/tailwindcss-themeable，但是它太过分了，因为它重新生成了所有的颜色，并且在每个类之前都有一个非常繁琐和长的前缀。我想在body级别上定义“主题-1”类，并按照这个伪代码的方式来做一些事情。

.theme-2 {
  /* primary-500 is now color: blue */
}

由于依赖约束，我使用的是尾风v2。

Answer 1

解决方案:使用CSS变量。

main.css

:root .theme-1 {
        --tw-text-opacity: 1;
        --color-primary-50: 235,242,254;
        --color-primary-100: 215,230,253;
        --color-primary-200: 176,205,251;
        --color-primary-300: 137,180,250;
        --color-primary-400: 98,155,248;
        --color-primary-500: 59,130,246;
        --color-primary-600: 11,97,238;
        --color-primary-700: 8,75,184;
        --color-primary-800: 6,53,131;
        --color-primary-900: 4,31,77;
    }

tailwind.config.js

colors: {
    ...
    primary: {
        50: 'rgba(var(--color-primary-50), var(--tw-text-opacity))',
        100:'rgba(var(--color-primary-100), var(--tw-text-opacity))',
        200:'rgba(var(--color-primary-200), var(--tw-text-opacity))',
        300:'rgba(var(--color-primary-300), var(--tw-text-opacity))',
        400:'rgba(var(--color-primary-400), var(--tw-text-opacity))',
        500:'rgba(var(--color-primary-500), var(--tw-text-opacity))',
        600:'rgba(var(--color-primary-600), var(--tw-text-opacity))',
        700:'rgba(var(--color-primary-700), var(--tw-text-opacity))',
        800:'rgba(var(--color-primary-800), var(--tw-text-opacity))',
        900:'rgba(var(--color-primary-900), var(--tw-text-opacity))'
    }

...

现在，您可以使用文本主-500，并且只使用一个父类更改颜色。