Headwind is an opinionated Tailwind CSS class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.
Get it from the VS Code Marketplace →
You can install Headwind via the VS Code Marketplace, or package it yourself using vsce. Headwind works globally once installed and can be triggered by:
- Pressing CMD + Shift + T on Mac
- Pressing CTRL + ALT + T on Windows
- Running 'Sort Tailwind CSS Classes' via the Command Palette
Performing one of these actions will automatically sort all classes within an opened document. Any custom/unknown classes will be moved to the end of the class list.
Headwind ships with a default class order (located in package.json). You can edit this to your liking on the extension settings page.
A string array that determines the default sort order.
A string that determines the default regex to search a class attribute.
The default is set to
\bclass(?:Name)*\\s*=\\s*([\\\"\\'](https://github.com/heybourn/headwind/blob/master/[_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']) but can be customized to fit your needs.
Make sure if a new group is created that this is non-capturing by using
By default headwind will remove duplicated class names. With this option you can disable duplicate class removals.
By default headwind will automatically on on save but this can be disabled.
Headwind is open source and contributions are always welcome. If you're interested in submitting a pull request, please take a moment to review CONTRIBUTING.md.