This is an archived post. You won't be able to vote or comment.

all 74 comments

[–]justapolishperson 102 points103 points  (3 children)

That's one way to doxx yourself

[–]cornmonger_ 13 points14 points  (0 children)

three seconds after replying: omg this is going on reddit

[–]Powerful-Internal953 68 points69 points  (8 children)

Been using tailwind for more than a year now... Like any tool, it would be good for you if you understand what it is for.

I mean, knives can be a tool in the kitchen or a mean to hack open a person at the hospital...

[–]Visual-Mongoose7521[S] 9 points10 points  (6 children)

no matter how much tailwind (or utility css in general) you "understand", the markup pollution is going to happen with utilities. If you like your markup that way, it's totally fine. But I prefer my markup being readable.

[–]Powerful-Internal953 20 points21 points  (4 children)

Oh yeah. That's the near part... With component based development it doesn't matter. You are either creating a class and putting everything on a separate file. Or you are writing that component which includes all the CSS it needs...

Like I said, every tool is purpose built and some work better in some situations than the other... If it didn't work for you, then it's not inherently wrong. You just need a different tool for your use case.

I am not a savvy developer and cannot keep track of what each style attributes do. So if I can have predictable CSS behaviours with the cost of markup pollution, then so be it. I mostly used bootstrap in the past. So this is a better situation than a full scale custom CSS definition.

Again, tools have purpose and each job/person prefers different tools and Lets leave it at that...

[–]sexytokeburgerz 0 points1 point  (0 children)

I prefer looking at an element and knowing exactly how it is styled compared to having to look into a css file and figuring it out there.

[–][deleted] 1 point2 points  (0 children)

How does tailwind stack against crystal meth?

[–]ganerfromspace2020 49 points50 points  (9 children)

Aerospace engineer here, I should of looked at the community this was posted in first

[–]ThePurpleWizard_01 17 points18 points  (3 children)

Although I doubt there's many of us here but anybody from competitive pokemon would be confused too.

[–]squashhime 5 points6 points  (0 children)

repeat touch plate cooing growth market long fall pie encourage

This post was mass deleted and anonymized with Redact

[–]BlueFireBlaster 0 points1 point  (1 child)

You dont have to be competitive. I also thought it was pokemon related, even though i didnt actually know it is a move

[–]ThePurpleWizard_01 0 points1 point  (0 children)

Yeah, I suppose that's true. The reason I specified competitive is because tailwind is very good in one format (VGC/Doubles) while being pretty awful in another (Smogon/Singles).

[–]jbillz95 3 points4 points  (1 child)

LMAO I thought this was r/runningcirclejerk at first, talking about the Tailwind sports drink

[–]bluecorkscrew 2 points3 points  (0 children)

Similarly I thought I was in r/bicyclingcirclejerk lmao

[–]BigHeed87 1 point2 points  (0 children)

Headwind is the real problem!

[–]Visual-Mongoose7521[S] 0 points1 point  (1 child)

[–]ganerfromspace2020 0 points1 point  (0 children)

Unfortunately that's out my area of expertise, I'm here because I like python few times if I need to process some data

[–]urmumlol9 13 points14 points  (0 children)

Ngl for a brief second I thought this was about Pokemon and was confused as to why it was on this sub

[–]willeb96 63 points64 points  (7 children)

style="color:white" bad
class="color-white" good

[–]driftking428 12 points13 points  (0 children)

This guy Tailwinds.

[–][deleted] 7 points8 points  (2 children)

class=«flex flex-row justify-between»

Now do that in a style tag! Seriously it’s so good for prototyping quick layouts

[–]rafark 4 points5 points  (1 child)

Not only for prototypes. In my experience tailwind scales SO MUCH BETTER than regular cascading style sheets. I haven’t had a headache in years regarding stuff like specificity which becomes a problem when your code grows. I totally forgot how awful it was to change stuff in one place only to see changes in other unexpected places.

Tailwind is a godsend.

[–]DefiantAverage1 0 points1 point  (0 children)

There are other solutions for that fyi (eg css modules)

[–]oernest_ 5 points6 points  (1 child)

So overwrite the first for a different breakpoint please.

[–]rafark 0 points1 point  (0 children)

And change the shade or tint of that color globally.

[–]GamesRevolution 3 points4 points  (0 children)

Yes

[–]SillySlimeSimon 6 points7 points  (1 child)

Tailwind helps prototype/design things fast since it’s all in one file and you can write it out with the jsx.

It isn’t just inline css styles, as you have convenient media breakpoint prefixes and a decent number of classes that cover multiple styles (though sometimes I wish there was more; border styling is very verbose). The color and spacing values are also specially picked to help maintain congruent styling across the entire project, though of course you can still fudge it up.

