tsg

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

★ 78 Open GitHub ↗

Tailwind Style Guide - Generate your own personalized style guide for your tailwind configs.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Tailwind Style Guide Generator
---

![Imgur](https://i.imgur.com/5SnyGCS.gif)

## Installation

```bash
$ git clone https://github.com/garygreen/tsg.git
```

## Usage

In the cloned tsg folder, run:

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

Example:

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

## npm installation

WIP

## Features

* 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

## Contributing

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.

## Alternatives

This generator was heavily inspired by Sam Selikoff's [ember-cli-tailwind](https://github.com/embermap/ember-cli-tailwind). Mad props go out to him :-)

tsg

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README