Skip to content

Write

Typesafe

Tailwindcss

powered by typescript

Documentation

Features

Combine two worlds

Write tailwindcss and CSS-in-JS like syntax at the same time. Get the best of two worlds.

const button = tw.style({
    display: "flex",
    alignItems: "items-center",
    justifyContent: "justify-center",
 
    padding: "p-2",
    borderRadius: "rounded-md",
 
    color: "text-white",
    fontSize: "text-base",
    fontWeight: "font-medium",
 
    backgroundColor: "bg-blue-700",
})
 
const InlineAndCSSInJs = () => {
    return (
        <div className="flex flex-row gap-2 items-center justify-between">
            <button className={button.class}>
                <p className="text-yellow-300 text-2xl">Button 1</p>
            </button>
 
            <button className={button.class}>Button 2</button>
        </div>
    )
}

Great DX


Get the power of type-safety without installation. Hover the highlighted blocks.

tw.ts
import { createTools, type Tailwindest } from "tailwindest"
 
type MyTailwind = Tailwindest<{
    screens: "my"
    color: "primary" | "secondary"
}>
 
export const tw = createTools<MyTailwind>()
button.ts
import { tw } from "~/tw"
 
const button = tw.variants({
    base: {
        display: "flex",
    },
    variants: {
        shape: {
            outline: {
                "@dark": {
                    backgroundColor: "re",
                },
            },
            solid: {
                "@dark": {
                    ":hover": {
                        borderColor: "am1",
                    },
                },
            },
            ghost: {
                color: "se",
                "@my": {
                    color: "pr",
                },
            },
        },
        size: {
            sm: {},
            md: {},
            lg: {},
        },
        light: {
            true: {},
            false: {},
        },
    },
})
 
const outlineWithSmLight = button.class({
    shape: "outline",
    size: "sm",
    light: true,
})
 
const solidWithMdDarkStyle = button.style({
    shape: "solid",
    size: "md",
    light: false,
})