As one who creates usercss to fit pages to my needs, Tailwind is second worst.
Programmer Humor
Welcome to Programmer Humor!
This is a place where you can post jokes, memes, humor, etc. related to programming!
For sharing awful code theres also Programming Horror.
Rules
- Keep content in english
- No advertisements
- Posts must be related to programming or programmer topics
A very colorblind chart
Tailwind is for people that don't know how to use CSS properly. There, I said it.
Ngl I love tailwind, I've been through so many different css paradigms
- separate css files: why did we ever do this, if you've ever used kendo's css stuff you'll understand how unfathomable hundreds of thousands of lines of css with complex rules is. Identifying all the things that affect a single component is the work of dozens of minutes at minimum, sometimes hours, you have to understand every nook and cranny of the css spec.
- inline styles: fine, but verbose and requires object spreading, harder to compose, theming is tough and requires discipline to be consistent in your theme conventions, almost impossible to also theme imported library components
- module.css with imported classes: my go to outside of tailwind
- scss: I actually really like scss but it exacerbates the complexity and mystery of css, great for small projects but terrible as projects bloat
- bootstrap: basically just worse tailwind, providing only components and colors
That's all I can think of right now, but tailwind is my preferred way to style a new project, I love how easy theming and style consistency is
I've never quite understood how adding all these HTML classes to a page is supposed to be clean. Just do a decent job of organizing your code and it's honestly not that hard to keep from breaking styles unexpectedly. This is the part you tell me "well that only works for small projects". Not really, it works when styles are managed carefully. I've worked on fairly large sites with what modern standards would call "bad" css practices and it was fine, we just had an understanding that some devs were frontend (I was lead for a couple years at this particular company I'm thinking of) and some were backend. The backend people botched styles every time so we forbade them eventually. I think that contextless type of "help" is where people get the idea that you have to have a css setup that prevents people from breaking anything unexpectedly. CSS just gets no respect. You wouldn't let a frontend guy go changing your core backend code so why is the reverse ok?
I like css modules too but I totally disagree that css is irreparably broken and needs some system that discourages the cascade of styles in all cases.
Would be fine if it used a custom parameter for their tags. Using class names makes for bad accessibility.
How are class names relevant for accessibility?
They might mean class names can't help screen readers parse meaning, whereas using the correct tag can?
Tailwind is like going back to in-line styles. If you add font tags you are back in the 2000’s
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.
Having never used it before, is it that bad?
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
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.
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
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
Oh wow, a framework that needs a framework.
Fair enough. What ui framework(s?) on tailwind do you like?
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.
You can still use classes if you want to...
Yes but it's also expressly discouraged in the documentation so...
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.
yea it's redundant as hell if not combined with UI libraries that extend it like shadcn / daisyui
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.
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
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.
This is very informative. I avoided Tailwind for the reason you mentioned, but look closer now that I know the difference.
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.
Tailwind sounds cooler than CSS, which, I presume, would be important when you're applying at a startup.
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.
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.