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

问题描述 投票：0回答：2

我的网站需要一个来自数据库的动态主题，可能的值有 

theme-1
、
theme-2
等，我希望每个主题都能更改网站的调色板，即 
primary
顺风颜色
green
代表 
theme-1
，但 
blue
代表 
theme-2
。

我尝试过使用 https://github.com/upupming/tailwindcss-themeable 但它太过分了，因为它会重新生成所有颜色，并且在每个类之前都有一个非常麻烦且很长的前缀。我想在 

body
级别定义 'theme-1' 类，并按照这个伪代码做一些事情

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

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

javascript css tailwind-css
2个回答
2
投票

你可以使用tw-colors，（我自己写的）。这是一个纤薄的插件，可以非常轻松地配置多个颜色主题。

tailwind.config.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',
            },
         })
      ],
   };

在课堂上使用这样的主题：

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

或者带有数据属性：

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

可以使用一些切换按钮或您喜欢的任何内容动态切换主题

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))'
    }

...

现在您可以使用 text-primary-500 并仅使用 1 个父类来更改颜色

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.