How to use custom CSS colors in my tailwind preset?
Question
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
3 answers
solution1
0 2023-01-17 14:16:25
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
solution2
0 2023-01-17 15:44:52
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));
}
solution3
0 2023-01-17 18:28:34
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.