What's the easiest way to access colours

[hmajid2301]

Within my own JS code is there an interface Tailwind exposes to allow us to access a given colour's, such as blue-500, value.

I would like to be able to access the tailwind configuration combined with the user configuration within JS is this possible. ? Thanks

[estevanmaito]

Following the docs, it would look something like this: https://tailwindcss.com/docs/configuration/#referencing-in-javascript

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const {theme} = resolveConfig(tailwindConfig)

theme.colors.blue[500]

[codinginflow]

How can I make this work if the colors reference CSS variables?
E.g. theme.colors.primary.foreground prints hsl(var(--primary-foreground)).

[wongjn]

Yes, that seems correct.

[codinginflow]

I mean, how can I get the actually hex value in this case?

[wongjn]

You'd need to resolve the value of var(--primary-foreground). This could differ depending on the element you resolve from and any relevant CSS.

[1mehdifaraji]

I did it very easily by importing colors from tailwindcss/colors

import colors from "tailwindcss/colors";

colors.emerald["100"]