prettier-plugin-tailwindcss VS Tailwind CSS

You can use the Tailwind Prettier plugin to automate this: https://github.com/tailwindlabs/prettier-plugin-tailwindcss. I'm not sure if it would support the precise grouping and sorting you prefer, but it may be worth it anyway!

For years, I've been prettier's biggest fan... Introducing it to every codebase at a new role, instantly adding it to any new repository, installing additional plugins such as tailwind or xml and of course, ensuring the "Format on save" option is switched on.

prettier-plugin-tailwindcss: A plugin for Prettier that sorts your Tailwind CSS classes. It organizes Tailwind utility classes in a specific order to maintain consistency across the project.

Thats it! Still have problems? Check out the official prettier-plugin-tailwindcss documentation.

For additional configuration options like sorting classes in non-standard attributes, visit the prettier-plugin-tailwindcss documentation.

To automatically sort TailwindCSS classes when using Prettier, you can follow this documentation.

Since this was a problem that many people had already encountered, there was already a solution. The first thing I found was Tailwind's official Prettier plugin, which ensures that class names are always ordered according to a certain rule. Best of all, it's auto-correcting, so I don't accidentally miss something or commit a different order.

It's not as if the correct order for the rules is mysterious. It's implemented in the Tailwind compiler. Tools like prettier-plugin-tailwindcss, which automatically sorts the class names in your HTML code to match the order in which Tailwind generates them in your CSS output, use a public API in Tailwind to get this order.

Other than that, you can get Prettier sorting your classes with the Tailwind Prettier plugin. And one more quality-of-life extension that might help your eye sores from a long list of classes is Tailwind Fold.

Tailwind CSS Drop it into your custom theme and never look back

Tools: V0 by Vercel, shadcn/ui, React, Tailwind CSS V0 turns natural language prompts into ready-to-use React + Tailwind UI code. Ask for “a responsive SaaS dashboard with a dark theme and collapsible sidebar” and you get production-ready code instantly, accessible, tweakable, and not locked into rigid templates.

Want to really dive in? Check out the official docs at https://tailwindcss.com or join the thriving community on Discord and Twitter.

The form is not looking that good. So let's add our own styles and make it beautiful. We will use tailwindcss for this.

Tailwind CSS installed and configured in your project. If you haven't done this, check out the official Tailwind CSS documentation for installation guides.

Visit the official documentation for installation via different frameworks, CLI, or CDN.

Styling: Tailwind CSS

I primarily work on Windows, though I also use Linux, so I needed a cross-platform solution. I chose Electron for its flexibility and paired it with Svelte, TailwindCSS, and Vite-Electron. Vite made dev setup fast and clean, which I really appreciated.