create-tailwind-type

Generates TypeScript definitions from your tailwind.css file, which allows you to use all of your project's Tailwind CSS classes and variants with full type-safety.

Install

Run the create-tailwind-type directly:

npx create-tailwind-type

Type Generation Result

If you are using Tailwind CSS >= 4.0, the generator resolves your installed Tailwind package and active tailwind.css automatically.

If your local Tailwind version is older than v4, the generator falls back to the internal Tailwind v4 engine for type generation.

Generated Files

By default, create-tailwind-type writes two files:

tailwind.ts
tailwind_literal.ts

tailwind.ts exports Tailwind and TailwindNestGroups. Use these with CreateTailwindest for typed style objects and nested variant keys.
tailwind_literal.ts exports TailwindLiteral. Use this with createTools for typed class string arguments such as tw.join(...), tw.def(...), and tw.style(...).class(...).

TailwindLiteral is generated as a precomputed static union so your app does not need to evaluate Tailwind[keyof Tailwind] during type-checking. Arbitrary strings are still controlled by useArbitrary: true in CreateTailwindest and createTools. Arbitrary and dynamic variant object keys, such as [&_p], data-[size=large], aria-invalid, or group-aria-invalid, are controlled by useArbitraryNestGroups: true in CreateTailwindest. Generated arbitrary value template types are disabled by default for TypeScript performance. Slash modifier variant template types are also disabled by default. Enable these generated templates only when you specifically need patterns such as bg-[${string}] or ring-${string}/${number}.

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
    useArbitrary: true
    useArbitraryNestGroups: true
}>

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

If you change the main output filename, the literal filename follows it. For example, -f src/types/tailwind.d.ts also creates src/types/tailwind_literal.d.ts.

CLI Options

Option (Short)	Option (Long)	Description	Default Value
`-b`	`--base <path>`	Specifies the base directory for @tailwindcss/node package. If omitted, the tool automatically resolves to the installed `@tailwindcss` package directory.	None (auto-resolved)
`-f`	`--filename <filename>`	Sets the output filename for the generated `Tailwind`/`TailwindNestGroups` types. The `TailwindLiteral` file is emitted next to it with `_literal` suffix.	`tailwind.ts`
`-d`	`--docs`	Enables documentation comments in the generated types. Use the inverse flag to disable them.	`true`
`-D`	`--no-docs`	Disables documentation comments in the generated types.	N/A
`-a`	`--arbitrary-value`	Enables generated arbitrary value template types such as `bg-[${string}]`. This can slow TypeScript on large projects.	`false`
`-A`	`--no-arbitrary-value`	Explicitly disables arbitrary value template type generation.	N/A
N/A	`--enable-variants`	Enables generated slash modifier variant template types such as `ring-${string}/${number}`. This can slow TypeScript on large projects.	`false`
`-N`	`--disable-variants`	Explicitly disables slash modifier variant template type generation. This is already the default behavior.	N/A
`-s`	`--soft-variants`	Uses soft slash modifier templates when `--enable-variants` is set.	`true`
`-S`	`--no-soft-variants`	Uses exact slash modifier templates when `--enable-variants` is set.	N/A
`-k`	`--string-kind-variants-only`	Limits the generated types to only string kind variants.	`false`
`-o`	`--optional-property`	Generates optional properties in the output types, which can be useful for partial configurations.	`false`
N/A	`--version`	Displays the current CLI version.	N/A
N/A	`--help`	Displays help and usage information for the CLI tool.	N/A

Detailed Option Descriptions

`-b, --base <path>`

Specifies a custom base directory for locating @tailwindcss/node.

Default: Automatically resolves to the installed @tailwindcss package directory.
Example:
```
npx create-tailwind-type -b ./custom
```

`-f, --filename <filename>`

Determines the output filename for the generated Tailwind and TailwindNestGroups TypeScript types. A sibling TailwindLiteral file is generated automatically.

Default: tailwind.ts
Example:
```
npx create-tailwind-type -f customTypes.ts
```
This also writes customTypes_literal.ts.

`-d, --docs` / `--no-docs`

Controls whether documentation comments are included in the generated types.

Default: Enabled (true)

Examples:

To enable (or use the default):
```
npx create-tailwind-type --docs
```
To disable:
```
npx create-tailwind-type --no-docs
```

`-a, --arbitrary-value` / `-A, --no-arbitrary-value`

Toggles support for arbitrary value template generation in the output types.

Default: Disabled (false)

Examples:

To enable generated arbitrary value template types:

npx create-tailwind-type --arbitrary-value
npx create-tailwind-type -a

To keep them disabled explicitly:

npx create-tailwind-type --no-arbitrary-value
npx create-tailwind-type -A

`-s, --soft-variants` / `-S, --no-soft-variants`

Controls slash modifier variant template shape when --enable-variants is set. Soft mode generates broader templates such as ring-${string}/${number}. Exact mode generates templates from known class groups instead.

Default: Soft mode is enabled (true), but slash modifier variant generation is disabled unless --enable-variants is set.

Examples:

To enable soft slash modifier templates:

npx create-tailwind-type --enable-variants --soft-variants
npx create-tailwind-type --enable-variants -s

To enable exact slash modifier templates:

npx create-tailwind-type --enable-variants --no-soft-variants
npx create-tailwind-type --enable-variants -S

`-k, --string-kind-variants-only`

Limits the generated types to only string kind variants, which might be preferred in certain setups.

Default: false

Example:

npx create-tailwind-type --string-kind-variants-only
npx create-tailwind-type -k

`-o, --optional-property`

Instructs the CLI to generate optional properties within the TypeScript definitions.

Default: false

Example:

npx create-tailwind-type --optional-property
npx create-tailwind-type -o

`--enable-variants` / `-N, --disable-variants`

Toggles generated slash modifier variant template types such as ring-${string}/${number}.

Default: Slash modifier variant generation is disabled.

Examples:

To enable slash modifier variant templates:

npx create-tailwind-type --enable-variants

To keep them disabled explicitly:

npx create-tailwind-type --disable-variants
npx create-tailwind-type -N

create-tailwind-type

On this page