Skip to content

Write

Typesafe

Tailwindcss

powered by typescript

Documentation

Features

Type-safety

Type-safety and autocompletion magics, will give you the best DX and solid product.

Easy to use

It's as easy and as quickly to get started as if you were writing CSS in JS.

Variants based

Use variants based modern conditional styling approaches such as stitches and cva.

Customizable

Define custom styles defined in tailwind.config.js via Tailwindest type.

Tiny, 768B

Don't have to worry about bundle size. It is 768B tiny library.

Performant

All operation is optimized and styles are cached by default. It is fast.

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,
})