如何在我的顺风预设中使用自定义 CSS colors？

Question

I'm using tailwind 3 with multiple color themes and that theme will be used in multiple apps.我正在使用具有多种颜色主题的 tailwind 3，并且该主题将用于多个应用程序。 I want to make a preset and add it as a dependency on my repos but I have the following problem:我想制作一个预设并将其添加为对我的存储库的依赖，但我遇到以下问题：

My themes rely heavily on CSS variables to work.我的主题严重依赖 CSS 变量来工作。 Its structured like that:它的结构是这样的：
index.css index.css

@layer base {
    :root {
        --default-color: 255,255,255;
    }
    #bright-theme {
        --default-color: 0,0,0;
    }
    /* Next themes here */
}

tailwind-config.js tailwind-config.js

module.exports={
    theme: {
        extend: {
            colors: {
                'element-base': `rgba(var(--default-color))`,
                // etc...
            }
        }
    }
}

Is there a way to ship css variables with my themes?有没有办法将 css 变量与我的主题一起发送？ Otherwise there's no point at doing this.否则没有意义这样做。 I can change the structure of the preset/theme if needed.如果需要，我可以更改预设/主题的结构。 I can't use the dark mode option from tailwind as I have more than one variant.我不能使用 tailwind 的dark mode选项，因为我有不止一种变体。

This setup works locally but I'd like to be able to export it from a npm package for example but I can't figure a way to make the CSS variables approach work with Tailwind presets此设置在本地有效，但我希望能够从 npm package 导出它，但我想不出一种方法来使 CSS 变量方法与Tailwind 预设一起使用

Answer 1

You have almost got it, just remove the wrapping of rgba .你几乎已经搞定了，只需移除rgba的包装。

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --default-color: #fff;
}

In your tailwind.config.js use it as:在您的tailwind.config.js中，将其用作：

module.exports = {
  theme: {
    extend: {
      colors: {
        "element-base": "var(--default-color)",
      },
    },
  },
};

Refer this GFG post for more How to use css variables with tailwind-css有关更多信息，请参阅此 GFG 帖子如何将 css 变量与 tailwind-css 一起使用

Answer 2

You might use tw-colors , it is tailwind plugin that supports multiple color themes你可能会使用tw-colors ，它是支持多种颜色主题的 tailwind 插件

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

   module.exports = {
      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      plugins: [
         createThemes({
            light: { 
               'primary': 'steelblue',
               'secondary': 'darkblue',
               'base-100': '#F3F3F3',
            },
            dark: { 
               'primary': 'turquoise',
               'secondary': 'tomato',
               'base-100': '#4A4A4A',
            },
            forest: { 
               'primary': '#2A9D8F',
               'secondary': '#E9C46A',
               'base-100': '#264653',
            },
         })
      ],
   };

Apply your theme (you can switch it dynamically if needed):应用您的主题（如果需要，您可以动态切换它）：

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

You can then use the following css variables:然后您可以使用以下 css 变量：

.my-class-1 {
   color: hsl(var(--twc-primary));
   # OR
   color: hsl(var(--twc-secondary));
   # OR
   color: hsl(var(--twc-base-100));
}

Answer 3

You almost got it, just need to add <alpha-value> placeholder for alpha channel eg text-element-base/50你几乎明白了，只需要为 alpha 通道添加<alpha-value>占位符，例如text-element-base/50

module.exports = {
  theme: {
    extend: {
      colors: {
        'element-base': `rgba(var(--default-color), <alpha-value>)`,
      }
    },
  },
  plugins: [],
}

DEMO - I've changed rgb values just to show the result演示- 我更改了 rgb 值只是为了显示结果

如何在我的顺风预设中使用自定义 CSS colors？

问题描述

3 个解决方案

解决方案1
0 2023-01-17 14:16:25

解决方案2
0 2023-01-17 15:44:52

解决方案3
0 2023-01-17 18:28:34

如何在我的顺风预设中使用自定义 CSS colors？

问题描述

3 个解决方案

解决方案1 0 2023-01-17 14:16:25

解决方案2 0 2023-01-17 15:44:52

解决方案3 0 2023-01-17 18:28:34

解决方案1
0 2023-01-17 14:16:25

解决方案2
0 2023-01-17 15:44:52

解决方案3
0 2023-01-17 18:28:34