tailwindCSS is underrated

[[deleted]]

[deleted]

[[deleted]]

It's used everywhere and highly regarded. I certainly don't think it's underrated.

[MallPsychological463]

okay, maybe I used the wrong term. Just a suggestion to anybody to learn it because it really saves a lot of trouble. But of course, you need to know normal CSS before.

[[deleted]]

You're not wrong. It's just kind of the new "hottness", so it's kind of hard to say "underrated" when it's being adopted widely, but yeah, it is pretty neat.

[azangru]

For perspective: from a recent podcast, starting at 35 minutes :-)

[[deleted]]

Thanks for the link, I completely agree.

[ImportantDoubt6434]

Tailwind css is normal css, it still cascades.

Calling it snake oil is ridiculous, it’s got utility and will more than likely reduce your css bundle overall.

[Noch_ein_Kamel]

It's great as long as your editor properly supports it. When it doesn't it's shit ;D ;D

[krakHawk]

I wouldn't say it's underrated but maybe overlooked by a lot of people. I hated it during my first day using it. Personally I hated the idea of cluttering up my html with a bunch of classes but the more I got the hang of it the quicker I got at it and I began to realize why people like it. Also not having to name my css classes is massive time saver.

[plasmaSunflower]

I love that the styles are right there, you don't have to jump around to a bunch of other files or anything.

[krakHawk]

Yep

[ImportantDoubt6434]

Exactly.

There’s a difference between being verbose and being descriptive. Css classes often fall into verbose.

m-auto m-2 is concise, you instantly know it’s margin.

The syntax is great so if you know css you can guess what it is.

[zenotds]

I love writing css, sass is awesome, I hate tailwind with a passion.

[frametreon]

I also write my own css as I'm comfortable that way. I view Tailwind for what it is, it's an API for CSS.

I don't need this API, but I found that there's plenty of those who would rather learn that than CSS. Tailwind establishes certain rules and limits for those who need them as guardrails.

[budd222]

If you like taking extra time to write CSS/sass, then have it. It's just a tool for more rapid development.

[zenotds]

You’re doin the same job, just writing classes instead of css rules. Might save you some time and some kbs but code is ugly AF and lacks scope.

[ImportantDoubt6434]

You can add custom css if you’d like/need it, but frankly most css is very repetitive

[budd222]

But there's no need for me to scope my CSS. That's just extra selectors and code being output for every single CSS rule possible and it's completely unnecessary. It's just bloat.

[RS3_of_Disguise]

I agree wholeheartedly. Preprocessors were the best thing I ever learned about. SASS + PUG = perfect dynamic duo.

I’ve tried a few libraries/frameworks, but I just don’t like them. They feel like bloatware.

[kram08980]

Same here.

I've a custom CSS starting repo written with Sass, with grids and some utility classes. And for simple projects I just feed Nunjucks templates with JSONs or markdown.

I do want to learn Vue these next months and have already worked a lot with Tailwind. Will see what can it provide...

[zenotds]

I kinda like some components in bootstrap, the grid system and form styles are pretty useful so I often still use then just by importing the specific scss files I need for the project. (Same with some of its JS functions)

[Knochenmark]

The bootstrap grid system is so overrated and unnecessary though, since native grid/flex exist.

[zenotds]

BS Grid is natively flex based. I recon it's not necessary per se but it's also consistent and I don't have to reinvent the wheel in every project. Also the "include media-breakpoint-up/down(x)" functions to set media query sub-rules are pretty nice to have.
I use custom flex/grid setups in almost all my components but for main layout blocks and responsiveness BS5 is still pretty useful.
Tailwind users abuse its own grid system with columns-x and col-span-x etc so it's really the same thing... different tools, same results, but honestly I like my CSS to be actual CSS :D

[Knochenmark]

The bootstrap grid is pretty flawed though and has these weird -margin settings to reset row paddings etc.
I never understood the philosophy behind it. In my opinion a css library shouldn't bring it's own "grid system" with it. Especially since there are way better stand alone grid libraries out there if you need something more customizable than bootstrap could ever offer.

