CreateTailwindLiteral
Briefly
Section titled “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
Section titled “1. Type definition”import type { CreateTailwindLiteral } from "tailwindest"
import type { Tailwind } from "./tailwind" // Generated file
export type TailwindLiteral = CreateTailwindLiteral<Tailwind>
2. Spec
Section titled “2. Spec”Generic Parameter: Tailwind
Section titled “Generic Parameter: Tailwind”Tailwind
(required): TheTailwind
type imported from the file generated bycreate-tailwind-type
.
Example
Section titled “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 })