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

Nice one, thanks for this!

This is awesome, thanks!

Exactly what I was looking for. Cheers!

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

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

Thanks!

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

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: [
    plugin(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')
        }
      })
    })
  ],

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

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

Anyone have a typescript version of this?

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

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