How to access tailwind colors from javascript

user_11751692 0
Viewed 15309

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.

tailwind-css vue.js javascript
3 Answers
user_19597600 
import colors from 'tailwindcss/colors'
const green = colors.green[600] // #16a34a
user_33309810

EDIT: @tauzN has the best answer now. You can just import the colors directly without a plugin now.

@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]} />
user_14245680
Related