7 ms·

<el-dialog-panel class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all group-data-closed/di

• monkey_monkey 1y ago
  Yes I agree - it's nice to be able to see exactly what's happening without needing to dive into a rats nest of fragile CSS cascades.
  • deleted 1y ago
    [deleted]
  • skydhash 1y ago
    Why not use the web inspector? That’s usually the quickest way to see which style is applied to an element.
    • paradox460 1y ago
      People would rather have to parse out a big dumb list of classes than look at the actual list of what properties affect something, with a clear ability to drill down into them. Its madness, akin to carpenters giving up hammers, preferring to use glue, because they hit their thumb a few times by accident
      • skydhash 1y ago
        Based on the code I've seen, including written by old me, it seems more like designing the architecture of the CSS styles (and sticking to it) is something people don't like to do. Tailwind is just a tool that is nicer than using the style attribute on the element. I strongly prefer "button is-primary is-fullwidth" over the long list of tailwind classes.
        • paradox460 1y ago
          Same. And all the arguments about using component libraries, like the op, fall flat when you realize components can have scope local styles
      • sensanaty 1y ago
        On the site I maintain at work, if I check literally any of the old components that don't use tailwind, what I see in the styles list of the devtools is 75 different variants of .card__wrapper or whatever all overriding each other, and it's often an abject nightmare trying to figure out which of the 75 different .card__wrapper (or is it .card { &.__wrapper} ?) classes is the one I care about at the moment.
        • paradox460 1y ago
          Click over to the computed styles tab, and now you have a list of all the styles that apply to an element, regardless of source. Click the arrow next to one and it shows you where it comes from Also, have you ever tried to update old designs using tailwind? It's a disaster. Far easier to know what styles the ugly bem card class you mentioned apply to, rather than an arbitrary b-2 m-1
  • vitaflo 1y ago
    This is literally a rats nest of css cascades.
    • softwreoutthere 1y ago
      Its atomic though, which is easier for some to reason about. I use devtools.
    • omnimus 1y ago
      It is not. Utility all classes have basic specificity of 0-1-0. There is no cascade just order of classes that all have same specificity.
• Marciplan 1y ago
  kinda feels like jQuery, I like
• oleggromov 1y ago
  I came to comment that at least something good happened to the otherwise cursed project... but you made me reconsider.
• tomnipotent 1y ago
  Groups are great. It lets a child element activate an effect on a parent element. <div id="parent" class="group"><a class="group/hover:bg-black">Hover</a></div> This eliminates the need for JS for a wide range of things.
  • reactordev 1y ago
    But at what cost? If it’s not a CSS builtin, it’s going to use JS - it may not be something you care about, but it will be there. There’s no other way.
    • lemonberry 1y ago
      I believe it's regular old css. The :has() pseudo class. https://developer.mozilla.org/en-US/docs/Web/CSS/:has https://developer.mozilla.org/en-US/docs/Web/CSS/:has
      • reactordev 1y ago
        Nice
      • MrJohz 1y ago
        It's not even :has, it's just how child selectors in CSS have always worked. // Not actually needed, here // for competition .group {} // Child selector .group:hover group\/hover\:bg-black { background-color: black; } // Which is essentially the same as .group:hover child { background-color: black; }
        • luckylion 1y ago
          That doesn't affect the parent (.group) based on the child though.
          • omnimus 1y ago
            Atleast in Tailwind that’s what it should do. You hover over card (.group) and some elements inside change.
• emmanueloga_ 1y ago
  In real projects I typically group the classes in a way that makes it easier to read, something like this: <div class={tw( "block", "transform transition-all", "bg-white ring-1 ring-black/5 rounded-xl shadow-2xl", "max-w-3xl mx-auto overflow-hidden", "group-data-closed/dialog:opacity-0", "group-data-closed/dialog:scale-95", "group-data-enter/dialog:duration-300", "group-data-enter/dialog:ease-out", "group-data-leave/dialog:duration-200", "group-data-leave/dialog:ease-in" )}> ... </div> I currently do this manually but it would be nice to have some tooling to automate that kind of format.
  • Brajeshwar 1y ago
    I do this to this day, when I’m writing manual vanilla CSS. I group spacings, fonts, texts, borders etc together so it is easier for me to debug without using too many tools.
  • serhalp 1y ago
    You can use the Tailwind Prettier plugin to automate this: https://github.com/tailwindlabs/prettier-plugin-tailwindcss https://github.com/tailwindlabs/prettier-plugin-tailwindcss. I'm not sure if it would support the precise grouping and sorting you prefer, but it may be worth it anyway!
  • criswell 1y ago
    This takes away so many of the criticisms I see in this thread. The issue with Tailwind, and my only minor criticism, is just long, unreadable, not easy to deliminate lists of classes. This very easily takes care of that (and I use it for more complex class lists daily)
