tailwind-config

Tailwind Config

Easily get values from your resolved Tailwind CSS config.

import tailwind from 'tailwind-config'

const config = tailwind.config('./tailwind.config')
config.theme.colors.black // '#000'

Inspiration

I often like to import values from my Tailwind CSS config file to keep things consistent.

Before tailwindcss@1.0.0, you could easily just import your config file from within your project. After 1.0, your config is merged with the default config in the tailwindcss package.

This package merges your config with the default config, just like Tailwind does, so you can easily get those values.

Installation

Make sure you have either npm or yarn installed.

npm install tailwind-config
# or
yarn add tailwind-config

Usage

Get the theme object

import tailwind from 'tailwind-config'
/* or */
const tailwind = require('tailwind-config')

/* get the theme object */
const theme = tailwind.theme('./relative/path/to/your/tailwind.config')

/* get the value of a specific color */
theme.colors.red[100] // '#fff5f5'

/* use object descructuring */
const { screens, spacing } = tailwind.theme('./relative/path/to/your/tailwind.config')
screens.md // '768px'
spacing['12'] // '3rem'

Make sure to replace ./relative/path/to/your/tailwind.config with the actual relative path to your tailwind config. Alternatively you can pass an object, or pass nothing to just use the default config.

What is object destructuring?

Get the whole config

tailwind.config('./relative/path/to/your/tailwind.config')

const theme = config.theme
const plugins = config.plugins
/* ...etc */

Helper functions

Functions exist for each of the top level keys on the config object, as well as the config object itself:

tailwind.config()
tailwind.corePlugins()
tailwind.important()
tailwind.plugins()
tailwind.prefix()
tailwind.separator()
tailwind.theme()
tailwind.variants()

For a list of all the values on the config object, see the Tailwind github repo.

Import just the function you want

import { separator } from 'tailwind-config'
/* or */
const { separator } = require('tailwind-config')

separator('./relative/path/to/your/tailwind.config') // ':'

Pass the path to your config file or the config object itself

const config = tailwind.config('./relative/path/to/your/tailwind.config')
/* or */
import config from '../tailwind.config'
const resolvedConfig = tailwind.config(config)

Issues

For any bugs you may experience, please open an issue.