Expose Tailwind colors as CSS custom properties (variables)

tailwind-colors-as-css-variables.md

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

• You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
• You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.

module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          '100': '#f5f5f5',
          '200': '#eeeeee',
          '300': '#e0e0e0',
          '400': '#bdbdbd',
          '500': '#9e9e9e',
          '600': '#757575',
          '700': '#616161',
          '800': '#424242',
          '900': '#212121',
        },
      },
    },
  },
  plugins: [
    function({ addBase, theme }) {
      function extractColorVars(colorObj, colorGroup = '') {
        return Object.keys(colorObj).reduce((vars, colorKey) => {
          const value = colorObj[colorKey];

          const newVars =
            typeof value === 'string'
              ? { [`--color${colorGroup}-${colorKey}`]: value }
              : extractColorVars(value, `-${colorKey}`);

          return { ...vars, ...newVars };
        }, {});
      }

      addBase({
        ':root': extractColorVars(theme('colors')),
      });
    },
  ],
};

Assuming you have already added TailwindCSS to your project and that your CSS file is called global.css.

First, you need to edit global.css to look like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #fff;
  --secondary-color: #000;
}

And then, in order to be able to use them, you need to update tailwind.config.js with the new CSS variables like so:

module.exports = {
  theme: {
    extend: {
      colors: {
        "primary-color": "var(--primary-color)",
        "secondary-color": "var(--secondary-color)"
      },
    },
  },
};

You can now use these variables as desired:

<div class="bg-primary-color">
  <h1>Hello World</h1>
</div>

For whoever wants to only expose their custom colors, put them all in a separate array:

extend: {
  colors: {
    brand: {
      yellow: '#FFF4C6',
    }
  }
}

And use theme('colors.brand') in the addBase() function.

:root {
  --tw-color-white: theme('colors.white');
  --tw-color-black: theme('colors.black');
  --tw-color-gray-100: theme('colors.gray.100');
  --tw-color-gray-200: theme('colors.gray.200');
  --tw-color-gray-300: theme('colors.gray.300');
  --tw-color-gray-400: theme('colors.gray.400');
  --tw-color-gray-500: theme('colors.gray.500');
  --tw-color-gray-600: theme('colors.gray.600');
  --tw-color-gray-700: theme('colors.gray.700');
  --tw-color-gray-800: theme('colors.gray.800');
  --tw-color-gray-900: theme('colors.gray.900');
  --tw-color-gray-950: theme('colors.gray.950');
}

This is the right play. Thanks @joshdavenport.

• No plugin needed
• It's opt-in to colors to "variablize" in the bundle
• Intuitive as to what the values will replace to
• Keeps the config as the source of truth.