Skip to content
API References
style

style

Briefly

Core style generator function, with no variants.

1. Type Definition

interface StyleGeneratorStyle<StyleType extends NestedObject> {
    class: string
    style: StyleType
 
    compose: (...styles: StyleType[]) => {
        class: string
        style: StyleType
    }
}
 
declare const createTools: <StyleType extends NestedObject>() => {
    style: (style: StyleType) => StyleGeneratorStyle<StyleType>
}

2. Spec

Usage

tw.style(style)

Parameter: style

  • type: Tailwindest
  • usage: Define tailwind style

Example

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

3. Returns

class

Briefly

Returns className string

Usage

tw.style(style).class

Example

const centerClass = center.class
// flex items-center justify-center

style

Briefly

Returns input styleSheet object

Usage

tw.style(style).style

Example

const centerStyle = center.style
/*
{
    display: "flex",
    alignItems: "items-center",
    justifyContent: "justify-center",
}
*/

compose

Briefly

Compose Array of styleSheet object into single styleSheet.

Usage

tw.style(style).compose(...styleSheets)

The order of ...styleSheets is very important. If styleSheet is placed behind in ...styleSheets, it has higher priority in styling.

const paddingWillBe4 = tw
    .style({
        padding: "p-0.5",
    })
    .compose(
        {
            // first compose target
            padding: "p-1",
        },
        {
            // second compose target
            padding: "p-2",
        },
        {
            // ✅ last compose target
            padding: "p-4",
        }
    )
 
const result = paddingWillBe4.class
// p-4
⚠️

compose will change styleSheets permanently.

Parameter: ...styleSheets

  • type: Array<Tailwindest>
  • usage: compose ...styleSheets into one styleSheet object

Example

  1. Make style instances
const center = tw.style({
    display: "flex",
    alignItems: "items-center",
    justifyContent: "justify-center",
})
 
const border = tw.style({
    borderWidth: "border",
    borderColor: "border-gray-50",
    borderRadius: "rounded-sm",
})
  1. Compose all styleSheet
const box = tw
    .style({
        backgroundColor: "bg-white",
    })
    .compose(center.style, border.style)
  1. Get composed result
const boxClass = box.class
// "flex items-center justify-center border border-gray-50 rounded-sm bg-white"
 
const boxStyle = box.style
/*
{
    display: "flex",
    alignItems: "items-center",
    justifyContent: "justify-center",
    borderWidth: "border",
    borderColor: "border-gray-50",
    borderRadius: "rounded-sm",
    backgroundColor: "bg-white",
}
*/
ShortTailwindesttoggle