Merott/tailwind-colors-as-css-variables.md

Last active July 7, 2025 22:40

Star (145) You must be signed in to star a gist
Fork (10) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/Merott/d2a19b32db07565e94f10d13d11a8574.js"></script>
Save Merott/d2a19b32db07565e94f10d13d11a8574 to your computer and use it in GitHub Desktop.

Expose Tailwind colors as CSS custom properties (variables)

Raw

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.

It lets you keep all of your color customizations within the Tailwind configuration, and access the final values programmatically, which isn't possible if you do it the other way around, referencing CSS variables from your Tailwind config.

See the Tailwind Plugins for more info on plugins.

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          '100': '#ebf6ff',
          '200': '#b7ddff',
          '300': '#85c2ff',
          '400': '#51a5ff',
          '500': '#2487ff',
          '600': '#006aff',
          '700': '#0755d4',
          '800': '#164398',
          '900': '#223867',
        },
      },
    },
  },
  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')),
      });
    },
  ],
};

sudo-vaibhav commented Apr 12, 2021

just to add some clarity to this otherwise amazing snippet, the colors are exposed as var(--color-color_name-intensity)

for example : var(--color-secondary-900)

dharmapurebuddha commented Mar 13, 2022

Oh sweet thank you for sharing this, it was very useful for incorporating colors into a few obscure styles Tailwind doesn't implement. Cheers 🌻

Maybach91 commented Jun 9, 2022

I wanted to use var(--color-green) instead of var(--color-green-DEFAULT) so i changed the script a bit:

