Skip to content
GitHub

Setup

Install tailwindest for core functionalities, and create-tailwind-type to generate types from your tailwind.config.js.

bash npm i tailwindest

Run the following command to generate a tailwind.ts file in your project root. This file will contain all the necessary types based on your tailwind.css.

npx create-tailwind-type --base node_modules/tailwindcss --no-arbitrary-value --disable-variants

Create a tw.ts (or tw.js) file to define your tailwindest tools.

import {
    createTools,
    type CreateTailwindest,
    type CreateTailwindLiteral,
} from "tailwindest"
import type { Tailwind, TailwindNestGroups } from "./tailwind" // Adjust path if needed

// Create the main Tailwindest type
export type Tailwindest = CreateTailwindest<{
    tailwind: Tailwind
    tailwindNestGroups: TailwindNestGroups

    // Optional: customize prefix for screen/variant groups

    // groupPrefix: "$" <-- prefix for group variants
    // useArbitrary: true <-- enable arbitrary values, type-hinting is available for this option
}>

// Create a literal type for all possible Tailwind classes
export type TailwindLiteral = CreateTailwindLiteral<Tailwind>

// Create the tools
export const tw = createTools<{
    tailwindest: Tailwindest
    tailwindLiteral: TailwindLiteral
    // useArbitrary: true
    // useTypedLiteral: true <-- enables typed literal classes at tw.style().class(...typed literals)
}>({
    // Optional: if you use tailwind-merge
    merger: twMerge, // <-- tailwind-merge as classname merger
})


Now you’re all set! You can import tw from tw.ts and start creating typed styles.