Basic styling

Overview

• Define reusable style using style function
• Define inline styles using def function
• Define conditional styles using toggle, rotary and `variants functions

Example 1: Define style tokens

Extract and define common styles tokens in your components to maximize reusability.

const layout = tw.style({
    // ... Core layout
})

const border = tw.style({
    // ... Border styles
})

Export utility styles

export const token = {
    layout,
    border,
} as const

Example 2: Compose(Merge) styles

tw.style returns a styler instance with three main methods:

1. class(): returns className string
2. style(): returns styleSheet object
3. compose(...styles): returns a new styler instance with composed styles.

The compose function allows you to overwrite styles without the need for a className merging library like tailwind-merge.

Usage 1 - merge styleSheets

Tip

The last style object passed to compose has the highest priority.

const basic = tw
    .style({
        alignItems: "items-start",
    })
    .compose(
        {
            alignItems: "items-end",
        },
        {
            alignItems: "items-stretch",
        }
    )

// ✨ items-stretch

Usage 2 - separate util styles and compose it

Define design token

const container = tw.style({
    // ... Container styles
})
export const token = {
    container,
} as const

Compose utility styles where you need.

import { token } from "@/token"

const box = tw
    .style({
        display: "flex",
        alignItems: "items-center",
        justifyContent: "justify-center",
    })
    .compose(token.container.style())
    .class()

const Box = ({ children }) => <div className={box}>{children}</div>