headwind VS tailblocks

Added the tailwind-prettier-plugin as not everyone uses headwind

Headwind is a nice addon for VS Code to sort classes automatically and warn you when using conflicting classes: https://github.com/heybourn/headwind

The one I'm using is Headwind which defines itself as:

Headwind is a nice opinionated sorter which probably can be tweaked to understand our Slim templates but as a VS Code plugin it only works inside this particular IDE. We mostly use JetBrains RubyMine in our team and also needed a CLI version.

If you are worried about property sort order (Tailwind is much more readable if you are) then you can use another tool to deal with that for you: Headwind. This VS Code extension will format your Tailwind classes on save and group them by their function, making sure everything is where you expect it.

Headwind - a VS Code extension that sorts your CSS classes on save

I can suggest taking a look at Tailwind CSS Best Practice Patterns and Robin Malfait's Good Example to get an idea of how that would look like. For consistency, I can also recommend having a convention for class ordering or using headwind as an opinionated class sorter.

There's Headwind CSS, which orders classes predictably. But it doesn't move them to separate lines. This could be a config option if you're willing to write a pull request.

https://github.com/heybourn/headwind

If you want a quick copy paste solution http://tailblocks.cc does a good job.

8. Tailblocks

tailblocks.cc

https://github.com/mertJF/tailblocks might have some code in it for you and it is MIT.

Tailwind Blocks - This UI kit includes a collection of pre-designed blocks, such as hero sections, pricing tables, and testimonials. Each block is fully customizable and can be easily integrated into any project.

Tailblocks - Ready-to-use Tailwind CSS blocks

https://github.com/mertJF/tailblocks this? MIT license

Tailblock is a pre-designed block of UI elements that are styled using the framework's utility classes and can be easily dropped into a project to save time and reduce the need for custom CSS. These include common UI patterns such as navigation bars, buttons, forms, and other interface elements.