Tailwind Config

> Easily get values from your resolved Tailwind CSS config.

``js
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

$3

`js
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?

$3


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

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


$3

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

`js
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.

$3


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

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

$3


`js
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.