CreateTailwindest

Briefly

CreateTailwindest is a utility type that generates the main style type for tailwindest. It uses the types generated by create-tailwind-type to build a deeply nested object type that represents all possible CSS-in-JS style objects you can write.

1. Type definition

import type { CreateTailwindest } from "tailwindest"
import type { Tailwind, TailwindNestGroups } from "./tailwind" // Generated file

export type Tailwindest = CreateTailwindest<{
    tailwind: Tailwind
    tailwindNestGroups: TailwindNestGroups
    groupPrefix?: string
    useArbitrary?: boolean
}>

2. Spec

Generic Parameter: Config

CreateTailwindest takes a single generic Config object with the following properties:

• tailwind (required): The Tailwind type imported from the file generated by create-tailwind-type. This contains all your project’s tailwind classes as a mapped type.
• tailwindNestGroups (required): The TailwindNestGroups type imported from the generated file. This is a string literal union of all possible variant names (e.g., "hover", "focus", "md", "dark").
• groupPrefix (optional): A string literal to prefix variant groups. For example, if you set it to "$" you would write "$hover": { ... }.
• useArbitrary (optional, boolean): If set to true, allows any string for class values, enabling arbitrary values. Defaults to false.

Example

Here is a typical setup in a tw.ts file:

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

// 1. Create the main Tailwindest style type
export type Tailwindest = CreateTailwindest<{
    tailwind: Tailwind
    tailwindNestGroups: TailwindNestGroups
    useArbitrary: true
}>

// 2. (Optional) Create a literal type for all tailwind classes
export type TailwindLiteral = CreateTailwindLiteral<Tailwind>

// 3. Create the tools
export const tw = createTools<{
    tailwindest: Tailwindest
    tailwindLiteral: TailwindLiteral
    useArbitrary: true
    useTypedLiteral: true
}>()

The resulting Tailwindest type allows you to write styles like this, with full type-safety and autocompletion:

const myStyle: Tailwindest = {
    display: "flex",
    padding: ["p-2", "md:p-4"],
    ":hover": {
        backgroundColor: "hover:bg-blue-500",
    },
    "@dark": {
        color: "dark:text-white",
    },
}