create-tailwind-type v1.0.8

Create Tailwind Type

Generate TypeScript definitions for your Tailwind CSS configuration.

npx create-tailwind-type

!IMPORTANT
Requires Tailwind CSS v4.0.0 or higher.

Usage Examples

• Use custom plugins

Should change base directory to node_modules/tailwindcss for your own project.

npx create-tailwind-type -b node_modules/tailwindcss

• Generate exact variants

Will generate exact variants instead of soft variants. But slowdown typescript language server, if you use it directly. (Importing subtype will be fine.)

npx create-tailwind-type -S

• Change output filename

Will generate types in src/types/tailwind.d.ts file.

npx create-tailwind-type -f src/types/tailwind.d.ts

CLI Options

Detailed Option Descriptions

-b, --base <path>

Specifies a custom base directory for locating Tailwind CSS files.

• 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

Usage Examples

Basic Usage (with defaults)

Generate types using all the default settings:

npx create-tailwind-type

Specify a Custom Base Directory and Output Filename

Use a custom directory for Tailwind CSS files and specify a custom filename:

npx create-tailwind-type --base ./custom --filename customTypes.ts
npx create-tailwind-type -b ./custom -f customTypes.ts

Disable Documentation and Arbitrary Value Generation

Generate types without documentation comments and without arbitrary values:

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

Generate Exact Variants and Enable Optional Properties

Disable soft variants (thus generating exact variants) and produce optional properties in the types:

npx create-tailwind-type --no-soft-variants --optional-property
npx create-tailwind-type -S -o