-
-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Generate Dynamic Custom Properties in Config #89
Comments
I resolved this if anyone else might need this functionality. Add the following function at the end of your Tailwind config: const refactorColors = themeColors => {
const colors = {}
for (const color in themeColors) {
if (
color === 'inherit' ||
color === 'current' ||
color === 'transparent' ||
color === 'black' ||
color === 'white'
) {
colors[color] = `var(--colors-${color})`
} else {
for (const number in themeColors[color]) {
colors[`${color}-${number}`] = `var(--colors-${color}-${number})`
}
}
}
return colors
} Then in your export default {
content: ['./src/**/*.{vue,js}'],
theme: {
extend: {},
variables: theme => ({
DEFAULT: {
bg: {
...refactorColors(theme('colors'))
}
}
})
},
plugins: [forms, variablePlugin]
} This will produce a full list of :root {
--bg-inherit: var(--colors-inherit);
--bg-current: var(--colors-current);
--bg-transparent: var(--colors-transparent);
--bg-black: var(--colors-black);
--bg-white: var(--colors-white);
--bg-slate-50: var(--colors-slate-50);
--bg-slate-100: var(--colors-slate-100);
--bg-slate-200: var(--colors-slate-200);
--bg-slate-300: var(--colors-slate-300);
--bg-slate-400: var(--colors-slate-400);
--bg-slate-500: var(--colors-slate-500);
--bg-slate-600: var(--colors-slate-600);
--bg-slate-700: var(--colors-slate-700);
--bg-slate-800: var(--colors-slate-800);
--bg-slate-900: var(--colors-slate-900);
--bg-slate-950: var(--colors-slate-950);
...
} Of course you can set any color based custom props by modifying the variable prop. variables: theme => ({
DEFAULT: {
border: {
...refactorColors(theme('colors'))
}
}
}) Result: :root {
--border-inherit: var(--colors-inherit);
--border-current: var(--colors-current);
--border-transparent: var(--colors-transparent);
--border-black: var(--colors-black);
--border-white: var(--colors-white);
--border-slate-50: var(--colors-slate-50);
--border-slate-100: var(--colors-slate-100);
--border-slate-200: var(--colors-slate-200);
--border-slate-300: var(--colors-slate-300);
--border-slate-400: var(--colors-slate-400);
--border-slate-500: var(--colors-slate-500);
--border-slate-600: var(--colors-slate-600);
--border-slate-700: var(--colors-slate-700);
--border-slate-800: var(--colors-slate-800);
--border-slate-900: var(--colors-slate-900);
--border-slate-950: var(--colors-slate-950);
...
} Hopefully it will be useful to someone 😄 |
Versions:
Question:
I'm trying to create the full suite of Tailwind classes into custom props for a package I'm working on.
I've already created the full color palette which look like so:
Now I want to generate other elements with color props, but I want to use the variable obviously as opposed to the hex code again:
It would be supper unproductive to have to change hexes all over the place wherever the color prop is used.
So in my Tailwind Config I have the variables property as a function passing in theme and colors:
If I do the following:
I'll get all the colors with hex
How can I dynamically loop through the colors array and generate vars:
`var(--colors-${color}-${number})`
Thanks
The text was updated successfully, but these errors were encountered: