Overview:

Headwind is an opinionated Tailwind CSS class sorter designed for Visual Studio Code users. It enforces consistent ordering of classes by parsing code and reprints class tags according to a specified order. The tool runs on save, eliminates duplicate classes, and offers the capability to sort entire workspaces efficiently.

Features:

• Consistent Class Ordering: Enforces a consistent ordering of classes in code.
• Auto-Save Functionality: Automatically runs on save to organize classes.
• Workspace Sorting: Capable of sorting entire workspaces for enhanced productivity.
• Customizable Class Order: Users can edit the default class order to suit their preferences.
• Multi-Step Regex Support: Allows for specifying multi-step regex for intricate matching.
• Debugging Tools: Provides debugging capabilities for custom regex configurations.
• Duplicate Removal: Automatically removes duplicate class names for cleaner code.
• Global Functionality: Operates globally once installed, improving workflow efficiency.

Installation:

To install Headwind in Visual Studio Code:

1. Visit the VS Code Marketplace and search for Headwind.
2. Click on Install to add the extension to your VS Code.
3. Once installed, Headwind will work globally and run on save if a ’tailwind.config.js’ file is present in your workspace.

To trigger Headwind:

• On Mac: Press ALT + Shift + T
• On Windows: Press CTRL + ALT + T
• On Linux: Press CTRL + ALT + T

To sort files and workspaces:

1. For individual files, run ‘Sort Tailwind CSS Classes’ via the Command Palette.
2. To sort entire workspaces, use ‘Sort Tailwind CSS Classes on Entire Workspace’.

For customization options and debugging:

• Edit settings on the extension settings page.
• Customize the ‘classRegex’ and ‘defaultSortOrder’ in the package.json file.
• Use the provided debugging code snippet to ensure custom configurations work correctly.

Summary:

Headwind is a powerful tool for Visual Studio Code that streamlines the organization of Tailwind CSS classes. With features like automatic sorting, customizable regex options, and the ability to remove duplicates, Headwind enhances code readability and boosts productivity for developers using Tailwind CSS.