We might need to access tailwind configuration in javascript sometimes. Let’s say we want to use one of our primary colors in a place where CSS classes wouldn’t work, Then we need to reference the Tailwind color from Javascript. Here’s how to do it.
import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'
const {theme} = resolveConfig(tailwindConfig)
const color = theme.colors.blue[500]
Practical usage
The above snippet works for referencing any value from Tailwind config but it doesn’t make sense to write all those lines of code in every file that we want to use it in.
We can solve this by writing the above snippet only once and exporting it for usage everywhere.
import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'
const {theme} = resolveConfig(tailwindConfig)
export default theme;
Then import it wherever needed
import theme from './theme'; //Update the path as needed
const color = theme.colors.blue[500]