• gnarbarian 1y ago
  We need a total and complete stop to all front end development until we figure out what the hell is wrong with them.
  • yoz-y 1y ago
    Some people (I suspect a lot of young and motivated developers) think that UI development should be easy and elegant. But consider that a UI is 100% state management and side effects (so fundamentally imperative and asynchronous). On top of that it takes about three revisions for any tool to require bespoke display of something (everybody has an opinion). They also bring a layout engine which is best expressed in constraints. And somehow we are trying to shoehorn all this into a functional paradigm.
    • pjmlp 1y ago
      Mostly is, with native toolkits, Web should have stayed for hypermedia documents, but here we are. I have used and programmed enough kinds of UIs, since I got coding into that Timex 2068 in 1986.
• AstroBen 1y ago
  I just can't fathom how someone can look at this and think "yeahhhh thats some good clean code". How did tailwind get so popular? Learn plain CSS. It's really good now
  • Jaygles 1y ago
    I've worked in many different FE codebases with a variety of CSS "strategies". This sort of thing is objectively ugly and takes a minute to learn. The advantages of this approach I found is two-fold 1. You can be more confident that the changes you are making apply to only the elements you are interested in changing You are modifying an element directly. Contrast with modifying some class that could be on any number of elements 2. You can change things around quite quickly Once you're well familiar with your toolset, you know what to reach for to quickly reach a desired end state
    • iambateman 1y ago
      Agree, and to add…the “component” still needs to exist somewhere in the system for tailwind to make sense. No one is writing a long paragraph of styles for _every_ button in their app.
      • nojs 1y ago
        > No one is writing a long paragraph of styles for _every_ button in their app. Very much not true. LLMs love doing this!
      • yxhuvud 1y ago
        Yes, many most definitely do just that.
    • AstroBen 1y ago
      This is one of the least elegant ways to scope CSS though.. you may as well just write inline CSS I like BEM personally. "navbar__item" scopes the styling to the nav item > Once you're well familiar with your toolset, you know what to reach for to quickly reach a desired end state This also applies to plain CSS, doesn't it? The big value add that Tailwind brought isn't their utility classes IMO - it's their philosophy around having a design system of consistent coloring and spacing. I actually borrowed that for my own projects. It taught me to be a lot more diligent about specifying the system upfront. Put it in CSS variables and re-use those
• Brajeshwar 1y ago
  I have a feeling that Tailwind started with a good intention to be a utility classes CSS framework, akin to “Bourbon on Steroids”, but people began to accept and use their prototype/sample/example codes way better than they had intended, and they ran with it. I stumbled on Tailwind in 2018 and introduced it to a team looking to revamp a pretty massive project. I remember that the initial proposal I made was to treat it like Bourbon[1] and write classes that build on Tailwind’s utilities. That way, you can still have `.button`, `.button-primary`, and `.button-primary__accent` etc without the cryptic classes in the HTML. However, after reading Tailwind, the team found it much easier to write the pre-built classes and stack them as they progressed. And it worked; if I don’t care about how the code is written, things were consistent. It reminds me of “Pixel Perfection” before the responsive design era, when things looked as designed in Photoshop and printed for clients during presentations. 1. https://www.bourbon.io https://www.bourbon.io
  • k4runa 1y ago
    Tachyons CSS was also around at the same time but Tailwind had simpler naming conventions so instead of `br4` you had `rounded-lg`. 1. https://tachyons.io/ https://tachyons.io/
  • omnimus 1y ago
    Dont’t forget Tailwind is popular because people can copy paste chunks of HTML. Selling premade HTML is how Tailwind is funded. It is also pretty good configurable utility framework but that is secondary and new version 4 is worse at customisation. So people are moving to https://unocss.dev/ https://unocss.dev/ with tailwind naming conventions.
