prettier-plugin-tailwindcss VS javascript

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.

TL;DR https://claudemd.dev is where you can find guidelines to make your vibe coding more effective

If you haven't used claude code, I highly recommend you check it out. You may have used other AI tools in development, but being a cli with a refined "plan" step has revolutionized my development workflow. The fact that I can dispatch three prompts to run concurrently, and reliably trust the actions being taken feels incredible. I am spending less time thinking about code and more about the higher level direction of the code.

If you want claude code to be more reliable in its output, it can further be directed by using CLAUDE.md files. These files are included in the plan step and significantly improve the quality of its output. What makes a useful CLAUDE.md is similar to a well written style guide [1]. By providing a set of guidelines for what patterns to follow, the LLM can be more focused when building its plan. In a sense, a CLAUDE.md can be thought of as a "language semantics" for your codebase or directory for how to "compile" your thoughts into actions. Fortunately, you don't need to write your semantics in BNF [2], but the completeness of your semantics matter nonetheless. Without forethought, an LLM will happily come up with its own plan for your codebase.

I thought of and published https://claudemd.dev last night with the idea that sharing these files will improve the quality of code that we will be writing for this next abstraction of software development.

If you want to learn more about these files, I recommend reading this https://claudelog.com/mechanics/claude-md-supremacy.

[1] https://github.com/airbnb/javascript

Airbnb JavaScript Style Guide

airbnb (101k stars, English version), airbnb-Chinese version

AirBbB. I usually start here, but Vercel's config covered most of what I care about for both React and Node code styling.

Visit the repository to read the style rules.

1 . Airbnb JavaScript Style Guide Airbnb, Inc. is an American vacation rental online marketplace company based in San Francisco, California, United States.