[gemstones]

There's a meaningful difference to my workflow of doing

    <div className="px-4"></div>

versus doing

    .mycomponent__wrapper {
      padding: 0 1rem; // Don't forget the time to look up whether it's vertical | horizontal or horizontal | vertical because I forget all the time
    }

then

    <div className="mycomponent__wrapper"></div>

and toggling between files, and making sure the team knows my preferred CSS layout structure in the general case. Plus, the solution for more complicated CSS is to just write it as CSS and to add the class directly like you would before. The point of tailwind is that I don't actually like or care about knowing CSS trivia, I just happen to know it. There's no value to me in doing things directly in CSS unless it's complicated enough to justify going to that layer. A helper layer is perfectly fine.

[nsenifty]

> Don't forget the time to look up whether it's vertical | horizontal or horizontal | vertical because I forget all the time

padding and margin go `top right bottom left` just like in a clock. So it always start at top and go clockwise. The two argument shortcut is just `top right` with bottom=top and left=right.

[nailer]

Also top right bottom left - TRBL - ‘trouble’

[nailer]

Regarding the choice of class names: you are using using wrapper elements routinely, outside absolute edge cases like border gradients, you don’t have current CSS skills. As mentioned previously current CSS means you can have a 1:1 match of HTML element to UI element for the vast majority of layouts, no wrappers required.

Current gen frameworks will put the styling inside the component so styling is literally a matter of scrolling down.

  <div class=“login”>

…

  .login {
    padding: 12px 6px;
  }

Yes you need to know the order I’ll give you that. Still less overhead than adding tailwind.

[ducharmdev]

Ideally all components would be small bite-size pieces, where scrolling down wouldn't be a big deal. But in practice I could still see it being tedious, scrolling through a bunch of classes to find the one you care about.

Now if there is a go-to-definition for CSS classes, that would be quite useful. But I appreciate that I don't have to even think about putting a name to my styles with Tailwind.

[nailer]

It’s a login box. There will be a login box, and two inputs, some instructions and a place for errors.

  .login, input.username, input.password, .instructions, .error

If it’s a sea of nested divs, so it’s hard to find the right element (a common pattern among “I just know react” developers), then fix the sea of nested divs.

[antihero]

Ah but then you would have to remember and repeat those exact pixel values every time you pad something and update them in every place if you decide to change it. Or build your own system of variables in CSS, or use some awful CSS in JS solution.

Also means you have to think of a name for every component you want to apply style to which is surprisingly tedious.

[frosted-flakes]

Just use padding-block for top/bottom margins and padding-inline for left/right margins. Way better.

[ducharmdev]

I really relate with your example here. Adding padding/margin is such a common task, it should be quick & easy.

[idlehand]

I have a handy little mnemonic I use to keep track of the order of X and Y: the standard "margin: 0 auto" for horizontal centering.

0 vertical margin when centering horizontally, so Y must be the first axis.