• davidw 1y ago
  It's like Forth and CSS had some kind of hideous offspring.
• gloosx 1y ago
  Oh yeah, when I open a typical big project with Tailwind I always love to see some: <div class="group relative w-full max-w-md mx-auto bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-lg p-6 md:p-8 transition-all duration-300 hover:shadow-xl hover:border-blue-500 dark:hover:border-blue-400"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-white tracking-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Team Settings</h3> </div> <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 leading-relaxed mb-6">Manage your team permissions, invites, roles, and integrations here. Changes apply instantly across all team workspaces.</p> <div class="flex flex-col sm:flex-row gap-4 sm:justify-end"> <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors">Cancel</button> <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-300 transition-all duration-150">Save Changes</button> </div> </div>
  • timeon 1y ago
    Every purple-gradient or blue-gradient website.
  • murukesh_s 1y ago
    This is like repeating code without using a function. If you have a nice abstraction - the same becomes cleaner like below. <div class="group card"> <div class="flex items-center justify-between mb-4"> <h3 class="card-title">Team Settings</h3> </div> <p class="card-description"> Manage your team permissions, invites, roles, and integrations here. Changes apply instantly across all team workspaces. </p> <div class="flex flex-col sm:flex-row gap-4 sm:justify-end"> <button class="btn btn-cancel">Cancel</button> <button class="btn btn-save">Save Changes</button> </div> </div>
    • interstice 1y ago
      Isn't this abstraction essentially just.. creating classes?
• philipp-spiess 1y ago
  We actually ended up adding the custom animation-specific data props to all dialog specific custom elements before the release, so the group-*/dialog is no longer necessary but I forgot to update the code in the post. I doubt that changes your mind, though.
• timeon 1y ago
  Not to mention that for every class here there is also definition in CSS that client needs to download.
  • sensanaty 1y ago
    Tailwind tends to be smaller bundle-wise because it will only compile the styles you actually use in the final bundle. The old app I work on, the BEM classes are staggering in their size all combined, whereas the tailwind portions are tiny and importantly barely ever grow in size since the majority of code, old and new, will be using the same "building block" classes like flex p-4 or whatever.
• jt2190 1y ago
  Before Tailwind, every web designer I’ve ever worked with invented their own version of this. Yes, CSS in theory is powerful and has everything necessary to avoid using Tailwind, but in practice CSS has a major flaw: You’re almost required to build a semantic model to get the full power. But this ignores that designers are working with mood and emotion just as much as document structure and information architecture. Capturing these more nebulous concepts as logical semantic rules is very difficult if not impossible. Tailwind just codified what everyone already did: Skip the semantic dance (“Making that text bold would be really cool, but what does it mean to be cool, as a general rule?”) and just create semantic rules like “bold” and “red”.
  • bapak 1y ago
    Have you read the snippet? You have not, because it's a bunch of Tail-wind noise (very apt name) Nothing semantic about .bg-white.
  • zarzavat 1y ago
    This is the complete opposite of what good CSS is supposed to be. The class name is supposed to tell you what it is not how it looks like. Anyone remember CSS Zen Garden?
    • vehemenz 1y ago
      Original CSS spec, for reference: https://www.w3.org/TR/CSS1/#class-as-selector https://www.w3.org/TR/CSS1/#class-as-selector The "good CSS" you're talking about was always the product of convention, and it was never sustainable for big, long-term projects. The CSS Zen Garden showcase only made sense in a world where everyone shared the same document or document structure. Those insane stylesheets depended on the source HTML document's inherent structure, which is the exact opposite of separation of concerns. Inexperienced developers always underestimated the complexity they were adding to their project by using overly abstract classes and hidden structures between the DOM and the stylesheets. Tailwind (or any reasonable CSS methodology even) recognizes these problems and solves them.
      • 1y ago
• mmcnl 1y ago
  I think Tailwind became popular because React doesn't have a good way to combine CSS and JSX in a single file, unlike Vue/Svelte which support single-file components. With Tailwind utility classes you can just add them to your JSX template. React problem solved.