tsg - GitLite

KO | EN

gitlite — search

#python #react #typescript #go #macos #nodejs #windows #awesome #cli #vue #security #ios #openai #open-source

tsg

(★ 78)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- - .gitkeep
- index.html
- site.js
- - App.vue
  - BackgroundColors.vue
  - BorderColors.vue
  - BorderRadius.vue
  - BorderWidths.vue
  - ConfigSwitcher.vue
  - DemoPanel.vue
  - FontWeights.vue
  - Heights.vue
  - Leadings.vue
  - Margins.vue
  - ModulesEnabled.vue
  - Opacities.vue
  - OtherWidths.vue
  - Paddings.vue
  - PercentageWidths.vue
  - Shadows.vue
  - TextColors.vue
  - TextSizes.vue
  - Trackings.vue
- index.html
- main.js
- styles.css
- tailwind.css
.gitignore
index.js
package-lock.json
package.json
README.md
tailwind.config.js
tsg-screenshot.png
webpack.config.js

// 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 :-)