我需要有一个动态的主题为我的网站,从一个数据库来,可能的值是theme-1theme-2等,我希望每一个改变网站的调色板,即primarytailwind colored颜色 是greentheme-1,但bluetheme-2.

我试过使用https://github.com/upupming/tailwindcss-themeable,但它是如此的过度,因为它重新生成所有的 colored颜色 ,并且在每个类之前都有一个非常繁琐和长的前缀.我想在body级定义"theme-1"类,并按照这段伪代码做一些事情

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

由于依赖性约束,我正在使用Tailwind v2.

推荐答案

解决方案:使用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))'
    }

...

现在,您可以使用text-primary-500,只需一个父类即可更改 colored颜色

Javascript相关问答推荐

jQuery s data()[storage object]在vanilla JavaScript中?'

使用JQuery单击元素从新弹出窗口获取值

使用ThreeJ渲染的形状具有抖动/模糊的边缘

在浏览器中触发插入事件时检索编码值的能力

如何在Node.js中排除导出的JS文件

为什么JPG图像不能在VITE中导入以进行react ?

使用NextJS+MongoDB+Prisma ORM获取无效请求正文,无法发布错误

AddEventListner,按键事件不工作

图表4-堆叠线和条形图之间的填充区域

Reaction即使在重新呈现后也会在方法内部保留局部值

Firebase函数中的FireStore WHERE子句无法执行

错误400:当我试图在React中使用put方法时,该字段是必需的

单击子按钮时将活动切换类添加到父分区

此上下文在JavaScript中

使用JAVASCRIPT的偏移力矩函数库问题

TypeScrip Types-向流程对象添加属性

JavaScript原型排序函数不会与所有成员进行比较

如何在应用内Chromium浏览器中启用通知模块?(未捕获ReferenceError:未定义通知)

JavaScriptpromise 和同步行为

如何隐藏SELECT中的第一个选项