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-configUsage
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.
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.