twnd
A simple utility for compiling a readable list of tailwindcss classes.
The goal of twnd
is to provide an easy way to manage and compose tailwindcss classes.
// bg-gray-200 rounded text-gray-700 hover:bg-white hover:border-gray-300 focus:bg-white lg:px-4 lg:py-2 lg:hover:bg-gray-100 lg:hover:text-gray-600
Installation
// yarnyarn add twnd // npmnpm install twnd --save
Usage
import twnd from 'twnd' or var twnd =
twnd
is a function that take an infinite amount of arguments. These arguments should either be strings
or arrays
. Nested arrays are okay too!
Strings
Strings without a prefix (hover:
, focus:
, lg:
, lg:hover:
...) are outputted as they are. However, strings with a prefix will add that prefix to each of the classes in that string.
For example:
const Button = children warning border return <button = > children </button>
is the same as typing out all of these classes:
const Button = children warning border return <button ="ml-4 flex-shrink-0 bg-teal-500 text-white font-bold py-2 px-4 rounded hover:bg-teal-600 focus:outline-none focus:shadow-outline lg:ml-0 lg:py-0 lg:px-0 lg:hover:uppercase lg:hover:text-teal-300"> children </button>
Arrays
In this example we will use React to build a Button
component that accepts rounded
and border
props. As you can see, you can easily apply specific classes based on if the prop is truthy or not.
const Button = children rounded border return <button = > children </button>
Composing Styles
You can also use twnd
to compose styles.
const Button = children buttonStyle = 'default' rounded border const baseStyles = const buttonStyles = default: warning: return <button =>children</button>
Output
// <Button rounded border>Login</Button> <button ="appearance-none py-2 px-4 leading-tight border lg:text-lg lg:py-4 lg:px-6 rounded bg-gray-200 text-gray-700 hover:bg-gray-400 hover:text-gray-900 border-gray-500 hover:border-gray-700"> Login</button>
// <Button buttonStyle="warning" border>Login</Button> <button ="appearance-none py-2 px-4 leading-tight border lg:text-lg lg:py-4 lg:px-6 bg-red-200 text-red-700 hover:bg-red-400 hover:text-red-900 border-red-500 hover:border-red-900"> Login</button>
👋