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.

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 types.	`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`	Allows the generation of arbitrary values in the output types. Use the inverse flag to disable this feature.	`true`
`-A`	`--no-arbitrary-value`	Disables arbitrary value generation.	N/A
`-s`	`--soft-variants`	Enables soft variant generation. When disabled (using the inverse flag), the tool will generate exact variants instead.	`true`
`-S`	`--no-soft-variants`	Disables soft variant generation (resulting in exact variant generation).	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`	`--disable-variants`	Disable variant generation and types, can be increase performance.	`false`
`-v`	`--arbitrary-variant`	Enables arbitrary variant keys such as `data-[state=open]` and `[&_svg]`.	`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 TypeScript types.

Default: tailwind.ts

Example:

npx create-tailwind-type -f customTypes.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 generation in the output types.

Default: Enabled (true)

Examples:

To enable (or use the default):

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

To disable:

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

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

Manages soft variant generation. Disabling this option will instead produce exact variant types.

Default: Enabled (true)

Examples:

To enable soft variants (default behavior):

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

To disable soft variants (and generate exact variants):

npx create-tailwind-type --no-soft-variants
npx create-tailwind-type -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

`-N, --disable-variants`

Instructs the CLI to disable variant generation.

Default: false

Example:

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

`-v, --arbitrary-variant`

Enables arbitrary variant keys in the generated nested variant types.

Default: false

Example:

npx create-tailwind-type --arbitrary-variant
npx create-tailwind-type -v

create-tailwind-type

On this page