121–130 of 202 posts
Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.
I doubt that changes your mind, though.
Earlier quoted context omitted.
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…
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.
Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.
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
I'm never gonna argue learning proper CSS wouldn't be better, but Tailwind is by far the path of least resistance for someone that has no interest in writing frontend for a living. It's like putting legos together, it requires very little thought to get from nothing to a decently looking website.
The world would be a significantly better place if someone could throw a small mountain of money at the Tailwind folks so that they can stop worrying about money and simply make the full tailwind experience freely available. There are so many lost opportunities for deep integration with other projects. Kind of like how Jeff Bezos threw a bunch of money at 37signals at some insane valuation, which helped them complete…
The “full Tailwind experience” is already freely available. What “lost opportunities for deep integration” is a frontend CSS framework missing? Tailwind Plus (the commercial product) is like buying an off-the-shelf template. It’s just a collection of themes and pre-built components — useful for devs who want to get started quickly on a project, but it’s cookie-cutter and can easily be replicated by anyone with Tailwi…
Earlier quoted context omitted.
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…
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 philosoph…
Inline css
1. Can’t use media queries (responsive design).
2. Gets you to specificity hell - you loose ability to cascade.
3. Does not follow any system or reuse of values.
4. Values can’t be centrally changed. Utility clases are still classes - when you change class value it changes everywhere where the class is used.
5. Its verbose. Utility classes can have multiple css rules.
Conceptually it might seem that inline css is similar but thats just feeling. Functional css (utility classes) are about composing classes with simpler (one purpose) behaviour together to create complex behaviour.
Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.
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
Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.
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…
Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.
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
This is not how custom functional css codebase looks. In custom projects you change the system/configuration to fit the project. You create your own utilities for example you wont have “text-lg sm:text-xl font-semibold tracking-tight” but will have class “font-heading-2”. Similarly you will create button/input classes that have you basic styles.
Generally you start with just simple utility classes inside html and go from there and where it make sense or its too complex you separate to more complex class. You end up with short css file that only has these special components and none of the basic stuff.
For most elemets it ends up like “flex justify-center gap-4”. In BEM i have to invent “nav-secondary__header” put it in correct place and hate myself when i need to change it to “flex justify-beween”.
Tailwind popularised functional css but is also aimed at masses/noobs. Somehow some of those concepts also resonated with some experienced users.
Earlier quoted context omitted.
I believe it's regular old css. The :has() pseudo class. https://developer.mozilla.org/en-US/docs/Web/CSS/:has
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; }
Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.
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 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/ with tailwind naming conventions.