tailwind-ts-gen
v1.0.0
Published
Generate TS/JS constants with Tailwind CSS class names.
Downloads
4
Maintainers
Readme
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]