How to use custom CSS colors in my tailwind preset?-CodePudding

I'm using tailwind 3 with multiple color themes and that theme will be used in multiple apps. 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. Its structured like that:
index.css

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

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 ? 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.

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

CodePudding user response：

You have almost got it , just remove the wrapping of rgba.

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

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

In your tailwind.config.js use it as:

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

Refer this GFG post for more How to use css variables with tailwind-css

CodePudding user response：

You might use tw-colors, it is tailwind plugin that supports multiple color themes

   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:

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

CodePudding user response：

You almost got it, just need to add <alpha-value> placeholder for alpha channel eg 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