Extending createCustom with custom types

The Problem

Currently, it’s not easy (or possible?) to extend the default tailwind types with other types.

import { createCustom } from 'tailwindcss-classnames';

createCustom<CustomClasses>();

type CustomClasses = 'bg-smoke-100';

Produces an error:

Type '"bg-smoke-100"' does not satisfy the constraint 'TClasses'.

The Solution

There is probably a technical solution to this, but I couldn’t find it immediately and wanted advice before I send a PR to the repo.

It also struck me what a pain it would be to have to add custom types: to add a color, you’d have to specify:

bg-<color>-100
...etc
text-<color>-100
...etc
placeholder-<color>-100
...etc

And other variations I’m not considering.

Would it be useful to have a CLI tool which could target your tailwind config and generate these types?

[muhammadsammy]

The CLI is now available for generating classes with colors and breakpoints. tailwindcss-classnames@next

[fabiokandrade]

Great idea! Something like https://github.com/esamattis/postcss-ts-classnames