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
    useArbitraryNestGroups?: 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.
• useArbitraryNestGroups (optional, boolean): If set to true, allows Tailwind arbitrary and dynamic variant object keys such as [&.is-dragging], [@supports(display:grid)], data-[size=large], aria-invalid, data-state, group-aria-invalid, peer-data-state, group-[.is-published], peer-[:nth-of-type(3)_&], min-[712px], @[618px], and custom dynamic variants such as placement-[top-start]. Defaults to false.

Known generated nest groups keep exact prefixed value checking. Values inside arbitrary or dynamic nest group keys are intentionally typed as class strings instead of exact ${key}:${literal} unions to avoid TypeScript TS2590 on large Tailwind outputs.

Example

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

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

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

// 2. Create the tools
export const tw = createTools<{
    tailwindest: Tailwindest
    tailwindLiteral: TailwindLiteral
    useArbitrary: true
    useTypedClassLiteral: 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",
        "[&.is-dragging]": {
            cursor: "hover:[&.is-dragging]:cursor-grabbing",
        },
    },
    dark: {
        color: "dark:text-white",
    },
    "[&_p]": {
        margin: "[&_p]:mt-4",
    },
    "aria-invalid": {
        borderColor: "aria-invalid:border-red-500",
    },
}