discuss
discuss copied to clipboard
tailwindlabs
Order class names in markup. What's your secret?
Been trying out Tailwind for about a week now, and lovin' it!! 😍
Just wanted to see how everybody's sorting/ordering their classes in the markup. Sometimes the strings can get very long...
Outside of Tailwind, I've been grouping my CSS properties like in this chapter from the SMACSS book (box, border, background, text, other) and then alphabetically inside each group for several years. It has worked wonderfully in traditional CSS and I've been trying to order Tailwind's classes in the markup the same way, but I don't feel like it translates well to this workflow.
Do you have any special tricks for ordering the classes? All alphabetically? All variations (hover, responsive, etc) at the end? Variations directly after the class you're modifying? One class per line? Please leave a reply below, and we can all maybe learn something from each other! 🎉
I basically always put "theming" (color, background, borders) it last. But the Basscss suggest a good order: http://basscss.com/v7/docs/guides/basics/#order
I use (two) spaces and slashes to help visually divide groups of like-classes (all flex classes together, spacing classes grouped together, etc.). Responsive classes follow any related non-responsive class. For example, something like:
flex sm:inline-flex items-center / bg-blue / text-white text-sm font-bold / px-4 py-3
The thing is: As long as you are developing your own stuff and are the only one who's working on the project it's up to you and no one cares about. You can group by position, typo, whatever. But when it comes, that a (larger) team is working on a project you have to ensure, that every single team mate knows the rule to have consistency over your project.
In that case I'd prefer something easy. If you define an order like:
- Positions
- Layout
- Typo
- Whatever
I can guarantee, that nobody cares because nobody remembers and they have to refer to the documentation all the time. So one easy way (even if you write regular css in your css files) I find, is, to order it alphabetically. It's not very logical and at the beginning it's strange to read. But the very big advantage is, everybody knows the alphabet. Or at least they should :) I promise you, with that in mind, you have a really straight consistency of code. But again, I apply that only if you work on larger teams.
If you are on a one-man show, do whatever you want, what you like and what you're used to. 👍
Never heard of Typosilaycosta? It could be the name of a Greek village in the Ionian Islands, but it's not. It's just a way to remember Typography, Position, Layout, Colors, and State!
I tend to place things alphabetically within each responsive class, that work from sm up to large. For example:
rounded w-full sm:border-t sm:mx-2 sm:my-4 lg:mx-4 my-5
I've been using Headwind for some time and love it!
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.
https://github.com/heybourn/headwind
I hate to plug my own packages... but I've just published a tailwind classes sorter prettier plugin.
https://github.com/Acidic9/prettier-plugin-tailwind-classes-sorter
It will sort classes based on plugin name.
