Tailwind CSS Formatter

Tailwind CSS Formatter is a Visual Studio Code extension that helps you format Tailwind CSS classes by grouping them into lines with a configurable maximum character length (default is 50 characters per line).

Features

• Formats selected Tailwind CSS classes.
• Groups classes into lines with a configurable maximum character length.
• Default maximum characters per line is set to 50, but it can be customized.

Installation

1. Install Dependencies:

   npm install
   

2. Open in VSCode:

   code .
   

3. Run the Extension:

   • Press F5 to open a new VSCode window with the extension loaded.

Usage

1. Select the text containing Tailwind CSS classes you want to format.

2. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).

3. Run the Format Tailwind CSS command.

The selected Tailwind CSS classes will be formatted, grouping them into lines based on the maximum character length configuration.

Configuration

You can configure the maximum number of characters per line in the settings:

1. Go to File > Preferences > Settings (or Code > Preferences > Settings on Mac).

2. Search for Tailwind CSS Formatter.

3. Set the Maximum number of characters per line when formatting Tailwind CSS classes to your desired value.

{
  "tailwindCSSFormatter.maxCharsPerLine": 50
}