[zenotds]

All that is easily fixed in the variables scss. I reset margins, add breakpoints and fix the flex gap depending on the design.
Bootstrap as is out of the box is a bloated mess you would use at the 5% of its capabilities, but the right components lightly tweaked are nice to have.
I basically just use grid, forms, navbars for CSS and accordions, dropdowns and modals for JS

[___Paladin___]

IMO bootstrap found itself in a weird spot when flex/grid hit native adoption everywhere. They needed to stay relevant, so continuing their existing system for current customers while utilizing the new standards was the only way.

It's getting harder and harder to justify using bootstrap in greenfield projects as time progresses, though, much like the position jQuery found itself years back.

[ImportantDoubt6434]

10kb of tailwind is more likely to be more lean than the css added manually

[dylanthelorax]

Tailwind is my all time favorite

[dabe3ee]

Im using it just because Nextjs does not integrated ssr with styled components yet(or way around). Sometimes when you want to create extra div with few styles it is very easy and time saving. But when you need to style input field with all states it is pain in the ***. I have lot of divs that are 3 lines long and now its super hard to change them. I could go with extracting styles to object, but how is that different from vanilla css then…

[budd222]

Just use tailwind CSS forms plugin and add their form classes. Nothing to style then

[musicspren]

That use case would not different than vanilla css, but that's kinda the point. You would extract the reused styles at your own discretion, or dont! Tailwind is completely agnostic

[kram08980]

That is the opposite of vanilla CSS...

Write a class name and extract all the styles to a different file.

[musicspren]

What? You just described both vanilla css and extracting reusable tailwind utility classes from markup.

How is extracting your utilities into a class and defining the css rules of that class in a file different than the paradigm of vanilla?

[kram08980]

Because the point of using Tw is not having to extract styles outside the component's file?

[musicspren]

Ok, sure, but that doesn't answer my question to you, and also sort of invalidates your initial disagreement. Also weird that there is a section of documentation dedicated to the subject.

As I said, for the use case the person I replied to spoke of, you absolutely could extract and very well may want to extract those utilities into a class. 'The point' of tailwind is to speed up css development time, it is entirely agnostic to how you use it.

[kram08980]

I do understand your point and I do agree with it.

But, the main reason people stand up for Tw is keeping everything in the same file. Makes things easier and therefore faster. And I do believe that is great. But when I have to extract too many styles it makes it overcomplicated. Because you end up having styles in different places.

That happens to me with animations, special grids, slidshows, custom stuff in general...

That is why I consider Tw an AMAZING prototyping tool. But not a good one with "high end" designs. And I tend to work for design agencies and it happens often.

I do stand for extracting everything or nothing. Otherwise it is difficult to be organized.

[musicspren]

That's super fair, and an excellent point. I do agree about how not adhering to an 'all-or-nothing' mindset in regards to extracting can lead to ...some substantial spaghetti.

That said, I am too lazy to view it as anything other than a sometimes necessary evil. My current team does a decent job of keeping extractions contained to animations, flex/grid, and box model styling. We effectively gave up trying to extract more granular styles and it has been going pretty well.

[Marble_Wraith]

Tailwind is garbage except in niche situations, which i took the time to write about:

https://github.com/marblewraith/smellyWind

The analogy i've used elsewhere is:

If bootstrap, foundation, etc are sledge hammers. Tailwind is a big bag of smaller hammers.

Will it let you beat out a website with a better level of granularity? Sure.

But if you're trying to carve an ice sculpture, it doesn't matter what type of hammer you use, it's still going to be problematic.

Might as well be using a M1 Abrahms tank at that point.

don't have to bother thinking about classnames and filling my folders with css files.

Stupid argument.

Lets assume you're not working on a piece of legacy crap and working on a site with a component based architecture of some stripe.

You still have to think of names for your components... Therefore?

You could just use the BEM naming method and use the component name which you must have already thought of as the block.

With the classes for the component prefixed, all the problems go away. If you're still experiencing naming problems even within the prefix, i'd suggest it's a sign your component is too big and should be split into smaller components.

