Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anttiromppanen/tw-helper
Command line Tailwind CSS visualization tool.
https://github.com/anttiromppanen/tw-helper
List: tw-helper
awesome awesome-list cli cli-app css data-visualization javascript nodejs tailwind tailwindcss typescript
Last synced: 15 days ago
JSON representation
Command line Tailwind CSS visualization tool.
- Host: GitHub
- URL: https://github.com/anttiromppanen/tw-helper
- Owner: anttiromppanen
- License: mit
- Created: 2024-10-10T03:58:36.000Z (28 days ago)
- Default Branch: main
- Last Pushed: 2024-10-20T19:31:05.000Z (17 days ago)
- Last Synced: 2024-10-22T01:59:46.077Z (16 days ago)
- Topics: awesome, awesome-list, cli, cli-app, css, data-visualization, javascript, nodejs, tailwind, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tw-helper
- Size: 304 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CLI Helper For Tailwind CSS [](https://awesome.re)
## Contents
* [Motivation](#motivation)
* [Usage](#usage)
* [Commands](#commands)
* [colors Command](#colors-command)
* [breakpoints Command](#breakpoints-command)
* [css Command](#css-command)
## Motivation
How many times you forgot what the helper classes for line-height were, or what the default breakpoints for Tailwind CSS are? Tw-helper is a command-line tool that provides fast, and easy to use commands retrieving information on Tailwind CSS, so you don't have to necessarily go browse documentation and lose focus!
## Usage
```javascript
npm install tw-helper --save-dev
```
```javascript
npx tw-helper
```
## Commands
### `colors` Command
> **_NOTE:_** 24-bit True color for command line is required for the colors to show up correctly.
The colors command allows you to list the colors on the Tailwind CSS project.
**Syntax:**
```javascript
tw-helper colors [options]
```
**Options:**
* -d, --default:
Use this flag to list the default color palette from Tailwind CSS.
Example:
```javascript
tw-helper colors --default
```
This command will print the default set of colors provided by Tailwind CSS.
* -c, --config \:
Use this flag to provide a custom Tailwind CSS configuration file. The file should specify custom colors used in your project. This flag is only required, if the Tailwind CSS configuration file is renamed, or relocated from the project root.
Example:
```javascript
tw-helper colors --config "/path/to/your-config.js"
```
This command will print the colors defined in the specified configuration file.
**Example output:**
```javascript
tw-helper colors
```
**Example output:**
```javascript
tw-helper colors -d
```
### `breakpoints` Command
The breakpoints command allows you to list the breakpoints on the Tailwind CSS project.
* -c, --config \:
Use this flag to provide a custom Tailwind CSS configuration file. The file should specify custom colors used in your project. This flag is only required, if the Tailwind CSS configuration file is renamed, or relocated from the project root.
Example:
```javascript
tw-helper breakpoints --config "/path/to/your-config.js"
```
**Example output:**
```javascript
tw-helper breakpoints
```
### `css` Command
The css command allows you to list the Tailwind CSS helper classes associated for the provided css property. Also provides a link to the Tailwind CSS documentation for the given property.
**Syntax:**
```javascript
tw-helper css
```
**Property:**
* Css property to list the Tailwind CSS classes for.
**Example output:**
```javascript
tw-helper css opacity
```
## Contributing
All contributions are welcome, please read [how to contribute](CONTRIBUTING.md) fist.