Skip to content
Recipes
Basic styling

Basic styling

Define tailwind style using style function

Define styles

Define reusable, readable and maintainable tailwind style.

Before

const card =
    "flex flex-col items-start justify-between gap-2 p-2 hover:translate-y-[1.5px] hover:border-transparent hover:opacity-100 active:border-amber-400/10 active:opacity-75 transition-all ease-in duration-75 select-none sm:flex-row sm:items-center sm:p-2.5 bg-amber-600/10 rounded border-amber-400/20 border"

After

const card = tw.style({
    display: "flex",
    flexDirection: "flex-col",
    alignItems: "items-start",
    justifyContent: "justify-between",
    gap: "gap-2",
 
    padding: "p-2",
 
    backgroundColor: "bg-amber-600/10",
 
    borderRadius: "rounded",
    borderColor: "border-amber-400/20",
    borderWidth: "border",
 
    transition: "transition-all ease-in",
    transitionDuration: "duration-75",
    userSelect: "select-none",
 
    ":hover": {
        transformTranslateY: "hover:translate-y-[1.5px]",
        borderColor: "hover:border-transparent",
        opacity: "hover:opacity-100",
    },
    ":active": {
        borderColor: "active:border-amber-400/10",
        opacity: "active:opacity-75",
    },
    "@sm": {
        flexDirection: "sm:flex-row",
        alignItems: "sm:items-center",
        padding: "sm:p-2.5",
    },
})

Group break conditions

Group break conditions.

const nest = tw.style({
    "@dark": {
        color: "dark:text-gray-100",
        borderColor: "dark:border-gray-800",
        backgroundColor: "dark:bg-gray-900",
        ":hover": {
            backgroundColor: "dark:hover:bg-gray-800",
            opacity: "dark:hover:opacity-90",
        },
        ":active": {
            opacity: "dark:active:opacity-70",
        },
    },
})
💡

Define custom break conditions

type TailwindCustom = Tailwindest<{
    screens: "my1" | "my2" | "my3"
}>
 
const customBreakCondition: TailwindCustom = {
    my1: {
        my2: {
            my3: {
                backgroundColor: "my1:my2:my3:bg-red-500"
            }
        }
    }
}

Define utility styles

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

const layout = tw.style({
    width: "w-full",
    minHeight: "min-h-screen",
    height: "h-max",
    "@md": {
        width: "md:w-3/4",
    },
    "@lg": {
        width: "lg:w-4/6",
    },
    "@xl": {
        width: "xl:w-3/5",
    },
    "@2xl": {
        width: "2xl:w-1/2",
    },
})
 
const border = tw.style({
    borderWidth: "border",
    "@dark": {
        borderColor: "dark:border-gray-500",
        ":hover": {
            borderColor: "dark:hover:border-gray-100",
        },
    },
    ":hover": {
        borderColor: "hover:border-black",
    },
})

Export utility styles

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

Compose styles

tw.style returns three functions.

  1. class: returns className string
  2. style: returns styleSheet object = input argument
  3. compose: compose styleSheets into main styleSheet

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

Usage - merge styleSheets

The furthest back styleSheet has the highest priority.

const basic = tw
    .style({
        display: "flex",
        flexDirection: "flex-col",
        alignItems: "items-start",
        justifyContent: "justify-between",
    })
    .compose(
        {
            alignItems: "items-end",
        },
        {
            alignItems: "items-stretch",
        }
    )
 
// ✨ flex flex-col items-stretch justify-between

Usage - separate util styles and compose it

Define utility style

const container = tw.style({
    borderColor: "border-black",
    backgroundColor: "bg-white",
    "@dark": {
        borderColor: "dark:border-neutral-50",
        backgroundColor: "dark:bg-neutral-900",
    },
    borderRadius: "rounded",
 
    ":hover": {
        opacity: "hover:opacity-90",
    },
    ":active": {
        opacity: "active:opacity-75",
    },
})

Compose utility styles where you need.

import { container } from "@/utils"
 
const box = tw
    .style({
        display: "flex",
        alignItems: "items-center",
        justifyContent: "justify-center",
    })
    .compose(container.style)
 
// ✨ flex items-center justify-center border-black bg-white dark:border-neutral-50 dark:bg-neutral-900 rounded hover:opacity-90 active:opacity-75
const Box = ({ children }) => <div className={box.class}>{children}</div>
SetupConditional styling