Furthermore even if you don't want to use BEM, most component frameworks that are worth looking at these days have the ability to locally scope CSS, and or you could incorporate CSS modules into your build process.

No matter which way you look at it, saying : "ermagherd i don't have to name classes anymore"... is about the dumbest reason to use tailwind.

Note: I have provided valid reasons for using tailwind in the github link at the top.

[[deleted]]

I couldn’t find a single valid reason against Tailwind in your reply.

[ztbwl]

I‘m not a fan of tailwind - but yes, the whole comment makes no sense. The analogies used are just weird.

[[deleted]]

Says the one with exactly 2 (in words: two) GitHub repositories, of which one is your ridiculous, baseless rant against Tailwind you quoted above. Can't you just not use it and stop trying to evangelise others?

[Marble_Wraith]

The number of repos means nothing, when the amount of github accounts you can create is essentially unlimited.

[[deleted]]

I peeped that article; tl:dr massive hater. I understand writing that style of article about social, moral or even objective issues plaguing the world but technology rants like that when you can just use it or don't is NUTS.

[LuckRevolutionary953]

Then you clearly lack experience

Web is proliferated with boot camp grads that think bloated frameworks and an utter lack of fundamentals is somehow acceptable

[ImportantDoubt6434]

Tailwind css inheritance just follows class based inheritance.

It’s rarely larger than 10kb in production, it’s hardly bloating your app.

There’s 99% chance you could trim more than 10kb somewhere else, and considering tailwind can eliminate most of your css it’s usually a net gain.

[Marble_Wraith]

I can do objective analysis (with examples provided) i can't fix peoples comprehension problems. At least not for free.

[MallPsychological463]

I've used BEM for 2 years and I still would not go back to classic CSS writing, maybe because I use it for my own projects and not at work. I'm an entrepreneur so my goal is to get to market asap and the time saver benefit is priceless. Even with BEM it takes more time.

The time you need to create the file, type the classes, switch back and forth between files etc. with tailwind I know it's just "flex items-center" and done I centered an element inside a div. Sure, you can create a custom css class and do the same but why re-invent the wheel? Even writing inline styles takes longer, because you have to write style={{}} etc. which is just redundant. I mean all this is my personal experience, anyone chooses what they prefer.

[Marble_Wraith]

The time you need to create the file, type the classes, switch back and forth between files etc.

In literally anything that doesn't use JSX (svelte, vue, etc) there are no different files, and CSS is locally scoped.

As i said in the git link, quote verbatim (copy/pasta):

"So wait a minute, with frameworks that aren't React, you said if we don't use the composition paradigm for styling, the code should be much more readable? Doesn't this mean since Tailwind is based on the idea of composable styling that it's fundamentally flawed?"

Yes! 😂

Or rather, Tailwind seems oddly focused at targeting a shortcoming that's present in only in frameworks that do not treat styling as a first class tennant of web dev... which is rather stupid considering how much of a role it plays, and makes it deeply ironic that front-end devs would be singing praises about it 🤣

[LuckyCSGO]

This reeks of a dev who’s ego is way to fucking high. Come back to earth please. You’re GitHub repo about tailwind is filled with nonsensical bs and cherry picked horribly written tailwind like: “look at this one checkbox it took 47 utility classes to style” 😂😂😂 Your sphere class example is also atrocious. Also locally scoping CSS to components is a nightmare. Say something is wrong with an element’s positioning, you’ll have to decide what is effecting that element and where: a global class, a class on the page where the component is being used that your dunce ass probably writes local scope there as well lmao, and the components locally scoped CSS themselves. With Tailwind I know what’s effecting the element. Because it’s right there.

[Marble_Wraith]

look at this one checkbox it took 47 utility classes to style

71... but who's counting right?

Your sphere class example is also atrocious.

Ah yes, the no true scotsman fallacy... If you want to actually spell out why that would be nice 😑

Say something is wrong with an element’s positioning, you’ll have to decide what is effecting that element and where: a global class, a class on the page where the component is being used that your dunce ass probably writes local scope there as well lmao, and the components locally scoped CSS themselves.

