CreateTailwindLiteral

Briefly

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

This is useful when you need a type for a single class name, or for the classList array in tw.def() and tw.join().

1. Type definition

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

export type TailwindLiteral = CreateTailwindLiteral<Tailwind>

2. Spec

Generic Parameter: Tailwind

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

Example

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

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

// Create the literal type
export type TailwindLiteral = CreateTailwindLiteral<Tailwind>

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

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