• brian@programming.dev
      link
      fedilink
      arrow-up
      6
      arrow-down
      2
      ·
      15 days ago

      except we generally use higher level abstractions now, like component based frameworks. If you’re writing raw html with tailwind and no library you’re doing it wrong and css is a better fit.

      well written straight css ends up building it’s own tree of components. if you’re using react too you’re either only selecting a single component (inline styles but have to open two files) or writing good css (duplicating the component hierarchy in css).

      tailwind is just the former but better since it encourages using a projectwide set of specific sizes/colors/breakpoints and small scope, the two actual problems with inline styles after organization and resuse, which react etc solves.

      • TrickDacy@lemmy.world
        link
        fedilink
        arrow-up
        7
        arrow-down
        1
        ·
        15 days ago

        I cannot tell if you’re saying tailwind is taking away from useful abstractions or adding to them. I think it’s taking away from them. A whole bunch of class names in the page is opposite to what we were taught and there was a good reason for the lesson: content and presentation should be defined separately. This lends flexibility, readability and accessibility. Tailwind doesn’t help with anything but preventing a breakage in another component/page. To me the reason to value this trade off is that you don’t want devs to “have to care about css” which is a bad sign to begin with. It says “we think the way the web is built is bullshit, so let’s just try to work around that with the latest attempt to make it better”. The web is not bullshit. CSS is beautiful. Embrace the challenge. (Sorry I’m only halfway directing this rant at you)

        • brian@programming.dev
          link
          fedilink
          arrow-up
          3
          ·
          15 days ago

          I’m saying we weren’t taught when react was the way people wrote sites. if I was writing a site with pure html, css is great, especially modern css.

          but if I’m already using react and their abstractions, opinions on that part aside, I’d personally rather lean on the react component as the unit of reuse. tailwind removes the abstraction that you don’t need, since many people in react tend towards one scoped css file per component with classes for each element anyway

          at this point I’d be more inclined to say for many sites the api and data fetching things are the content and html+css is presentation. csszengarden is cool but I haven’t seen the html/css split help an end user, or really even me as a developer.

          • TrickDacy@lemmy.world
            link
            fedilink
            arrow-up
            2
            ·
            edit-2
            15 days ago

            tailwind removes the abstraction that you don’t need, since many people in react tend towards one scoped css file per component with classes for each element anyway

            What abstraction does it remove? In my view, it just adds slightly different abstractions. Instead of knowing an element has a clean block of rules with set meanings, you get a long (potentially grossly formatted/ordered) string of class names that mean the same thing as the CSS properties for the most part, but you’ve gotta learn a new set of aliases for them. If I am working on someone else’s component, one of these scenarios is way easier for me than the other. Even when I worked with TW for a while, I never could really remember a lot of those class names.

            csszengarden is cool but I haven’t seen the html/css split help an end user, or really even me as a developer.

            You may have never refactored or reskinned a site. I have several times. The hardest projects like that were when content and presentation were tightly coupled. Those felt like pulling teeth to get done. important! every time a dev buried a style tag somewhere deep in some (for all intents and purposes) unchangeable Java code… shudder When they were loosely coupled, it was fun and went much easier.

            edit: respect for knowing csszengarden. That site honestly was the first time I learned this principal and saw it applied. I’ve themed several websites over the years so I’ve used the concept myself.

        • Eyron@lemmy.world
          link
          fedilink
          English
          arrow-up
          1
          ·
          15 days ago

          You’re not wrong.

          Realistically, there’s a bit of a nuance. Many modern web apps have different components that aren’t HTML. You don’t need HTML for a component. And those non-HTML components can provide the consistency they need. Sometimes, that’s consistency for how to get the data. Sometimes, that’s consistency for how to display the data. For displaying, each component basically has its own CSS, but it doesn’t need to. A CSS class isn’t required.

          Tailwind isn’t meant to be a component system, It’s meant to supplement one. If you’re writing CSS’s components, it looks horrible. If you’re writing components at CSS that needs a foundation of best practices, it works pretty decent. They’re still consistency. They’re still components. They’re just not centered around HTML/CSS anymore. It doesn’t have to be.

          Sematically, it is still worse HTML. Realistically, it’s often faster to iterate on, easier to avoid breakage: especially as the project becomes larger. Combine that with the code being more easily copied and pasted. It can be a tough combo to beat. It’s probably just a stepping stone to whatever’s next.

          • TrickDacy@lemmy.world
            link
            fedilink
            arrow-up
            1
            ·
            15 days ago

            Many modern web apps have different components that aren’t HTML

            What do you mean by this? Web Components?

            I am not sure I understand the second paragraph either. I get that if you’re doing things well, TW class names can be applied in a non-insane way. Still rubs me the wrong way as a concept though.

        • Pup Biru@aussie.zone
          link
          fedilink
          English
          arrow-up
          2
          arrow-down
          1
          ·
          15 days ago

          imo there’s VERY little difference to a lot of tailwind and style=“…”. you gain a few minor abstractions, but you lose so much

  • RushLana@lemmy.blahaj.zone
    link
    fedilink
    English
    arrow-up
    34
    ·
    15 days ago

    Genuine question : what’s wrong with modern vanilla CSS3 ?

    Maybe it’s because I’ve used css2 I don’t see the point of css frameworks.

    • kambusha@sh.itjust.works
      link
      fedilink
      arrow-up
      33
      arrow-down
      1
      ·
      15 days ago

      I was very much against frameworks initially: tailwind, bootstrap etc. However, when I started really building sites & apps using components, I found tailwind made my life a lot easier, so I could easily see and change styling while writing code/html, and it would only affect that component.

      Beforehand, I was trying to come up with names for CSS classes all the time, and then I’d change one thing, and fuck up styling on a diff page.

      • Karjalan@lemmy.world
        link
        fedilink
        arrow-up
        16
        ·
        15 days ago

        Honestly love tailwind. Once you get used to all the names/abbreviations and how they work with sizes and states etc. it’s much easier to see what’s happening when eyeballing code.

        Makes reviewing and bug fixing easier too.

        I get that early on it feels annoying. I recall disliking it the first time I learnt it, but then when I went back to regular css and classes I really missed it.

        • moriquende@lemmy.world
          link
          fedilink
          arrow-up
          2
          ·
          15 days ago

          Any passable editor nowadays does the heavy lifting for you, you can usually even write the CSS tag you want and it’ll show you the options.

        • FooBarrington@lemmy.world
          link
          fedilink
          arrow-up
          2
          ·
          15 days ago

          Except that you learn the class names once and re-use them across all your projects, whereas CSS classes are different for every single project.

      • moriquende@lemmy.world
        link
        fedilink
        arrow-up
        2
        ·
        15 days ago

        Yep, a component is a good abstraction level, no point in making life difficult by creating and coming up with names for smaller parts.

    • ClassifiedPancake@discuss.tchncs.de
      link
      fedilink
      arrow-up
      14
      ·
      15 days ago

      It helps to avoid the specificity problem. You don’t have to manage a complicated class system, you just set styles directly on the elements. Yes this is pretty much what everyone agreed in the past was the worst thing to do but that was before things like CSS variables existed (which Tailwind uses excessively) that lets you control details like color and fonts from a single point. So you don’t have to go through every component to change the brand color.

      At work we don’t use Tailwind often but in our React apps we mostly use Theme-UI which lets us write regular CSS on each element in a nice JSON format instead of the class name hell that is Tailwind. This is my preferred way.

      • 5opn0o30@lemmy.world
        link
        fedilink
        arrow-up
        6
        ·
        15 days ago

        This is very informative. I avoided Tailwind for the reason you mentioned, but look closer now that I know the difference.

        • ClassifiedPancake@discuss.tchncs.de
          link
          fedilink
          arrow-up
          3
          ·
          15 days ago

          I think it’s especially great for smaller apps/sites or prototyping. Setup is quick if you’re already comfortable with CLI tools and configs. Or if you just want to get started immediately with no setup, just add a script into your site and when it needs to go into production later you can still do the setup process for a robust build.

    • TrickDacy@lemmy.world
      link
      fedilink
      arrow-up
      3
      arrow-down
      1
      ·
      15 days ago

      People fear what seems foreign. Devs want css to be like a programming language and it’s not so they’re uncomfortable. Or at least this is my unvarnished opinion

      • PolarKraken@programming.dev
        link
        fedilink
        English
        arrow-up
        3
        ·
        15 days ago

        For me it’s less about fear and more about having a limited budget of time and effort to spend on learning things, so CSS and front end generally gets deprioritized. But that’s cuz I’m a back end kinda dev in my soul, lol.

        I’ve seen the good points you’ve made elsewhere in this thread - I would indeed react very poorly to willy-nilly back end changes and I think you’re right that people don’t give CSS and visual styling the same degree of professional respect when making changes. And that sucks.

    • Havald@lemmy.world
      link
      fedilink
      arrow-up
      3
      arrow-down
      4
      ·
      15 days ago

      Tailwind sounds cooler than CSS, which, I presume, would be important when you’re applying at a startup.

  • Blackmist@feddit.uk
    link
    fedilink
    English
    arrow-up
    26
    arrow-down
    1
    ·
    15 days ago

    Which CSS framework is it that puts this shit everywhere?

    That one can die in a fire.

    • ThunderComplex@lemmy.today
      link
      fedilink
      arrow-up
      19
      ·
      15 days ago

      fun fact: This isn’t any one specific CSS framework’s doing but rather part of how JS UI libraries handle scoped CSS. When you have for example two components that have similar CSS, like one component sets button to color green, another component sets button to blue, then the compiler does this kinda thing because “real” CSS doesn’t support scoping.

      So in the above example you’d get button class abcd and button class bcde.

    • expr@programming.dev
      link
      fedilink
      arrow-up
      9
      ·
      15 days ago

      I’m honestly not sure, but I’m fairly certain it’s intentional obfuscation done for the production build. Why they think it’s so important to hide class names, I’ll never know.

      • yumyampie@lemmynsfw.com
        link
        fedilink
        arrow-up
        5
        ·
        15 days ago

        It is not intentional. The tooling needs to generate a short unique id to prevent css name clashing.

        During development 2 developers can write the same css class name in two seperate places:

        • developer A: .container { padding: 8px } at dashboard
        • developer B: .container { padding: 32px } at sidebar

        Without this tooling developer need to find ways to prevent name clashing:

        • .dashboard__container
        • .sidebar__container

        and they need to do this for every class name.

        with this tool, developer don’t have to worry about this ever, continue using .container and it get generated into:

        • .aP2be7
        • .7aFrJp
  • underscores@lemmy.zip
    link
    fedilink
    English
    arrow-up
    17
    ·
    15 days ago

    I’ve used raw CSS for the last 2 years at work and it’s not like it’s magically better or my productivity is higher or that it is simpler to read and understand.

    Use the tool that works for you, tailwind is fine.

    • Lemminary@lemmy.world
      link
      fedilink
      arrow-up
      7
      ·
      15 days ago

      That’s a common misconception by people who never used it. The truth is you need to know CSS to use Tailwind. Just because it simplifies styling doesn’t mean it simplifies the underlying technology.

      • Pup Biru@aussie.zone
        link
        fedilink
        English
        arrow-up
        3
        arrow-down
        4
        ·
        15 days ago

        you need to know css to use tailwind because it’s basically style= on everything: it’s css with extra steps

        • Lemminary@lemmy.world
          link
          fedilink
          arrow-up
          2
          ·
          15 days ago

          Well, it’s className on everything ;) And yes, it’s literally CSS utility classes with an extra installation step that you only do once

    • kora@sh.itjust.works
      link
      fedilink
      arrow-up
      4
      arrow-down
      1
      ·
      edit-2
      15 days ago

      It shocks me to see how many programmers think such framework decisions are one-size-fits-all and jump to conclusion that such framework adoption decisions are is due to lack of skillset and experience.

      There are many factors at play. You have time to build and maintain your own utility framework, please go ahead.

      Two years ago, I led a team which developed a web app that generated 600 million impressions per year. We used Tailwind because we were a small team and I’d rather have my developers work on high value tasks and not maintain a style framework.

      If you are an aspiring developer, know this: There are always trade-offs. Not writing pure CSS does not make you a bad developer. Not knowing system design does.

    • dajoho@sh.itjust.works
      link
      fedilink
      arrow-up
      4
      arrow-down
      4
      ·
      15 days ago

      This is the correct answer. Pig-headed arrogance is why this cancer of a framework exists.

  • orca@orcas.enjoying.yachts
    link
    fedilink
    arrow-up
    5
    ·
    15 days ago

    In my personal projects, I don’t use anything. I wrote a set of utilities and functions in SCSS years ago that let me easily create reusable variables and classes that already do what TW does, but with less bloat and overhead. I get project-specific spacing, colors, font classes, everything.

    I also highly recommend picking up Andy Bell’s Complete CSS course.

  • hector@sh.itjust.works
    link
    fedilink
    arrow-up
    4
    ·
    15 days ago

    Tailwind is sooo great, made me extremely productive when scaffolding layouts and managing my palettes.

    I really love it :)

    • Piatro@programming.dev
      link
      fedilink
      English
      arrow-up
      16
      ·
      15 days ago

      I’ve not used it in anger but the principle just seems like inline-styles with extra steps. However I’ve also had to change something in a large project that had a lot of dedicated classes with specific and shared styles and trying to sort that out without breaking stuff was a massive pain.

    • Lemminary@lemmy.world
      link
      fedilink
      arrow-up
      8
      ·
      15 days ago

      It’s actually very useful. All these negative comments have the hallmarks of people who don’t generally use it. I can tell because the criticisms stem from a lack of familiarity, missing the point.

    • NotNotMike@programming.dev
      link
      fedilink
      arrow-up
      8
      ·
      15 days ago

      No, it is not that bad. It’s actually very nice.

      It affords a lot of consistency, is relatively easy to understand (once you’re familiar with the convention), and theming allows you to modify all the colors and sizing in one file rather than modifying a lot of CSS

      I think the worst that can be said about it is that it is unnecessary, but I cannot see a true downside to using it besides personal preference. It gets the job done efficiently and correctly and that’s what’s important at the end of the day

    • paulbg@programming.dev
      link
      fedilink
      arrow-up
      5
      arrow-down
      3
      ·
      15 days ago

      yea it’s redundant as hell if not combined with UI libraries that extend it like shadcn / daisyui

    • marcos@lemmy.world
      link
      fedilink
      arrow-up
      2
      ·
      15 days ago

      It’s a nicer syntax for inline styles.

      If you want to use inline styles everywhere, it’s great.

      • FooBarrington@lemmy.world
        link
        fedilink
        arrow-up
        3
        ·
        15 days ago

        It’s much more than just inline styles. It’s also design constants (e.g. color palettes, sizing etc.) and utilities (e.g. ring).

    • scott@lemmy.org
      link
      fedilink
      English
      arrow-up
      5
      arrow-down
      3
      ·
      15 days ago

      At first it seems nice…I played with it for a few hours in an established project and didn’t mind. But the I thought about using it from scratch and I’m just baffled anyone does. It’s like if CSS was slightly more abbreviated but you couldn’t use classes so every style has to be specified on every component.

      • beeb@lemmy.zip
        link
        fedilink
        arrow-up
        5
        ·
        edit-2
        15 days ago

        A lot of ui frameworks are based on tailwind and allow you to customize the components with more tailwind. It’s really a win because:

        • it’s not “just inline classes”, it’s a design system (spacing, colors, breakpoints etc are well structured and not random)
        • it is way less verbose than vanilla css and easier to remember
          • brian@programming.dev
            link
            fedilink
            arrow-up
            2
            ·
            15 days ago

            shadcn is the primary one for react at least. they’ve done a great job filling the space where you’re trying to build up a design system but don’t want to start from scratch, but they’re great if you just want prebuilt components too

            all the components build on something else like radix, and are pretty simple themselves. normally just the radix component with styles. Installing a component just copypastes the source into your project at configured locations.

            if you’ve ever fought against something like mui to get it to fit design changes or change specific behavior, shadcn is great. at some point the extension points of a library aren’t enough, but if you own all the code that’ll never be a problem.

            • dubbel@discuss.tchncs.de
              link
              fedilink
              arrow-up
              2
              ·
              15 days ago

              I don’t use react, but needed a decently looking frontend complement library that didn’t look dated, and found basecoat, which is shadcn but without react to be really neat.

              Might be interesting for the htmx crowd here.

        • scott@lemmy.org
          link
          fedilink
          English
          arrow-up
          4
          ·
          15 days ago

          Yes but it’s also expressly discouraged in the documentation so…

      • brian@programming.dev
        link
        fedilink
        arrow-up
        1
        ·
        15 days ago

        instead of using classes you just use whatever your ui library provides for reuse. stick a classname string in a variable and you have a class. use a component and it just contains all its styles.

        unless you mean that if you look in the inspector you see a mess of classnames. I don’t have a solution there

  • Omega@discuss.online
    link
    fedilink
    arrow-up
    3
    ·
    15 days ago

    They said that You either hate or love tailwind, and when I first used tailwind I assumed it was just a joke, ‘why would they hate this? It’s simple to use, remember, build, and it even removes unnecessary CSS that I forget to do…’

    Apparently it isn’t as simple as that.