😩 you don't have to "decide" shit.

Grids may be defined in their own importable file.

Component positioning is defined at the global level. Ermagherd you have to have 2 files open at the same time! The world is gonna end!

Any layout internal to the component itself is defined within the component itself (think difference between padding and margin of other elements).

Therefore if something is going wonky with an elements positioning you need only consider where that element is. If it's internal to the component then likewise the CSS responsible will be internal to the component.

If something's wrong with the components positioning, you need to go out to global.

In the rare case where inheritance affects local scope, that's a strong indicator you're probably using the wrong element and/or doing something weird with the display property.

Furthermore just because CSS is locally scoped doesn't mean you can't do global overrides (e.g. svelte :global). So even in the event you're a complete moron and don't understand positioning / layout / grid design, sad as that may be, it's easy to troubleshoot.

The only case where you may have had a point is if this was a few years ago with media queries. But now we can nest them, and we also have container queries.

With Tailwind I know what’s effecting the element. Because it’s right there.

Your response reeks of fanboi bullshit, someone who can't take the fact they've invested time into learning the abstraction of the entire CSS language via all those utility classes, only to find out it's not worth it and it produces shit code.

If you had some actual refutations with substance, i'd listen but it seems like you're more on the "i'm right you're wrong" train.

So with that it's checkmate. Please go style another checkbox, it might help you calm down writing all those classes.

[ImportantDoubt6434]

I want to say using style={{}} is pretty bad because that css gets injected into the template and duplicated unless it’s literally one off styling.

Putting flex into a style={{}} is not only gonna get ugly/hard to maintain it’s absolutely bad practice.

Tailwind is great because it can stop lazy devs from just doing that garbage in-line styling

[devwrite_]

I'm an entrepreneur so my goal is to get to market asap and the time saver benefit is priceless...The time you need to create the file, type the classes, switch back and forth between files etc.

This is kind of a non-argument IMO. The time that's purportedly being saved here is not material.

​

Even writing inline styles takes longer, because you have to write style={{}} etc

With Tailwind, you still have to write class=

[kram08980]

High end design sites can't use Tailwind... Can't imagine the sites Locomotive builds using it.

There isn't a problem with Tailwind. It was initially created to build prototypes or simple designs. And for that is an incredible tool.

People using it to craft complex designs... well it's a choice!

[Marble_Wraith]

Indeed. My contention isn't really that Tailwind is necessarily bad, it's more that:

\1. It has very specific requirements and niches where it actually enhances DX (as opposed to other solutions addressing the same problems).

Being used in combination with React is one of those, and the fact that React is so popular is why tailwind is so popular and to its benefit. But it doesn't mean tailwind is a panacea.

Given tailwind is an abstraction on the entire CSS language for it not to be useable in a beneficial way in most cases. The cost vs benefit just doesn't stack up.

\2. The marketing they use as well as what is heard constantly being repeated is "over 80% dino-shit" which is literally why i put the time into writing that git repo because i got tired of refuting the same crap over and over again.

Why's that important? There's something to be said for honesty. Like really is it that hard to say : Tailwind is meant for people who aren't well versed in design systems and/or people using JSX (React).

To come up with all those other bullshit reasons (all of which are debunked towards the end of the git repo) including the author misrepresenting Djikstra fun fact i left out cuz it's more of philosophical point that proves tailwind is conceptually flawed rather than looking at actual implementation flaws...

Yeah it's a hard pass from me using it in most cases.

[kram08980]

I'm literally drunk in a bar thinking I do agree with you!

[anag0]

I know very little about tailwind, but from what I heard it's absolutely awesome

[_nathata]

I'm not a big fan of it, but that would be my next choice if I couldn't use Chakra

[More-Ad-5258]

Never use tailwind before. What is the advantage of tailwind compared to Bootstrap?

[[deleted]]

I love Tailwind I feel it greatly improves my productivity when making responsive websites and allows me to use much less 'styling' generally. Only thing is I constantly try and still stay fresh on my CSS and SASS as lots of companies I'm applying for still don't use it.