https://github.com/rosswaycaster/twnd
A simple utility for compiling a readable list of tailwindcss classes
https://github.com/rosswaycaster/twnd
Last synced: 4 months ago
JSON representation
A simple utility for compiling a readable list of tailwindcss classes
- Host: GitHub
- URL: https://github.com/rosswaycaster/twnd
- Owner: rosswaycaster
- License: mit
- Created: 2020-04-26T02:44:26.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-01T04:47:03.000Z (about 2 years ago)
- Last Synced: 2025-02-07T11:18:05.908Z (4 months ago)
- Language: JavaScript
- Size: 1.58 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# twnd
[](https://www.npmjs.com/package/twnd) [](https://www.npmjs.com/package/twnd) [](https://github.com/rosswaycaster/twnd/blob/master/LICENSE)
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.
```jsx
twnd(
'bg-gray-200 rounded text-gray-700',
'hover: bg-white border-gray-300',
'focus: bg-white',
'lg: px-4 py-2',
'lg:hover: bg-gray-100 text-gray-600'
)
// 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
```jsx
// yarn
yarn add twnd
// npm
npm install twnd --save
```
## Usage
```jsx
import twnd from 'twnd'
or
var twnd = require('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:
```jsx
const Button = ({ children, warning, border }) => {
return (
{children}
)
}
```
is the same as typing out all of these classes:
```jsx
const Button = ({ children, warning, border }) => {
return (
{children}
)
}
```
#### 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.
```jsx
const Button = ({ children, rounded, border }) => {
return (
{children}
)
}
```
#### Composing Styles
You can also use `twnd` to compose styles.
```jsx
const Button = ({ children, buttonStyle = 'default', rounded, border }) => {
const baseStyles = twnd(
'appearance-none py-2 px-4 leading-tight border',
'lg: text-lg py-4 px-6',
rounded && 'rounded',
!border && 'border-transparent'
)
const buttonStyles = {
default: twnd(
baseStyles,
'bg-gray-200 text-gray-700',
'hover: bg-gray-400 text-gray-900',
border && ['border-gray-500', 'hover: border-gray-700']
),
warning: twnd(
baseStyles,
'bg-red-200 text-red-700',
'hover: bg-red-400 text-red-900',
border && ['border-red-500', 'hover: border-red-900']
),
}
return {children}
}
```
##### Output
```jsx
// Login
Login
```
```jsx
// Login
Login
```
---
👋 