使用 Tailwind CSS 构建多色模板的正确方法是什么？答案

【问题标题】：What is the correct way to build multi-color template using Tailwind CSS?使用 Tailwind CSS 构建多色模板的正确方法是什么？
【发布时间】：2023-01-31 19:47:56
【问题描述】：

在 Tailwind CSS 中为模板创建自定义配色方案非常容易。您只需修改tailwind.config.js，添加您的自定义调色板，然后像使用 Tailwind 的普通类一样使用它。例如bg-brand-500：

    theme: {
        extend: {
            colors: {
                brand: {
                    '50': '#B0ECEC',
                    '100': '#A0E8E8',
                    '200': '#7FE1E1',
                    '300': '#5ED9D9',
                    '400': '#3DD1D1',
                    '500': '#2CB9B9',
                    '600': '#218C8C',
                    '700': '#165E5E',
                    '800': '#0C3131',
                    '900': '#010404'
                },
            }
        }
    }

现在我陷入了制作多色模板的困境。

我相信你们都在网上看到过模板，例如，您可以在其中选择红色或蓝色，并且整个模板的配色方案都会发生变化。

你如何在 Tailwind 中做到这一点？

更新: 在其他 CSS 流派中，如 SASS，您只需创建另一个颜色变量文件并使用常规 <link href='/path/to/red/variables.css' /> 动态加载不同的文件。

【问题讨论】：

标签： colors tailwind-css

【解决方案1】：

您可以为此使用CSS variables。

在顺风配置中，您可以像以前一样创建品牌颜色，但是您使用的不是十六进制颜色代码，例如50: 'var(--brand-50)'。然后在您的 index.css 中，您可以将这些变量添加到基础层，例如：

@layer base {
    :root {
        --brand-50: #B0ECEC;
    } 
    .theme-red {
        --brand-50: #BB0000;
    }
}

现在，如果您将类 .theme-red 添加到您的正文中，则 text-brand-50 将为红色。

In this video of Tailwind labs 完全解释了。还解释了如何处理不透明度，尽管自 tailwind 3.1 there is an easier way of doing that 以来。

希望这可以帮助。

【讨论】：

【解决方案2】：

您可以使用 tw-colors 插件。

创建您的主题

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

   module.exports = {
      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      plugins: [
         createThemes({
            light: { 
                brand: {
                    '50': '#B0ECEC',
                    '100': '#A0E8E8',
                    '200': '#7FE1E1',
                    '300': '#5ED9D9',
                    '400': '#3DD1D1',
                    '500': '#2CB9B9',
                    '600': '#218C8C',
                    '700': '#165E5E',
                    '800': '#0C3131',
                    '900': '#010404'
                },
            },
            dark: { 
                brand: {
                    '50': '#321321',
                    '100': '#654654',
                    '200': '#987987',
                    '300': '#786541',
                    '400': '#aeeeee',
                    '500': '#786541',
                    '600': '#987987',
                    '700': '#165E5E',
                    '800': '#654654',
                    '900': '#321321'
                },
            }
         })
      ],
   };

使用您的主题

   <html class='theme-light'>
      <div class="bg-brand-500">...</div>
   </html>

然后，您可以根据需要动态切换主题，例如使用 switch

【讨论】：