Sortwind
Tailwind Classes Organizer
Order and remove duplicates from your Tailwind classes with this Visual Studio Code extension.
Classes Ordering
Order the Tailwind CSS classes of your selected code file when saving changes.
Here is an example of how the TailwindCSS classes of this example button are ordered:
You can also order your Tailwind classes using the command Ctrl + Shift + S.
* Video demonstration of how TailwindCSS classes are ordered.
Duplicates Removal
* Video demonstration of how duplicates of TailwindCSS classes are removed.
Remove duplicates from the Tailwind CSS classes of your current code file when saving changes.
Here is an example of how the duplicates of the TailwindCSS classes in an example button are removed.
Settings
You can configure the extension to your liking using the following settings in your settings.json file in VS Code.
You can access it by pressing Ctrl + ,
Configure the extension to suit your needs using sortwind.{property}
runOnSave
Type: boolean
Default: true
Order the TailwindCSS classes of your current file when saving changes.
removeDuplicates
Type: boolean
Default: true
Remove duplicates from the TailwindCSS classes of your current code file when saving changes.
order
Type: array
Default: ['aspect-auto','aspect-video', ...]
Array with the order of the TailwindCSS classes.
You can change the order to your liking!
classRegex
Type: object
Default: {'html':'\bclass\...'}
Regular expression to find TailwindCSS classes in different languages.
You can add the regex of the language you like the most!
About Us
We are two developers who have created this extension as a final project for Web Applications Development to help other developers keep their Tailwind CSS classes ordered and without duplicates.
If you have any suggestions and/or problems, do not hesitate to open an issue on our GitHub.
Thank you for using our extension!