[ComiCSS] Benefits of Tailwind
-
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)
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.
-
Tailwind is sooo great, made me extremely productive when scaffolding layouts and managing my palettes.
I really love it
-
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.
wrote on last edited by [email protected]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.
-
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.
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.
-
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.
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.
-
wrote on last edited by [email protected]
Seems like a lot of supportive commenters didn't try CSS-IN-JS like @emotion/styled, stitches, styled-components. Where are you guys? Why learning alternative names for CSS rules considered to be better, than just using those good ol' "let you do everything what you want"s.
-
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.
-
That's not accessibility.
You think only aria-attributes are accessibility? Most accessible is, what you not need additional tools and interpreters for.
-
You think only aria-attributes are accessibility? Most accessible is, what you not need additional tools and interpreters for.
No, it's of course not just aria attributes. But it's definitely not "how easy can I create user CSS". Accessibility is a term of art, you can't just expand its meaning to whatever you want.
-
you need to know css to use tailwind because it’s basically style= on everything: it’s css with extra steps
Well, it's
classNameon everything
And yes, it's literally CSS utility classes with an extra installation step that you only do once -
No, it's of course not just aria attributes. But it's definitely not "how easy can I create user CSS". Accessibility is a term of art, you can't just expand its meaning to whatever you want.
wrote on last edited by [email protected]Look, if it hinders me in my workarounds for my ADHD while every other framework does less so, then accessibility is worse. Shut up with your trademark gatekeeping bullshit.
Also,
-
Now it is remembering tags for property instead.
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.
-
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.
Yep, a component is a good abstraction level, no point in making life difficult by creating and coming up with names for smaller parts.
-
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.
I guess some people write code, and some people also read and maintain it.
-
Having never used it before, is it that bad?
It's a nicer syntax for inline styles.
If you want to use inline styles everywhere, it's great.
-
It's a nicer syntax for inline styles.
If you want to use inline styles everywhere, it's great.
It's much more than just inline styles. It's also design constants (e.g. color palettes, sizing etc.) and utilities (e.g.
ring). -
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.
wrote on last edited by [email protected]Don’t know about tailwind but I used styled-components and not going back to vanilla css. CSS seems to be designed to be used with HTML, which did make sense back when it was created. Modern web is 99% JS and components composition which does not work well with Vanilla CSS in terms of class name uniqueness, specificity. Also it easy to dumb shit with CSS, like, I worked in the project where we had a lot of legacy global CSS. We had like dozen CSS styles which were adding margin to <label/>, <p> and so on. I mean no classes, just globally. I’ve been forced to add ‘all: unset’ to basically all my new components just to avoid changing global styles and breaking something else. Do not recommend.
-
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
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.
-
I wonder if any colorblind people completely didn't understand this meme
-
Don’t know about tailwind but I used styled-components and not going back to vanilla css. CSS seems to be designed to be used with HTML, which did make sense back when it was created. Modern web is 99% JS and components composition which does not work well with Vanilla CSS in terms of class name uniqueness, specificity. Also it easy to dumb shit with CSS, like, I worked in the project where we had a lot of legacy global CSS. We had like dozen CSS styles which were adding margin to <label/>, <p> and so on. I mean no classes, just globally. I’ve been forced to add ‘all: unset’ to basically all my new components just to avoid changing global styles and breaking something else. Do not recommend.
I tend to build stuff with html css and php only ( all vanilla) and avoid non trivial js like the plague.
I can see your point but for me replacing HTML with js is just wastefull, you leave performance and built in accessibility on the table for a slightly more convenient experience that don't work for me.
