Tailwind Palette to CSS Variables

README.md

Tailwind Shades to CSS Variables

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

Overview

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;

Usage

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.

Options

--to-rgb

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.

--unwrap-rgb

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.

shades-to-css.js

if (process.argv[2] === '--help' || process.argv[2] === 'help') {
    console.log('\x1b[32mTailwind Shades to CSS Variables\x1b[0m')
    console.log('\x1b[33mUsage:\x1b[0m')
    console.log('   shades-to-css <color> <object> [options]')
    console.log('\x1b[36mArguments:\x1b[0m')
    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[36mOptions:\x1b[0m')
    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.')
    process.exit(0);
}

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.")
    process.exit(1)
}

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"
})

console.log(vars)

tailwind.config.js

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')
            }
        }
    }
    
}