How to access tailwind colors from javascript

Question

I am using ApexCharts and would like to use my tailwind colors (red-500, etc) to style my chart. I can't use css classes (so can't use theme() in a post-css context). I also can't reference the default config because I have extended it already. I could import my new config's colors, however this does not seem like a good way to do it (besides, some css classes could be generated with utilities, and would not be accessible this way). I have also theorized that I could add a hidden html element to my dom, get the css property from it and then remove, but this also seems like a bad approach.

Thanks CoffeeKing68

Answer 1

Check the official docs: https://tailwindcss.com/docs/configuration#referencing-in-java-script

You can use the built-in helper resolveConfig to get your config.

Answer 2

@mrp's answer is great if you want to go the official route. However, I didn't want to go through the trouble of adding another babel plugin.

Instead, you can just reference their colors at https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js

Then create an export in constants file i.e.

export default {
  inherit: 'inherit',
  current: 'currentColor',
  transparent: 'transparent',
  black: '#000',
  white: '#fff',
  slate: {
    50: '#f8fafc',
    100: '#f1f5f9',
    200: '#e2e8f0',
    300: '#cbd5e1',
    400: '#94a3b8',
    500: '#64748b',
    600: '#475569',
    700: '#334155',
    800: '#1e293b',
    900: '#0f172a',
  },
  ...
}

and then you can just do e.g.

import COLORS from 'constants/colors'

<Icon color={COLORS.emerald[700]} />

Answer 3

You could put tailwind colors into css variables, that are accessible from JavaScript.