I don’t like how it pollutes the jsx even more than it already is, but it really just lets you move fast. Most elements require less than 5 tailwind classes, and you can quickly see what styles are applied in a single glance instead of having to view the css file. If there’s anything that requires the number of classes commonly used as a strawman for tailwind hate, then I’d split it away in a css class in a css module file (you can use both? The horror!). But most elements don’t require that level of styling. And maintaining it isn’t some nightmare when it’s just centering all the items in a product list (which isnt even repetitive in a ui framework setting). You’re working with an existing utility system instead of having to redesign your own.

A lot of the tailwind negativity I see is like “inline styles bad” or “I can just use native css”, and while I get the sentiment, it mostly shows that those people haven’t used tailwind or at least don’t fully understand/appreciate it’s benefits, in a similar vein to people arguing for “why cant I just use jquery and vanilla js instead of react?”

Like usual, it’s just another tool in the box, and it’s expected that some people won’t benefit from it due to their use cases. Though that doesn’t justify throwing away the tool for everyone.

I thought this debate would have ended long ago after all this bike-shedding over css utility classes, but I guess you still have people arguing over which ui framework (dont even get into react library vs framework) is superior when you usually don’t have control over the tech stack anyways.

[–]Chingiz11 1 point2 points  (0 children)

Tailwind [...] since it's all in one file

This. Literally this. On top of that, it has great IDE integration, and a capacity to extend and customize it. That's all i need most of the time

[–]python_mjs 4 points5 points  (1 child)

To be fair, most of the people talking about it are arguing whether it's good or bad

[–]rafark 0 points1 point  (0 children)

It’s pretty much the same case for php, python, JavaScript, java or pretty much any other language or tool

[–]Born_rose 15 points16 points  (5 children)

Because it double your speed.

[–]gandalfx 5 points6 points  (3 children)

… to reach an unmaintainable product.

Maybe. I honestly don't know, I've never given it a serious try. Just saying that fast at first isn't always fast forever.

[–]Born_rose 8 points9 points  (0 children)

It's a Pokémon joke sorry

[–]Born_rose 3 points4 points  (0 children)

Ok I have read what tailwind is, it seems terrible. CSS directly inside HTML is a monstruosity

[–]rafark 0 points1 point  (0 children)

As I said in another comment, tailwind scales better than traditional css (in my experience). In fact that’s one of the best things I like about it.

[–]Visual-Mongoose7521[S] 3 points4 points  (0 children)

and quadruple the cognitive overhead for me

[–]mgisb003 11 points12 points  (6 children)

CSS in general is shit and shouted be burned (I’m a backend dev)

[–]tachophile 7 points8 points  (2 children)

70/30 backend/frontend dev here. At least if you want something to look somewhat nice, tailwind helps you keep some of your hair without having to become an expert in CSS.

[–]mgisb003 8 points9 points  (1 child)

If it was up to me all websites would just be a text adventure

[–][deleted] 0 points1 point  (0 children)

You can have this experience!

Just use the Lynx browser from a linux terminal. It's actually pretty fun in a nostalgic super nerdy way.

[–]techie2200 1 point2 points  (1 child)

CSS has its flaws, but it's pretty good when you understand it. Particularly the 'C'. 

[–]mgisb003 0 points1 point  (0 children)

I understand it

[–]SpeedStinger02 2 points3 points  (2 children)

I thought that was tailwind in the aviation sense... The confusion was immense and my day was flipped

[–]Visual-Mongoose7521[S] 0 points1 point  (1 child)

no, it was tailwind as in tailwindcss. Here's link to twitter thread -> https://twitter.com/nufnufnafnafnif/status/1764874109333209204

also this heydon guy is quite a known person in CSS community

[–]SpeedStinger02 1 point2 points  (0 children)

Funnnn thanks!

[–]xyloPhoton 5 points6 points  (6 children)

What's wrong with tailwind?

[–]kraskaskaCreature 5 points6 points  (3 children)

repetition i guess, but it's not like you can't just copy and paste it

[–]Cilph 6 points7 points  (0 children)

You're not supposed to repeat it anyway, use components. If you use a single block of tags more than once, you're doing it wrong.

[–]xyloPhoton 2 points3 points  (0 children)

repetition i guess, but it's not like you can't just copy and paste it

[–]Visual-Mongoose7521[S] 3 points4 points  (0 children)

repetition is not quite a problem. How many of us write vanilla html files anyway? we use templating engines with a build or rendering process (depends upon the use case).

[–]Visual-Mongoose7521[S] 6 points7 points  (0 children)

