Skip to content
Tailwind Style Guide - Generate your own personalized style guide for your tailwind configs.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore gitignore .DS_Store files 📁 Sep 29, 2018 add correct command in readme 📖 Sep 29, 2018
package-lock.json First commit :-) Apr 8, 2018
package.json First commit :-) Apr 8, 2018
tailwind.config.js First commit :-) Apr 8, 2018

Tailwind Style Guide Generator



$ git clone


In the cloned tsg folder, run:

$ node index build <relative or absolute path to config> <generated tailwind css path>


$ node index build tailwind.config.js tailwind-generated.css

npm installation



  • Shows: Background Colors, Border Colors/Radius/Widths, Font Weights, Heights, Leadings, Margins, Opacities, Widths, Paddings, Shadows, Text Colors/Sizes, Trackings.
  • Demo panel, for easy testing of utility classes.
  • Multiple config support - useful if you have seperate tailwind configs for frontend/backend.

Optional Usage Parameters

--output <path> - specify a custom path to output the generated docs (by default it will be tsg)

--name=<filename e.g. "admin"> - specify a custom name for the generated config (by default it will be site), this is useful for the multi config support.

Upcoming Features

  • Implement remaining config options: fonts, min widths, min height, max width, max height, negative margins, zIndex, svgFill, svgStroke
  • Support for prefixed configs and different seperator
  • Improved states support (hover/focus etc)
  • Simplify build options so don't need to pass generated tailwind css path
  • Custom/general utility classes support
  • Components support
  • Footprint charts - per module and overall filesize.
  • Webpack plugin which can automatically trigger generation of style guide
  • Ongoing improvements to general style / UI of each component


Although this library is under heavy development, contributions are welcome via a PR. If there are any large PRs being undertaken, it's best to create an issue first to discuss implementation details and see if the PR will likely be accepted.


This generator was heavily inspired by Sam Selikoff's ember-cli-tailwind. Mad props go out to him :-)

You can’t perform that action at this time.