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]
A CA- by education, self taught coder by passion, loves to explore new technologies and believes in learn by doing.
Latest posts by Ranjith kumar (see all)
- Flutter lookup failed in @fields error (solved) - July 14, 2023
- Free open source alternative to Notion along with AI - July 13, 2023
- Threads API for developers for programmatic access - July 12, 2023