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

tsm1rwdh 于 2023-03-28 发布在 Java

关注(0)|答案(2)|浏览(139)

我需要有一个动态的主题，我的网站，从一个数据库，可能的值是theme-1，theme-2等，我希望每一个改变网站的调色板，即primary顺风颜色为theme-1，但blue为theme-2的green。
我试过使用https://github.com/upupming/tailwindcss-themeable，但它是一个矫枉过正，因为它重新生成所有的颜色，并有一个非常麻烦和长前缀前的每一个类。

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

由于依赖性限制，我使用Tailwind v2。

JavaScript

来源：https://stackoverflow.com/questions/73150351/how-can-i-have-dynamic-primary-classes-in-tailwindcss

2条答案

按热度按时间

t9aqgxwy1#

解决方案：使用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，并且只使用1个父类更改颜色

赞(0）回复(0）举报 2023-03-28

kulphzqa2#

你可以使用tw-colors。这是一个很瘦的插件，可以很容易地配置多个颜色主题。
顺风配置js

const { createThemes } = require('tw-colors');

   module.exports = {
      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      plugins: [
         createThemes({
            halloween: { 
               'primary': 'orange',
               'secondary': 'yellow',
            },
            summer: { 
               'primary': 'pink',
               'secondary': 'red',
            },
            winter: { 
               'primary': 'blue',
               'secondary': 'green',
            },
            party: { 
               'primary': 'steelblue',
               'secondary': 'darkblue',
            },
         })
      ],
   };

在class中使用这样的主题：

<html class='theme-halloween'>
      ...
</html>

或者使用数据属性：

<html data-theme='halloween'>
      ...
</html>

主题可以动态切换一些切换按钮或任何你喜欢的

赞(0）回复(0）举报 2023-03-28

我来回答

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

2条答案

相关问题

热门标签

最新问答