Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Helper functions for Tailwind CSS variable colors
// based on https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo
// this object holds the TW variable name we will have in our theme. The value are a pair for [CSSVariable, value]
// we use only the RBG vaules without the actual "rgb(0, 0, 0)" decalration for Tailwind to use in it's functions.
const customColors = {
'demo': ['var(--demo)', '64, 180, 229'],
'another-tw-name': ['var(--another-tw-name)', '102, 195, 234'],
};
/**
* This function is the way to create all the opacity values for CSS variables:
* https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo
*/
function genrateTailwindCallbacks(colors) {
return Object.keys(colors).reduce((output, colorToken) => {
const colorPair = colors[colorToken];
const [, value] = colorPair;
return {
...output,
[colorToken]: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(${value}, ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(${value}, var(${opacityVariable}, 1))`;
}
return `rgb(${value})`;
},
};
}, {});
}
// function to generate a replacemnet to css custom variables for
// actual RBG color value for tailwind-theme-viewer:
function getThemeReplacementColorMap(colors) {
return Object.keys(colors).reduce((output, colorToken) => {
const colorPair = colors[colorToken];
const [name, value] = colorPair;
return {
...output,
[name]: `rbg(${value})`,
};
}, {});
}
/**
*
* @param {*} colors
* for tailwind-theme-viewer
*/
function genrateThemeConfigViewerColors(colors) {
return Object.keys(colors).reduce((output, colorToken) => {
const [name, value] = colors[colorToken];
name;
return {
...output,
[colorToken]: `rgb(${value})`,
};
}, {});
}
@NullVoxPopuli
Copy link

NullVoxPopuli commented Jan 21, 2022

how do you use this with tailwind-config-viewer?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment