Hacker News Reader

Comment by gvkhna | Hacker News Reader

Tailwind is great but the horizontal alignment of all classes is definitely not ideal.

Is there a vscode extension that possibly aligns classes in new lines? Alphabetical sorting could be nice as well.

Is this on the horizon for the Tailwind team? The intellisense extension is quite good so it’s possible this is a problem they are working on as well.

View on HN

I wish there was a convention on the order of classes on an element. Like height/width first, padding/margin next, idk what next, and then pseudoclass variants at the end, but in the same order?

I don't know honestly, I just wish there was a convention.

There are, e.g. this prettier plug-in: https://www.npmjs.com/package/prettier-plugin-tailwind or headwind: https://github.com/heybourn/headwind

I have seen various conventions over the years on how to order css properties that could be used for ordering tailwind style classes. E.g https://rhodesmill.org/brandon/2011/concentric-css/

The problem is more, that to my knowledge, none of them got wide adaption. You could at adapt them on at least a company/team wide level, but don’t know what tooling there is to make it easily configurable.

This may sound strange first, but there is nothing to argue in a team about if you sort them alphabetically.

I like it. Simple and predictable.

I agree. Also the reason for alphabetical ordering is typically adding in lines will not cause additional changes in git blame.

That was what I did with CSS properties, but it doesn’t fit as well with Tailwind.

Check out this extension for VSCode which organizes your classes on save. https://marketplace.visualstudio.com/items?itemName=heybourn...

Otherwise, I usually try to separate out states when using @apply.

` .example { @apply bg-blue-100; @apply hover:bg-blue-200; @apply focus:bg-blue-200; `

But now with JIT you could simplify if you wanted to:

`.example { @apply bg-blue-100; @apply hover:focus:bg-blue-200;`

Maybe you could use data-attribute to group these common styles like 'sizing' 'color' etc

something like <div data-css-size='large flex-box display-flex' data-css-color="red" data-css-font="gotham serif"></div>

then something like [data-css-color*="red"] {color:red;}

I haven't tested this just thinking off the top what might work

I like this a lot actually, considering JIT maybe data attributes or some tighter integration into react could easily be done so there isn’t so much reliance on class names.

I’m ok with a convention but considering how that could become it’s own complete config maybe alphabetical would just be better. Also it typically has less issues with git changes.

The convention I have started using is “outside in” meaning first the margin, then the border, then the padding, etc. It’s not perfect because a lot of stuff is “in” (font family, text color, etc.) but it at least gives a rough directionality to things.

https://github.com/fleck/class-types.macro#auto-reorder-clas... The order I ended up going with was to match tailwind's output order.

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

self plug, but I wrote a macro/eslint plugin that does a couple things and this is one of them: https://github.com/fleck/class-types.macro#better-prettier-f...

Reply on news.ycombinator.com