Access Tailwind from JavaScript

How to access Tailwind

We can access the Tailwind configuration from JavaScript. This is useful if we want to use those values to create dynamic behavior in our JavaScript framework. We might have some kind of custom animation that needs to respect existing colors or spacing.

Whatever we want to do, Tailwind provides a resolveConfig method that takes the Tailwind configuration object as an argument and allows us to query the configuration—the full configuration, not only our overrides in the file:

import resolveConfig from 'tailwindcss/resolveConfig'
import myConfig from './tailwind.config.js'
const tailwindConfig = resolveConfig(myConfig)
tailwindConfig.theme.colors

The resulting object from resolveConfig merges our configuration overrides with the defaults and provides an object we can query.