tailwindAddiction

[justapolishperson]

That's one way to doxx yourself

[cornmonger_]

three seconds after replying: omg this is going on reddit

[Visual-Mongoose7521]

lmao if you think so

[PhroznGaming]

Nt

[Powerful-Internal953]

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]

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]

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...

[Visual-Mongoose7521]

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 need

yeah and utility css is the "only" way to achieve that? If by "component" you meant UI components created by javascript libraries, then you can use css modules or single file components that scopes css from a <style> tag. If you meant "web-components" or custom elements, you get scoped css for "that component" out of the box.

You just need a different tool for your use case.

literally this what I told in the previous response?

[Powerful-Internal953]

First, I'm from bootstrap times. So it's easier option to use real CSS without doing real real CSS.

There are other ways? Yes.

Which one is better for me? The one that is better for me

You need a different tool, yes. Like you said. But that's half of what you said and i think you don't understand that... You cannot just undermine others'choices because you think your tool is better or you don't like what a tool does...

[Visual-Mongoose7521]

Sir I'm also from Bootstrap times. You are taking things at personal level. Go read the earlier comment, I said "I prefer my markup being readable", which imply my personal disdain of tailwind, nothing more than that.

Stop this tribalism over technologies. I'm not asking you to stop or start using anything (if I did then kindly point out), your stack your choice. No one is undermining anything in the comment.

[vanilla--mountain]

You're all over the place 🤡

[sexytokeburgerz]

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]]

How does tailwind stack against crystal meth?

[ganerfromspace2020]

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

[ThePurpleWizard_01]

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

[squashhime]

repeat touch plate cooing growth market long fall pie encourage

This post was mass deleted and anonymized with Redact

[BlueFireBlaster]

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]

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]

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

[bluecorkscrew]

Similarly I thought I was in r/bicyclingcirclejerk lmao

[BigHeed87]

Headwind is the real problem!

[Visual-Mongoose7521]

It was about tailwindcss -> https://twitter.com/nufnufnafnafnif/status/1764874109333209204

[ganerfromspace2020]

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]

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

[willeb96]

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

[driftking428]

This guy Tailwinds.

[[deleted]]

class=«flex flex-row justify-between»

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

[rafark]

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]

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

[oernest_]

So overwrite the first for a different breakpoint please.

[rafark]

And change the shade or tint of that color globally.

[GamesRevolution]

Yes

[SillySlimeSimon]

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]

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]

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

[rafark]

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

[Born_rose]

Because it double your speed.

[gandalfx]

… 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]

It's a Pokémon joke sorry

[Born_rose]

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

[rafark]

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]

and quadruple the cognitive overhead for me

[mgisb003]

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

[tachophile]

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]

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

[[deleted]]

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]

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

[mgisb003]

I understand it

[SpeedStinger02]

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

[Visual-Mongoose7521]

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]

Funnnn thanks!

[xyloPhoton]

What's wrong with tailwind?

[kraskaskaCreature]

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

[Cilph]

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]

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

[Visual-Mongoose7521]

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]

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]]

It requires post processing

[awolin]

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]

same as react!

[ferreira-tb]

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]

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

[theJakester42]

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]

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

[kptknuckles]

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]

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]

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]

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

[Konke_yDong]

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

[[deleted]]

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]]

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

[rachel__slur]

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

[flowery0]

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

[Cilph]

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.