Setup

1. Install packages

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

npm i tailwindest

bun add tailwindest

pnpm add tailwindest

yarn add tailwindest

2. Generate Tailwind types

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

You can customize the output path and other options. Check out the create-tailwind-type documentation for more details.

3. Create styling tools

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

import { twMerge } from "tailwind-merge"

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

4. Exclude generated types from your `tailwind.css`

Make sure to exclude the generated tailwind.ts from your tailwind.css file to prevent all-css from being included in the generated CSS.

@import "tailwindcss";
/* IMPORTANT */
/* Specify not-include generated type definitions */
@source not "tailwind.ts";

/* Your Tailwind CSS styles here */

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