Skip to content

Instantly share code, notes, and snippets.

Last active September 25, 2023 23:56
Show Gist options
  • Save ryangjchandler/dd8ef557475614b72f35c9f79a7c9889 to your computer and use it in GitHub Desktop.
Save ryangjchandler/dd8ef557475614b72f35c9f79a7c9889 to your computer and use it in GitHub Desktop.
Tailwind Palette to CSS Variables

Tailwind Shades to CSS Variables

This script can be used to generate a set of CSS variables from a Tailwind shades object.


Let's say you have the following JavaScript object. You might have generated such an object on a site such as Tailwind Shades.

  '50': '#B2B7DF',
  '100': '#A0A6D8',
  '200': '#7C84C9',
  '300': '#5863BA',
  '400': '#414B9E',
  '500': '#323A7A',
  '600': '#232956',
  '700': '#141832',
  '800': '#06060D',
  '900': '#000000'

Running this object through the shades-to-css script (shades-to-css primary [object]) will output the following CSS:

--primary-50: #B2B7DF;
--primary-100: #A0A6D8;
--primary-200: #7C84C9;
--primary-300: #5863BA;
--primary-400: #414B9E;
--primary-500: #323A7A;
--primary-600: #232956;
--primary-700: #141832;
--primary-800: #06060D;
--primary-900: #000000;


Create a new file anywhere in your project and paste the contents of shades-to-css.js into that file.

Once you have done that, copy your shades object and run the following command:

node ./path/to/shades-to-css.js [color] "[shades]"

Here's an example:

node ./shades-to-css.js primary "{ '50': '#B2B7DF', '100': '#A0A6D8', '200': '#7C84C9', '300': '#5863BA', '400': '#414B9E', '500': '#323A7A', '600': '#232956', '700': '#141832', '800': '#06060D', '900': '#000000' }"

This will generate a set of CSS variables with the prefix --primary- followed by the key of the object, e.g. 100, 500, 900.

You can then use this set of CSS variables to create dynamic Tailwind colors. A good example is whitelabelling or "skinning" your user interface for different clients.



When this option is provided, any hexadecimal values inside of your shades object will be converted to RGB and used as the value of the property.


This option can be used alongside the --to-rgb option. It will convert the hexadecimal value into an RGB string but instead of wrapping the values in rgb(), it will output a comma-separated list instead.

The use case for this option is generating custom color palettes that support opacity and other Tailwind modifiers. You can read more about this here.

if (process.argv[2] === '--help' || process.argv[2] === 'help') {
console.log('\x1b[32mTailwind Shades to CSS Variables\x1b[0m')
console.log(' shades-to-css <color> <object> [options]')
console.log(' \x1b[32mcolor\x1b[0m The name of the color, e.g. "primary"')
console.log(' \x1b[32mobject\x1b[0m A valid JavaScript object where the key is the scale (e.g. 500) and the value is the hexadecimal color.')
console.log(' \x1b[32m--to-rgb\x1b[0m Converts hexadecimal values into RGB values.')
console.log(' \x1b[32m--unwrap-rgb\x1b[0m Separates RGB values and outputs a comma-separated list.')
const shadeName = process.argv[2]
const shades = eval(`(${process.argv[3]})`)
const toRgb = process.argv.includes('--to-rgb')
const unwrapRgb = process.argv.includes('--unwrap-rgb')
if (typeof shades !== 'object') {
console.error("Please provide a valid JavaScript object.")
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
let vars = ''
Object.entries(shades).forEach(([shade, hex]) => {
const rgb = hexToRgb(hex)
const color = toRgb
? (unwrapRgb ? `${rgb.r}, ${rgb.g}, ${rgb.b}` : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`)
: hex
vars += `--${shadeName}-${shade}: ${color};` + "\n"
const variableColor = (variable) => {
const SCALE = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
const colors = {}
SCALE.forEach(scale => {
colors[scale] = ({ opacityVariable, opacityValue }) => {
if (opacityValue !== null) {
return `rgba(var(--${variable}-${scale}), ${opacityValue})`
if (opacityVariable !== null) {
return `rgba(var(--${variable}-${scale}), ${opacityVariable})`
return `rgb(var(--${variable}-${scale}))`
return colors
module.exports = {
theme: {
extend: {
colors: {
primary: variableColor('primary')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment