CLI Helper For Tailwind CSS

Contents

• Motivation
• Usage
• Commands
  • colors Command
  • breakpoints 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

Option 1: Use directly with npx

npx tw-helper

Option 2: Install globally

npm install -g tw-helper

Option 3: Install to project local scope

npm install tw-helper --save-dev

Add tw-helper command to PATH variable

export PATH=$PATH:./node_modules/.bin

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:

tw-helper colors [options]

Options:

• -d, --default:

  Use this flag to list the default color palette from Tailwind CSS.

  Example:

  tw-helper colors --default

  This command will print the default set of colors provided by Tailwind CSS.

• -c, --config <file>:

  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:

  tw-helper colors --config "/path/to/your-config.js"

  This command will print the colors defined in the specified configuration file.

Example output:

tw-helper colors

Example output:

tw-helper colors -d

breakpoints Command

The breakpoints command allows you to list the breakpoints on the Tailwind CSS project.

• -c, --config <file>:

  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:

  tw-helper breakpoints --config "/path/to/your-config.js"

Example output:

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:

tw-helper css <property>

Property:

• Css property to list the Tailwind CSS classes for.

Example output:

tw-helper css opacity

Contributing

All contributions are welcome, please read how to contribute first.