7 ms·

Tailwind is vanilla CSS though right? If someone created a stylesheet that just mapped one class to one CSS rule, and did that over and over for all the kinds o

• matheusmoreira 3y ago
  > mapped one class to one CSS rule So they essentially reinvented the style attribute in a less verbose form?
  • geek_at 3y ago
    Less verbose? Ha, far from it. Look at the tailwind examples. One div tag now has 6 or more classes attached
    • matheusmoreira 3y ago
      Well I suppose it's less verbose than a lengthy style="..." attribute that accomplishes the same thing.
      • ludwik 3y ago
        Now it's a lengthy css instead. It seems to me we are going backwards...
        • Hedepig 3y ago
          Out of interest, have you built anything non-trivial with tailwind? I've used CSS, and Tailwind and not worrying about naming everything correctly and not skipping around different files is a dream for me. Perhaps that's my brain, Idk. Further I have gone over old code, and haven't had any problem with maintainability
      • culi 3y ago
        > Well I suppose it's less verbose than a lengthy style="..." attribute that accomplishes the same thing. It's not actually the same thing. What you're talking about is inline styling which takes precedence over class-based styling. It's generally considered bad practice to rely on inline styles. The traditional approach is `style="card"` not `style="...a bunch of rules..."`
        • matheusmoreira 3y ago
          <div class="block text-black">...</div> <div style="display: block; color: black;">...</div> Looks like the same thing to me. Only shorter.
          • Akronymus 3y ago
            With traditional css you'd most likely have a class for all the relevant attributes. <style> .someClass { display: block; color: black; } </style> <div class="someClass">...</div>
            • matheusmoreira 3y ago
              Of course. That's how I learned CSS and how I wrote the CSS for my site. Apparently that's not how things are done these days. People have one class for every property and value combination now and essentially write the entire class inside the class="..." attribute. Can't understand why.
          • culi 3y ago
            Like I said. It's not at all the same thing. Inline styles have different behavior from class-based styling
  • aidos 3y ago
    Yes, along with the variations. So you can do things like “text-green hover:text-red”
  • PUSH_AX 3y ago
    Some of the other 10% is stuff around theming and design systems. This isn't something that injects cleanly into inline styles. Also media queries and hover states etc can't be done inline. If it's a reinvention it's objectively better at least.
    • deleted 3y ago
      [deleted]
    • culi 3y ago
      I think you're confused. What they're saying is it's a reinvention of ```css .card { ... } ``` ```html <div class="card" /> ``` RATHER than a reinvention of ```html <div style="..." /> ```
      • matheusmoreira 3y ago
        I meant this tailwind framework looks like a reinvention of style="..." inline styles. <div class="block">...</div> <div style="display: block;">...</div> https://tailwindcss.com/docs/display https://tailwindcss.com/docs/display So we've gone from inline styling to separating markup and presentation with CSS but now we've gone back to inline styling.
        • porridgeraisin 3y ago
          The whole separating markup from presentation doesn't quite work for any non trivial web-app type of webpage. Because the presentation affects markup. You'll have to add wrapping divs to accomplish any kind of complex layout for example. Once you can't separate it in your mental space, it doesn't matter that its in two different files.
          • matheusmoreira 3y ago
            But the solution is to turn CSS into inline styles? > You'll have to add wrapping divs to accomplish any kind of complex layout for example. I don't know about that. I think selectors are pretty powerful. Have managed to avoid littering the HTML with structural nodes by using them creatively. CSS has gained a huge number of features since I first learned it, there's even better ways to do stuff now.
  • lmm 3y ago
    Which was always what anyone with any sense wanted. CSS selectors were a mistake, no-one actually writes web pages like the CSS Zen Garden nor should they. The only problem with inline styling was the verbosity (and even then, we've had transparent compression in HTTP for about 30 years now).
    • arp242 3y ago
      I think it's nice I can change "color: red" to "color: blue" and "padding: 1rem" to "padding: 1.5rem" in one place and have it take effect everywhere it's relevant. You can do this with CSS variables now I suppose, but this very quickly becomes "CSS classes, but with extra steps".
      • lmm 3y ago
        > I think it's nice I can change "color: red" to "color: blue" and "padding: 1rem" to "padding: 1.5rem" in one place and have it take effect everywhere it's relevant. I agree, but that place is normally the code/templating engine that generates your webpage. So it really shouldn't matter if it's repeated on the wire. > You can do this with CSS variables now I suppose, but this very quickly becomes "CSS classes, but with extra steps". Variables are much simpler and easier to understand than selectors.
    • matheusmoreira 3y ago
      > CSS selectors were a mistake, no-one actually writes web pages like the CSS Zen Garden nor should they. I see, we finally reached the root of the issue. Why are CSS selectors a mistake? Doesn't seem that way to me. Why shouldn't I use them?
      • lmm 3y ago
        Complete lack of encapsulation. You never know when changing one element is going to change another, seemingly unrelated element - e.g. you add a class to a high-level element expecting to get a border around your page, and it gives you a border around your page but also around some small elements on your page that are picked up by that same selector. You can't reliably reuse your styling or components between pages, because the exact same element placed in two different pages might end up with radically different styling.
  • naasking 3y ago
    You can think of it like the style attribute, but with support for CSS media queries, pseudo classes, variables and everything else. If the style attribute let you do that from the beginning of the web, would we have ever felt the need for separate stylesheets? Web development might have turned out quite different.
• c-fe 3y ago
  It is just CSS, but I would not consider equating tailwind to CSS. Instead, I write tailwind utility classes that seem more friendly and approachable to me and their behaviour is also much more predictable to be at least so far. While it does get mapped to CSS in the end, I dont really have to read/understand that generated CSS and just enjoy tailwind handling it for me.
• culi 3y ago
  It's more than just CSS classes. If it was just CSS classes I think people should just make their own utility classes. It adds a build step for things like, for example, tree-shaking (it'd be a massive amount of wasted CSS to add classes for EVERYTHING). It's also yet another configuration to manage