4 ms·

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? A

• beckler 6y ago
  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.
  • smoe 6y ago
    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/ 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.
  • leipert 6y ago
    There are, e.g. this prettier plug-in: https://www.npmjs.com/package/prettier-plugin-tailwind https://www.npmjs.com/package/prettier-plugin-tailwind or headwind: https://github.com/heybourn/headwind https://github.com/heybourn/headwind
  • tpetry 6y ago
    This may sound strange first, but there is nothing to argue in a team about if you sort them alphabetically.
    • vsareto 6y ago
      I like it. Simple and predictable.
    • gvkhna 6y ago
      I agree. Also the reason for alphabetical ordering is typically adding in lines will not cause additional changes in git blame.
    • earthboundkid 6y ago
      That was what I did with CSS properties, but it doesn’t fit as well with Tailwind.
  • jzeltman 6y ago
    Check out this extension for VSCode which organizes your classes on save. https://marketplace.visualstudio.com/items?itemName=heybourn.headwind 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;`
  • dillondoyle 6y ago
    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
    • gvkhna 6y ago
      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.
  • gvkhna 6y ago
    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.
  • earthboundkid 6y ago
    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.
  • jfleck 6y ago
    https://github.com/fleck/class-types.macro#auto-reorder-classes-via-eslint-pluginrule https://github.com/fleck/class-types.macro#auto-reorder-clas... The order I ended up going with was to match tailwind's output order.
• jfleck 6y ago
  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-formatting-for-long-classes https://github.com/fleck/class-types.macro#better-prettier-f...
• rubans 6y ago
  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 https://github.com/heybourn/headwind