function ({ addBase, theme }) {
      function extractColorVars (colorObj, colorGroup = '') {
        return Object.keys(colorObj).reduce((vars, colorKey) => {
          const value = colorObj[colorKey];
          const cssVariable = colorKey === "DEFAULT" ? `--color${colorGroup}` : `--color${colorGroup}-${colorKey}`;

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

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

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

stepanjakl commented Jul 29, 2022

Nice one, thanks for this!

EdvinTr commented Nov 5, 2022

This is awesome, thanks!

superniftydev commented Dec 31, 2022

Exactly what I was looking for. Cheers!

emigdio821 commented Mar 1, 2023

Is there a way to expose only the custom colors?
These ones:

extend: {
  colors: {
    customblue: '#0274b6',
    custombluehover: '#015483',
  },
},

Thanks!

benwinding commented Apr 15, 2023

Thank you for this!
Side note: an AI-driven search engine led me to this solution here! 😅
Phind -> Source link

jbasoo commented May 18, 2023 •

edited

Loading

I further modified @Maybach91's modification and abstracted a bit for any theme config, not just colors (theoretically, havent tested every type 😬).

Also I switched from addBase to addUtilites as my project isn't using the base styles, only utilities.

  plugins: [
    function({ addUtilities, theme }) {    
      function extractVars (obj, group = '', prefix) {
        return Object.keys(obj).reduce((vars, key) => {
          const value = obj[key];
          const cssVariable = key === "DEFAULT" ? `--${prefix}${group}` : `--${prefix}${group}-${key}`;
          
          const newVars =
          typeof value === 'string'
          ? { [cssVariable]: value }
          : extractVars(value, `-${key}`, prefix);
          
          return { ...vars, ...newVars };
        }, {});
      }
      
      addUtilities({
        ':root': {
          ...extractVars(theme('colors'), '', 'color'),
          ...extractVars(theme('boxShadow'), '', 'box-shadow')
        }
      })
    }
  ],

y-nk commented Jul 10, 2023

anybody did an official plugin for that? i'm thinking should i paste this snippet or npm install

Maybach91 commented Jul 12, 2023 •

edited

Loading

anybody did an official plugin for that? i'm thinking should i paste this snippet or npm install

@y-nk Yup:
https://npms.io/search?q=tailwindcss-colors-css-variables

This looks like the most maintained one

ianhernandez commented Aug 19, 2023

Anyone have a typescript version of this?

y-nk commented Aug 19, 2023 via email

after using this i'd argue against it. bundle size increased drastically since colors cannot be purged.

…

On Sat, Aug 19, 2023, 7:03 AM Ian Hernandez ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Anyone have a typescript version of this? — Reply to this email directly, view it on GitHub <https://gist.github.com/Merott/d2a19b32db07565e94f10d13d11a8574#gistcomment-4665348> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADEP2JLIT5UA2ZIMX6ADATXV77E5BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVA4TSNRTGQ2DENFHORZGSZ3HMVZKMY3SMVQXIZI> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

mathieutu commented Sep 5, 2023 •

edited

Loading

I works like a charm in Tailwind v3.3.3, thanks! 🎉

Here is a TS simplified version:

import { type PluginAPI } from 'tailwindcss/types/config'

export const colorVarsPlugin = ({ addBase, theme }: PluginAPI) => {
  const extractColorVars = (colorObj: Record<string, string>, colorGroup = '') => (
    Object.entries(colorObj)
      .reduce((vars, [colorKey, value]) => {
        const cssVariable = colorKey === 'DEFAULT' ? `--color${colorGroup}` : `--color${colorGroup}-${colorKey}`

        const newVars: Record<string, string> = typeof value === 'string'
          ? { [cssVariable]: value }
          : extractColorVars(value, `-${colorKey}`)

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

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

EDIT: Indeed, it'd be great to find a way to purge the colors..

joshdavenport commented Oct 18, 2023 •

edited

Loading

A note to people stumbling on this gist as I did: This plugin is awesome, really nice idea, but consider adding variables to your CSS manually. Using something like the below, as long as you have access in your CSS to tailwind directives, you can reference colours and create variables from them:

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

For example, if you're using Next and following the globals.css pattern the docs describe you can add this to globals.css.

Doing it that way you don't need to worry about the bundle size reports others have mentioned (haven't looked at it myself, so no idea how badly it affects the size). Obviously the whole point of the plugin is quickly and easily provide access to all colours, but maybe you don't need that, so consider what you need contextually.

oskarengstrom commented Nov 29, 2023 •

edited

Loading

A note to people stumbling on this gist as I did: This plugin is awesome, really nice idea, but consider adding variables to your CSS manually. Using something like the below, as long as you have access in your CSS to tailwind directives, you can reference colours and create variables from them:

@joshdavenport
This sounds great, but exactly how do you use theme() in globals.css?

simonhamp commented Nov 29, 2023

@oskarengstrom if you're generating your CSS through a bundler, like Vite or Webpack, then the theme() function will be exposed to you.

It won't work in plain CSS

rafaelrcamargo commented Jan 6, 2024

That's great! If anyone wants, here is a version that exports "R, G, B" values so you can use RGBA and play with the alpha in CSS:

import type { PluginAPI } from "tailwindcss/types/config"

export const colorsToVars = ({ addBase, theme }: PluginAPI) => {
  const extractColorVars = (
    colorObj: Record<string, string>,
    colorGroup = ""
  ) =>
    Object.entries(colorObj).reduce((vars, [colorKey, value]) => {
      const cssVariable =
        colorKey === "DEFAULT"
          ? `--tw${colorGroup}`
          : `--tw${colorGroup}-${colorKey}`

      const newVars: Record<string, string> =
        typeof value === "string"
          ? { [cssVariable]: parseColor(value)?.color.join(", ") }
          : extractColorVars(value, `-${colorKey}`)

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

  addBase({ ":root": extractColorVars(theme("colors")) })
}

/**
 * Color Parser
 * Grabbed this from Tailwind's source code :)
 */

let HEX = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i
let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i
let VALUE = /(?:\d+|\d*\.\d+)%?/
let SEP = /(?:\s*,\s*|\s+)/
let ALPHA_SEP = /\s*[,/]\s*/
let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)(?:,(?:[^ )]*?|var\(--[^ )]*?\)))?\)/

let RGB = new RegExp(
  `^(rgba?)\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
)
let HSL = new RegExp(
  `^(hsla?)\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
)

export function parseColor(value: string, { loose = false } = {}) {
  value = value.trim()

  let hex = value
    .replace(SHORT_HEX, (_, r, g, b, a) =>
      ["#", r, r, g, g, b, b, a ? a + a : ""].join("")
    )
    .match(HEX)

  if (hex !== null) {
    return {
      mode: "rgb",
      color: [
        parseInt(hex[1]!, 16),
        parseInt(hex[2]!, 16),
        parseInt(hex[3]!, 16)
      ].map(v => v.toString()),
      alpha: hex[4] ? (parseInt(hex[4], 16) / 255).toString() : undefined
    }
  }

  let match = value.match(RGB) ?? value.match(HSL)
  if (match === null) return null

  let color = [match[2], match[3], match[4]]
    .filter(Boolean)
    .map(v => v!.toString())

  if (color.length === 2 && color[0]!.startsWith("var("))
    return { mode: match[1], color: [color[0]], alpha: color[1] }

  if (!loose && color.length !== 3) return null

  if (color.length < 3 && !color.some(part => /^var\(.*?\)$/.test(part)))
    return null

  return { mode: match[1], color, alpha: match[5]?.toString?.() }
}

The variables will be in "R, G, B" format so you can use them as follows:

  fill: rgba(var(--tw-green-500), 0.8);

GeorgeCht commented Jan 9, 2024

If anyone is still interested for a plugin on this check @tailwind-plugin/expose-colors.

Author

Merott commented Jan 9, 2024

I wish we had reaction emojis in gists!

Just wanted to say I ❤️ all the ways in which this little snippet (that I'm no longer even using myself) has been adapted! 😁

sudo-vaibhav commented Jan 9, 2024

@Merott +1, glad to have been among the first people who contributed to this gist, and see what twisted new creative ways people have extended it. I come back to it every 6 months to see what has become of this gist.

Travis-Enright commented Mar 18, 2024 •

edited

Loading

@Merott Thanks! This helped a lot. I used a bit of a variation on it because I'm using a deeply-nested colors object and didn't prefer the color prefix. This did the trick for me:

function ({ addBase, theme }) {
      function extractColorVars (colorObj, colorGroup = '') {
        return Object.entries(colorObj).reduce((vars, [key, value]) => {
          const varKey = key === 'DEFAULT' ? `${colorGroup}` : `${colorGroup}-${key}`
          if (typeof value === 'string') {
            return { ...vars, [`-${varKey}`]: value }
          } else {
            return { ...vars, ...extractColorVars(value, varKey) }
          }
        }, {});
      }

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

daxdesai commented Mar 19, 2024

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>

wpinfusion commented Jun 10, 2024

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.

t-mart commented Aug 4, 2024 •

edited

Loading

: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.

Merott/tailwind-colors-as-css-variables.md

sudo-vaibhav commented Apr 12, 2021

Uh oh!

dharmapurebuddha commented Mar 13, 2022

Uh oh!

Maybach91 commented Jun 9, 2022

Uh oh!

stepanjakl commented Jul 29, 2022

Uh oh!

EdvinTr commented Nov 5, 2022

Uh oh!

superniftydev commented Dec 31, 2022

Uh oh!

emigdio821 commented Mar 1, 2023

Uh oh!

benwinding commented Apr 15, 2023

Uh oh!

jbasoo commented May 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

y-nk commented Jul 10, 2023

Uh oh!

Maybach91 commented Jul 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ianhernandez commented Aug 19, 2023

Uh oh!

y-nk commented Aug 19, 2023 via email

Uh oh!

mathieutu commented Sep 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joshdavenport commented Oct 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oskarengstrom commented Nov 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

simonhamp commented Nov 29, 2023

Uh oh!

rafaelrcamargo commented Jan 6, 2024

Uh oh!

GeorgeCht commented Jan 9, 2024

Uh oh!

Merott commented Jan 9, 2024

Uh oh!

sudo-vaibhav commented Jan 9, 2024

Uh oh!

Travis-Enright commented Mar 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

daxdesai commented Mar 19, 2024

Uh oh!

wpinfusion commented Jun 10, 2024

Uh oh!

t-mart commented Aug 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jbasoo commented May 18, 2023 •

edited

Loading

Maybach91 commented Jul 12, 2023 •

edited

Loading

mathieutu commented Sep 5, 2023 •

edited

Loading

joshdavenport commented Oct 18, 2023 •

edited

Loading

oskarengstrom commented Nov 29, 2023 •

edited

Loading

Travis-Enright commented Mar 18, 2024 •

edited

Loading

t-mart commented Aug 4, 2024 •

edited

Loading