Generate TS/JS constants with Tailwind CSS class names for better IntelliSense and autocompletion/autosuggestion.
MIT License
tailwind-ts-gen
Generate TS/JS constants with Tailwind CSS class names for better IntelliSense and autocompletion/autosuggestion.
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:
.ts
and .js
extensions for the generate file.tw2ts --out output.ts input1.css input2.css
.--out
or for input files, it will be resolved based on current working directory.prettier
installed the generated code will be prettified. You can use --prettier-config
to specify custom Prettier configuration, otherwise it will be inferred.--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]