CreateTailwindLiteral

Briefly

CreateTailwindLiteral is a utility type that extracts Tailwind CSS class names from the main Tailwind type into a single string literal union.

Prefer the TailwindLiteral type generated by create-tailwind-type in tailwind_literal.ts. It is precomputed and avoids the expensive Tailwind[keyof Tailwind] calculation in application type-checking. CreateTailwindLiteral remains available as a compatibility fallback.

1. Recommended usage

import type { TailwindLiteral } from "./tailwind_literal"

2. Compatibility fallback

Use this only when you cannot use the generated tailwind_literal.ts file:

import type { CreateTailwindLiteral } from "tailwindest"
import type { Tailwind } from "./tailwind" // Generated file

export type TailwindLiteralFallback = CreateTailwindLiteral<Tailwind>

3. Spec

Generic Parameter: `Tailwind`

Tailwind (required): The Tailwind type imported from the file generated by create-tailwind-type.

Example

import { createTools, type CreateTailwindest } from "tailwindest"
import type { Tailwind, TailwindNestGroups } from "./tailwind"
import type { TailwindLiteral } from "./tailwind_literal"

export type Tailwindest = CreateTailwindest<{
    tailwind: Tailwind
    tailwindNestGroups: TailwindNestGroups
}>

export const tw = createTools<{
    tailwindest: Tailwindest
    tailwindLiteral: TailwindLiteral
    useTypedClassLiteral: true
}>()

Now TailwindLiteral can be used where a single, typed class name is expected.

const myClass: TailwindLiteral = "bg-red-500" // ✅ Valid
const myClasses: TailwindLiteral[] = ["flex", "justify-center"] // ✅ Valid

// `tw.join` and `tw.def` are typed with this literal
tw.join("flex", "items-center", { "bg-blue-100": true })