Tailwind Config

Introduction

Tailwind Config is a lightweight package to make it easier for users of the Tailwind CSS library to get values from their resolved config file. If that means absolute nothing to you, I’d say head back to the previous page.

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 destructuring */
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.