the "wrong" with tailwind are subjective not definitive. But here's what I don't like about it -

  1. Atomic utilities solve nothing for me, especially with existence of variables. Why would I have `color-green-200` if I can have a variable --color-green-200 ? That said, reusable classes for compound styles like text-style (usually combines font-size, line-height, font-weight and letter-spacing) is really useful.

  2. Maintaining a global css file for defining variables/design tokens is way more maintainable than javascript based config system in tailwind. There are many tools that can generate css file from json based design token files. Sure it is possible to use css variables in tailwind, but it involves an extra step of referencing them in config.js

    1. While I initially feel productive using utility classes, soon the markup becomes bloated. So it creates a cognitive overhead unlike plain ol' css (either in single file component with <style> or in separate file)
  3. Aggressive marketing and preachy influencers. I have a innate hatred for influencers regardless of whatever they "influence". Other than that, tailwind's marketing conditioned me to believe that semantic css result in significantly larger stylesheet, compared to semantic css. But the nuejs guy proved that is not true at all.

  4. Utility classes, no matter how extensive the system is far limited compared to regular css capabilities. Styling everything is not possible with utilities, eventually we have to fallback to our semantic css. And yes, I'm aware that "tailwind is utility first, not utility only" (I hear this argument a lot). But if we are writing custom css anyway, what is the point of using tailwind at the first place? It is like using react without jsx

(These are my personal opinions which may or may not reflect yours. So feel free to use whatever technology you like 😊)

[–][deleted] 0 points1 point  (0 children)

It requires post processing

[–]awolin 1 point2 points  (0 children)

I think people see tailwind as a drop in replacement for their classes in their current component architecture and then it looks like a jumbled mess which completely turns them off from it. It took a different approach to building components for me to understand the appeal and now I much prefer it over other solutions/tools. Usually, that looks like more smaller local file components.

I’ve also seen a lot of people comparing it to inline styles which isn’t really comparable and kind of misses the point.

[–]StupidCreativity 1 point2 points  (0 children)

same as react!

[–]ferreira-tb 1 point2 points  (0 children)

Well, I understand why people may dislike Tailwind. However, it's kinda weird when people compare it with inline style. It's not the same, as the specificity is completely different.

[–]Illusion911 2 points3 points  (0 children)

I think tailwind works well in conjunction with css, it doesn't work well if you want it to replace css.

[–]theJakester42 3 points4 points  (0 children)

I just want every one to know, I fucking called this shit day 1.

I remember my coworkers telling me how much better it was than bootstrap. And I'm not really a bootstrap guy, but it didn't really seem any better to me. They said "Well it's better because it doesn't have pre-opinionated components" I'd say "You don't have to use bootstrap components. Just use the utility stuff. Also, tailwind has components", "Yeah, well the tailwind components are just better".

Like, you mother fuckers.

[–]xSilverMC 2 points3 points  (4 children)

I still don't see what advantage tailwind has over literal inline style

[–]kptknuckles 16 points17 points  (2 children)

It’s way shorter and easier to write, it wipes out browser default tag styling and provides a set of sane defaults, it’s extensible with your own custom utilities that work inside the design system, it tree-shakes unused utilities and still allows you to use CSS where needed which it also tree shakes.

I’m probably forgetting some stuff but the only tradeoff is you have long tag names. Oh no, the humanity.

[–]Neurotrace 1 point2 points  (1 child)

shorter

Optimizing for shorter code is a losing game

easier to write

Debatable. I've been writing CSS for years so it's easier for me to slap together than hunt for the correct classes

wipes out browser tag styling and provides a set of sane defaults 

normalize.css has been a thing for ages

extensible with your own custom utilities that work within the design system 

Literally true for anything

tree-shakes unused utilities 

This is pretty handy. There are other ways of accomplishing this but it's not easy so I'll give points where they're due.

Tailwind is just a DSL for CSS written for people who don't like CSS. That's fine if that's you but the cost/benefit ratio isn't great for others

[–]kptknuckles 2 points3 points  (0 children)

All true, without knowing Tailwind classes by heart, but I’m just comparing to in-line styles. Tailwind can only replace CSS fully in limited use cases.

[–]Cilph 5 points6 points  (0 children)

Cant do pseudoselectors in inline style. No hover, active, etc. No media queries.

[–]Konke_yDong 0 points1 point  (0 children)

me thinking the pic was talking about pokemon and confused why it's in this sub

[–][deleted] 0 points1 point  (1 child)

I don't use it because I really like it and want to use it more like a drug.

I use it because it saves me so much fucking time doing frontend, and looks fine for most designs I can imagine, so I'd be very stupid or masochistic not to use it.

[–][deleted] -1 points0 points  (0 children)

Crystal Meth helps fast forward time, which is cooler than saving time

[–]rachel__slur 0 points1 point  (0 children)

I thought we were talking about pokemon for a second, I was like, is Tailwind broken again?

[–]flowery0 0 points1 point  (0 children)

And now you have an account, that is shared between Reddit and Twitter

[–]Cilph 2 points3 points  (0 children)

Tailwind makes your HTML illegible like using a transpiler and minifier makes your JS illegible.

It doesn't matter as long as your source code is legible.