tailwind-ts-gen

Generate TS/JS constants with Tailwind CSS class names for better IntelliSense and autocompletion/autosuggestion.

Installation & usage

tailwind-ts-gen only support Tailwind CSS used with PostCSS.

Install the package:

yarn add postcss tailwindcss tailwind-ts-gen

Then:

yarn tw2ts --out tailwind.ts tailwind.css

It will generate a tailwind.ts file based on --out option with all of the classes from tailwind.css file.

Assuming your tailwind.css file looks like this:

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Don't forget to configure PostCSS with postcss-import plugin. Otherwise tailwind-ts-gen won't be able to find any Tailwind CSS classes.

The generated file will look similarity to:

/**
 * @file Tailwind CSS class names exported as const variables.
 *       Auto-generated file. Do not modify.
 * @author tailwind-ts-gen
 */

/** Constant for `container` */
export const container = 'container';
// ... etc
/** Constant for `bg-gray-100` */
export const bg_gray_100 = 'bg-gray-100';
/** Constant for `bg-gray-200` */
export const bg_gray_200 = 'bg-gray-200';
/** Constant for `bg-gray-300` */
export const bg_gray_300 = 'bg-gray-300';
// ... etc
/** Constant for `hover:font-bold` */
export const hover_font_bold = 'hover:font-bold';
// ... etc

Additionally:

• You can use both .ts and .js extensions for the generate file.
• You can specify multiple input files eg: tw2ts --out output.ts input1.css input2.css.
• You can use SASS, SCSS, LESS and other extensions for input files as long as PostCSS is configured to understand them.
• If you pass relative file for --out or for input files, it will be resolved based on current working directory.
• If you have prettier installed the generated code will be prettified. You can use --prettier-config to specify custom Prettier configuration, otherwise it will be inferred.
• You can specify path to custom PostCSS config with --postcss-config.

tw2ts -h

tw2ts <input...>

Generate file with Tailwind CSS class names. If Prettier config file and
Prettier package is available, it will be used to format the generated file.

You can pass multiple input files - class names from all of them, will be
extracted to a single file specified by -o, --out option.

Positionals:
  input  CSS/SASS/LESS file with Tailwind CSS imports.                  [string]

Options:
  --version          Show version number                               [boolean]
  --out, -o          Path to an output file with generated code.
                                                             [string] [required]
  --postcss-config   Path to PostCSS config file.                       [string]
  --prettier-config  Path to Prettier config file.                      [string]
  --help             Show help                                         [boolean]