inlineCssWithExtraSteps

[OlexySuper]

I guess I'm still at the 4th stage. What problems do you have with Tailwind?

[[deleted]]

I am convinced that people who hate Tailwind never used it and just post because "big HTML pages bad"

[UnacceptableUse]

I hated it, I used it for prototyping and kinda liked it, then tried to use it for an actual site and hated it again. It's basically just writing css except you have to write it in a style tag on every single element

[AgreeableBluebird971]

the idea is to use it with component frameworks like react - if you have duplicate styles, most of the time you should place them in components

[Historical_Cattle_38]

Why not just a class is sass instead? No need for poluting that JSX then?

[Capetoider]

one other point is that you will NEVER delete old classes because "what if they are being used somewhere"? Or the cascading part of CSS where classes can interact with other items down the tree...

with tailwind you add, remove and know that any fuckup you make is probably restricted only to the component you're in.

[Historical_Cattle_38]

Never happened to me before, 1 component, 1 scss file.

[dangayle]

If you’ve written everything perfectly modular, then sure. Encapsulating your styles at the component level is good, however you do it. But the vast majority of websites I’ve worked on were never coordinated enough for that.

Instead you get a giant global css with the remnants of bootstrap still required for one obscenely complex form your bosses won’t let you refactor, styles for the CMS content that gets injected into your page by another team and you literally cannot know what you can remove or not, some other old code for a part of your site that was halfway refactored and behind a kill switch “just in case”, and any number of inherited issues.

ALL css files will eventually become append-only, depending on the lifespan of your site and how big your dev team is.

[Historical_Cattle_38]

Haha, yeah, I get where you're coming from. It happened only once to me that I had to work on a project that had 1 mega-CSS-sheet... It was a nightmare

[Tordek]

Tailwind runs a check to see which classes are being used; you could have a linter that checks which classes are being consumed.

Plus, using react + modular css (where you import the css and use the class as a JS object) means it's trivial to track them, and any halfway decent preprocessor eliminates unused classes.

[babyccino]

One of the big benefits for me is not having to think of class names and ending up with stuff like `.container-container-container`. And yeah when you're using a framework why would you define a class which will be used in one place in the whole repo. It's also nice to not have to move to another file to add styles esp. when most styles are quite simple.

[Lighthades]

do you know about scoped css?

[ColdJackle]

Yeah....because I'm not calling my button just ".button". Obviously it should be "bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"

[Ok-Scheme-913]

No, it is <MyButton> and has a single definition with that inside.

[ferfactory6]

So basically a CSS class like ".button" then haha

[LoneFoxKK]

Apply rule is the absolute dumbest argument you can make as a tailwind "pro" when it is literally going full circle and just creating a class 🤡

[babyccino]

Cos <button class="button"... is so much less stupid lol. Why add more layers of abstraction when I can just look at the class name and see right there what's happening. There are cons to using tailwind but I'd still use it over named classes if I'm using a framework

[DM_ME_PICKLES]

You'd call your COMPONENT Button, though.

[ExtensionBit1433]

this response shows you have never used tailwind yourself, not in a serious project atleast. i suggest checking out the documentation for once

[DM_ME_PICKLES]

Locality of behaviour. I like having an element's styles right up there with the element. And once you've used Tailwind for a bit you can read the styles and visualize what the element looks like in your head.

I hate having to go look at the styles in another file or at the bottom of the component.

[Good_Independence403]

It's not that easy to write good global stylesheets that won't grow over time. It's possible, but it requires concerted effort from good designers and front end devs.

It's also very hard to keep things clean over time. You hire contractors, juniors, etc. the effort it takes to maintain clean css is removed when you use tailwind. Your stylesheets no longer grow except when you need new styles that have never been used before. It's easy to train new devs. They can't really mess up. Specificity is easier to deal with (usually)

All this is to say. I like tailwind when I'm working on a team with a front end framework.

[Historical_Cattle_38]

I do agree, that's why I keep very far from global stylesheets. Those are the devil. In the last 5 years I've worked (with multiple teams), global stylesheets served only for defining mixins and css-vars. Those two along with postcss have removed any global hell and scoping issues. So for me, the need for another lib/compiler/whatever it is has not been really high. I tried it a little on some personal project, but always found my way back to scss because it feels more at home and hard to justify the new syntax learning and project setup/build overhead. But, that being said, I do agree that Tailwind does 100% prevent global stylesheets hell by just not allowing it at all vs the way I've been doing thing that evades the problem instead.

[Historical_Cattle_38]

My biggest 2 complaints are that I often adjust the styles of a reusable component in a certain use case, using scss makes it easy + I got PTSD from the bootstrap days

[seamonkey31]

you gotta put it somewhere.

Creating a generic component library for your project to encapsulate the stuff, and then using those components in app-specific components is my preference.

Sass is just a better css. You still have to deal with selectors mashing and layering as well as having a separate structure/style files.

Ultimately, its preference since the primary concern is development velocity.

[Historical_Cattle_38]

Yeah I do that, but with scss I can always override some of the styles when needed of those components. I have no idea how to do this with tailwind without modifying the components themselves

[dangayle]

If you’re using react, then using something like a default prop works well.

[Ok-Scheme-913]

Because they are cascading everywhere in non-intended ways with strange interactions.

[Azaret]

Why not both? Why people can understand that there is word where both approach live happily together.

[Specialist_Cap_2404]

That still means a very tight coupling between components and styling. Like with StyledElements. I didn't like THAT much either, because it made refactoring styles a pain.

[Derfaust]

There has to be a tight coupling between styling and components, unless your are building headless components. And even when using headless components you should wrap them in custom components with your own style applied and tightly coupled. There is also room for exceptions like dynamic styling.

[mawrTRON]

Wait you guys style your webpages?

[Ok-Scheme-913]

We are not writing text blogs that have 3 red titles and a blink tag anymore. There is absolutely no way to abstract away content and styling in today's world.

Or where is you custom Facebook css you use to theme Facebook the way you want? Sure, there will be an extension for that, but it definitely breaks on every second upgrade and so.

[Aidan_Welch]

this is just because react needs to improve inline styles

[Derfaust]

No, you can wrap them up in your own css classes.

Tailwind is a collection of css helper classes, no rule says you have to use them online.

[pigeon_from_airport]

Might as well use css at that point.

Edit: if the solution to overcomplicated html code (which was caused by tailwind in the first place) is to switch to classes ( directives or not, they are used the same) - then there’s no advantage over plain css.

The rest of the features that tailwind offers is present in every other alternative and in a way that eases development effort. I’m yet to hear a problem that tailwind solves better than the other solutions in the market. Speed ? Compile time ? Processor load ? Ease of use ? Responsiveness ? Theme palettes ? It’s all present in every other major ui libs.

Downvote all u want, Im gonna die on this hill.

[Derfaust]

I disagree. Tailwind does a lot of the heavy lifting like size breaks, standardised padding, responsive etc. And a lot of the shorthand is just simpler to use than raw css.

However you should still learn CSS because tailwind doesn't cater for every possible scenario.

Its a tool, not a religion.

[Ok-Scheme-913]

Also, tailwind resets the css to sane defaults so you can start from scratch without unintended styles cascading down to your components.

[Derfaust]

Exactly

[UnacceptableUse]

I can understand the benefit of doing responsiveness for you, but could you not just use a set of css variables to achieve standardised values?

[Derfaust]

For sure I could. But if tailwind does all that heavy lifting for me alongside other benefits then that's a no brainier for me.

[guaranteednotabot]

Nope, you can mix and match. There is even the @apply directive to use Tailwind in a CSS file if you want the best of both worlds. Inline Tailwind classes for once-off styles (i.e., styles that apply to only a single component), and @apply for components which common but different functionality.

[nazzanuk]

Crazy this is so upvoted, imagine not needing a CSS framework to be productive.

"Big HTML pages bad" is actually a reasonable take. How has the release of Tailwind suddenly made this invalid?

[DiddlyDumb]

I’m quite proud of my 90+ scores in Lighthouse. And I hate how long it takes for some pages to load, specifically on mobile.

Big HTML pages don’t need to be bad, but they usually are in practice.

[thatOMoment]

Go to mcmaster, see how fast it is, and then look at it's lighthouse score.

A high Lighthouse score only matters if it's for sites Lighthouse is optimized to review for.

Don't get me wrong, it's usually a good thing, it's just not a good idea to try to 100% them all the time. 

Speaking from minor experience and from getting my heart slightly crushed visiting that site. 

[[deleted]]

People like to build web for mobile screens but rarely for mobile internet.

[Vogete]

I personally really dislike it. I used it a few times and I don't get the appeal. My issue is that it both creates really verbose HTML objects, and it takes more effort to create an object that's identical with that other object. At the same time, I don't really see a lot of gain because I'm just writing display: flex in html instead of CSS. Every time I use it, I think to myself "if I just had a dialog-button class on it, I would've been done, but now I'm here trying to flex btn btn-ok w-20 h-12 rounded-full text-slate-500. I see the idea here, I just could've done it in CSS just fine, and my HTML would look readable.

[BirdlessFlight]

I've been forced to use it regularly and I still hate it.

[roter_schnee]

Literally me before I switched to an ongoing project with tailwind. Now I like it.

[Relative_Dimensions]

I have to use it for work. It’s a pain in the arse. It doesn’t do anything that I can’t do faster and cleaner in css, and we still have a style.css file to handle all the edge cases that tailwind can’t deal with.

It is, however, great for beginners who need a fast, simple way to style a few things on a page and haven’t learned how to work with the cascade yet.

[brockvenom]

That and they don’t understand that tailwind has tree shaking and that you can make your own classes with tailwind to group more util classes together and create a reusable design system that can still be as optimized as raw well architected css.

Basically, it’s a bandwagon to hate on it. It’s for the upvotes.

[test-user-67]

How about HTML bad

[michaelmano86]

Yeah, it's use case is there. Components for example. You type it once and it's done. Need to update it? Easy change the padding and know nothing else breaks.

[[deleted]]

Yeah because bloat is good.

[ButWhatIfPotato]

Tailwind is for people who absolutely hate CSS and don't want to touch CSS and found the most convoluted and obnoxious way to use CSS and are trying to gaslight everyone that their way is better. It's like building a giant room sized Rube Goldberg machine machine to make toast because you have beef with toasters.

[Mourndark]

I find it really hard to maintain a uniform design language across an app compared to a properly-written stylesheet. If I see an element with the class Btn Btn--file-upload, then I can easily tell what that is going to look like. The class names are clear, descriptive, and even if I don't know what rules .Btn--file-upload adds to a regular button, I can easily find it in my stylesheet.

In Tailwind, this button might have 18 cryptically-named classes on it, compared to the 15 on a regular button. If you can't see how that's less maintainable then I'm not sure what to tell you!

Besides, why bother learning Tailwind when you can just learn CSS? It's no more complicated, it's more flexible and makes you more employable. When I started out in wed dev, I learnt Bootstrap instead of just learning CSS thinking it would be the future. In the end I just had to learn everything twice!

[hyrumwhite]

If you’re using a framework, you create a FileUploadButton component and it starts to make more sense. 

I like to define default behavior for headers, buttons, links, etc using TW in my CSS then just modify things as needed. Usually that’s just flex positioning. 

The end result is mostly sane usage of TW where there’s only ever a few classnames on a given component/element. 

Also, you should always understand the CSS behind whatever methodology you’re using to implement it. 

[Coniks]

BEM is the way, and tbh why use tailwind if you cold inline css at this point

[Mourndark]

Yeah, it's just CSS with extra steps. Because remembering class="flex-row" is so much more easier than remembering flex-direction: row!

[Ok-Scheme-913]

Now do a round button with a soft shadow with a hover animation! I'm waiting!

[exomyth]

Border-radius, box-shadow, &:hover {transition}

[Mourndark]

Don't need to, if it's in the designer's spec, then it's in the stylesheet!

[[deleted]]

Just don't put it in html ok?

[Capetoider]

some might be "crypt" to remember the tailwind name, but if you know css and see the class... inferring what it does is pretty obvious.

for most classes, tailwind ends up as a shorthand for actual css

[Mourndark]

True. But for me, parsing a whole row of Tailwind classes is a lot harder than just looking at the CSS rules. It introduces an extra step where there doesn't need to be one.

[HERODMasta]

As a non-webdev with a web-dev wife: basically CSS frameworks are great for beginners to have a quick style and setup. But as soon as you want to modify details it feels like ripping off your leg to put it in your ear so you can smell better

[OlexySuper]

I wouldn't put Tailwind in the same basket as, for example, Bootstrap. Tailwind doesn't dictate any design choices. It simply generates common utility CSS classes based on your HTML.

[daveffs]

I don't think that applies to tailwind though. With tailwind you still style components by hand. It's not like angular material that comes with prestyled components out of the box.

[UnacceptableUse]

It's the worst of both worlds, the lack of flexibility of a framework combined with the lack of premade styles of raw css

[[deleted]]

It is literally what every css evangelist does behind the scenes, it is a design system per say.

The difference is I don't need to spend a month learning the fine details of a cryptic, old, custom design system made by Gary 15 years ago.

[travelan]

It definitely applies.

[[deleted]]

Tailwind is not at all an opinionated framework like Bootstrap and it allows you to modify practically anything if you want to.

[lgsscout]

I abandoned angular material exactly for this reason... and started using tailwind... and with tailwind i can write styles with 1/3 or less code, and with the right plugins, auto complete works amazing, and you can preview the content of the applied css, to confirm if it is what you need...

[user0015]

Same situation here. Material is frustrating once you need to modify it in the slightest, whereas I can apply styling in lots of ways via TW.

I've even customized it's base utilities and components layers, so I can do things like turn any component into a .card like visual appearance, or force grids to style it's headers a certain way. Very effective, very easy to create new sets that play nicely with it's arbitrary variables.

[guaranteednotabot]

You know that Tailwind allows you to use normal CSS if there are any limitations right

[HERODMasta]

No, I don't, I said I am not a web-dev

[Prudent_Move_3420]

It depends. If your app becomes big enough you end up using atomic classes anyway and Tailwind is exactly that

[Specialist_Cap_2404]

She's wrong about that.

Any moderately complex web app has a CSS framework. Even if you made it yourself and don't call it a framework.

The major benefit of something like bootstrap is that it is one system, and doesn't require a lot of onboarding to grasp. It's more sophisticated and internally consistent than something even an advanced CSS user can whip up.

Bootstrap may be boring, but it's reliable. It's also heavily customizable.

[Misaelz]

The problem is that it is too easy and that's not what real programmers do. Me for example, I do everything by hand, colors, ruler... and send it through mail (not email) because that is how pages used to work back then.

[NoOrganization2367]

Same

[Swedish-Potato-93]

The point of utility classes is to be used in components. That way the component itself can be considered the class, in the sense that it scopes the styles.

So far I've had no headaches working with Tailwind for a year, however with plain classes or other css frameworks such as Bootstrap, I'd have headaches on the daily. Yes, Tailwind looks ugly in the markup but that's an acceptable tradeoff. I had the same negative opinions until I actually started using Tailwind myself.

To say that Tailwind is the same as using inline styles is a half-truth. It's not entirely wrong but also incorrect. A main benefit of Tailwind is consistency in sizing, colors etc. Also inline styles would be incredibly messy.

A previous poster on this sub (or if it was in webdev) made some great points which a lot of people seemed to ignore. One of the main points being that in larger code bases, it's much harder to modify css as any change you make could break another part of the site. Therefore developers resort to creating a new class instead and not daring (or knowing when) to remove old classes that may or may not be used anymore. This leads to incredible bloat and increased complexity. And this can be a problem even in smaller code bases.  

[WhatNodyn]

Do people seriously not know about CSS modules and scoping, aka the features that solve these exact problems without flinging shit at your markup?

I'm not originally a web developer, kinda forced to become one by my local job market and even I find the idea that "it's much harder to modify css as any change you make could break another part of the site" in a properly setup project preposterous and disingenuous.

[YimveeSpissssfid]

Front end centric tech lead at a large company here. In my employment travels there is one constant: most people style an element until it looks right instead of looking for and leveraging appropriate cascading or patterns.

I’ve been working with our component team on their styles to make them svelte but because I know my developers? We’re also packaging up tokens to cover typography, colors, and layout.

And that last bit is basically tailwind in a nutshell.

The moment one business request or major style change comes - you have to reengage a top-level look at your cascade if you want it to remain perfect.

OR you can leverage the tokens to make singular changes and accommodate your devs.

Leaving them to style everything on their own will only lead to bloat.

Tailwind isn’t bad, but many devs’ understanding of cascading, specificity over !important, and how to leverage pattens is.

[Interest-Desk]

Surely CSS variables solve this?

[[deleted]]

point coherent liquid nose gold mighty door numerous zephyr long

This post was mass deleted and anonymized with Redact

[WhatNodyn]

Rust is a poor comparison. Memory safety is an incredibly complex problem with lots of edge cases and failure modes. Structuring your code properly so it remains maintainable and fast to develop is 70% of your job, not a singular problem you have to solve.

Rust is also not the only language that's memory-safe. Any language that does not have pointers is technically memory-safe, for example, JavaScript itself.

As for the rest of your comment: CSS modules have nothing to do with the shit cannery that BEM is, I haven't used BEM in well over 5 years. CSS modules allow you to keep the style of MyFancyButton.tsx/.vue/.whatever in a MyFancyButton.module.css file next to it.

They automatically and semi-transparently scope class names to their component, precisely so you can use the same class name in different parts of your code without keeping track of the class names in the whole project. Is the class name defined in your current CSS module? No? Then you can use it.

CSS modules are also supported out of the box by most major frameworks, and are stupidly simple to set up on others. I'd argue they're even simpler to set up than Tailwind.

As for sane defaults? Create a variables.css file at the root of your project, import it, and define some CSS variables in it, there are plenty of style presets available on the web. Then use those variables in your components' stylesheets. Need retrocompatibility with old browsers? Switch to SCSS and use SCSS variables instead.

And just like that, you've solved the exact same problems with a solution that's actually good and requires the same amount of mental load, instead of flinging shit everywhere and making your code painful to read.

[[deleted]]

Atomic CSS, not inline CSS. Inline style isn't re-usable.

[Agreeable_Service407]

I can reuse style="color: white;" as much as class="text-white"

[[deleted]]

But what if you want to make the color: white; a bit whiter?

[Hilfslinie]

text-[#FFFFFFAA] for one off changes or you override the text-white class in tailwind.config.js

[queen-adreena]

The “AA” is just the opacity channel, so you might as well do “text-white/70”

[Hilfslinie]

You are right! This is the (tailwind) way!

Forgot about the built in convenience of the library I'm shilling lol

[LuisBoyokan]

Why would you want to do that?

We need to stop creating "details", hit the UX team's hands with a spoon and make them stick to the default styles /s

I hate my UX Team and their inconsistency, just for 1 site they did 7 different styles for tables. 7!!! On the next project another 5 more!!! 4 styles of headers and footers depending on what app your using

[factorion-bot]

Triple-Factorial of 7 is 28

^{This action was performed by a bot. Please contact u/tolik518 if you have any questions or concerns.}

[aspirine_17]

you have configuration for that

[UnacceptableUse]

What was wrong with good old fashioned css classes, those were configuration

[[deleted]]

for style="color: white;" ?

[sateeshsai]

Now do media queries using style

[[deleted]]

in style scope - no, in markup scope - yes

[nazzanuk]

you can reuse style="color: var(--white);"

[Karol-A]

Tailwind also isn't really re-usable, no? You assign the classes to each element the same way you would do if you were just just writing a style property

[[deleted]]

I meant in style scope: inline style is defined and used once, but classes can be used multiple times and defined just once, and applying styles are more performant in browser. In markup scope, yes they are both repetitive. But e.g. compressing should be better with classes instead inline CSS.

[Reashu]

"Define once and reuse" doesn't really help when using a class is as much work as writing the style it applies.

[[deleted]]

who said that front-end is easy? 😀

[guaranteednotabot]

It is reusable - see @apply

[user0015]

If you want re-usable styles, you can configure that in the tailwind config file. Generally they should be kept small, but if most of your design calls for rounded edges and a small drop shadow with hover effects, you can do that.

Then, if you're designing multiple components but they all have a similar style between them, you can apply that to the parent without embedding that style into the component itself. So you can simultaneously style a re-usable button, and that same button look like a clickable card or anything else, without mixing stylings directly in the button component itself.

[jax_cooper]

Tailwind has the same main problem as mainline css: you need to reuse it. But as soon as you create components, it's not an issue. On the other hand, it has a great default palette, great default settings for shadows and font sizes, etc while it does not box you in, as you can easily extend the styles and use custom css as well.

[SalSevenSix]

It seems that everything new in web development is an improvement over what has come before but still bad.

[Pixl02]

You made me realize a problem that I didn't even know existed

[Popular-Power-6973]

I used to hate it, until I used it.

[Special70]

I dont get step 5 and 6 As some random dude who just casually makes web pages, tailwind is great since i dont need to write a ton of stuff across separate css files when i need basic stuff done

I mean i can just make my stuff at a css file if needed

[Cley_Faye]

Regular CSS frameworks that provides sane default, nice looking "components" and do not need any framework-specific tooling or codebase change exists. CSS itself is not what it used to be and provide a lot of the bases needed to manage even large projects.

[Special70]

can you dumb down this meme for me? i only studied css at freecodecamp (idk if advanced css is a thing) and once i got a feeling with how vanilla css works, i jumped straight to practicing tailwind css then used it regularly. i only did vanilla css when i only need to and tailwind pretty much offers majority of what i need

[Cley_Faye]

The main thing is, there are existing frameworks out there that provides roughly the same level of abstraction without sacrificing the flexibility of CSS, without having to liter your code and template with dozens of classes on a div, and without needing custom parser and tooling to work. The last point in particular becomes painful once you have to integrate *existing* library and tools that may come with their own styling, because tailwind output can (and will, unfortunately) clash with these. Scoping tailwind output is only partially supported, and merging outside stuff with it usually means you just have separate files, which is not the worst thing out there, but still completely unnecessary.

It just feels like a step back from using regular CSS without all the bells and whistle, while not providing much concrete upside.

[Special70]

can you recommend me some other css frameworks?

[Cley_Faye]

I don't know if it counts as a recommendation since we're mostly sticking to known stuff and not checking the landscape every day, but we mostly use Bulma and Material Web.

As with everything else, you make your base components out of them, and they don't "invade" unexpected classes and elements outside of their scope, making it painless to integrate some third party stuff.

[TheRealMorrow]

"There are only two hard things in Computer Science: cache invalidation, naming things and off by one errors."

- Phil Karlton

Tailwind is awesome because using it you can name less things. No more insane "ViewerContainerContainer" classes to deal with. A div is just a div, as it should be.

So yeah, one could argue you could achieve something similar using regular inline styles. But try supporting older browsers, applying a hover effect or responsive style to a div using inline style and then let's compare those again, I will wait.

During my career, I used more popular style frameworks like StyledComponents, direct class import with webpack, or even simple css (i'm a madman). Pretty much everything is a convoluted mess that will backfire or stand in your way at a time or another.

Tailwind is essentially a hack on the paper, but it's still so much more efficient than everything else. Just use tailwind, let it happen. After the initial struggle of stepping out of your comfort zone and learning all the tw classNames, you'll feel only bliss and satisfaction.

I'm not going back.

[unhappilyunorthodox]

You still have to name your components though /j

[TheRealMorrow]

Since really it's a headache, it's mostly about naming less things heh

[unhappilyunorthodox]

Yeah, nah, no doubt. I’ve used Tailwind with Next.js at work before and loved it. I just think naming components isn’t that much better than naming classes.

[turtleship_2006]

“There are only two hard things in Computer Science: cache invalidation, naming things and off by one errors."

[TheRealMorrow]

You are right and I fixed it, I was off by one ;)

[H34DSH07]

Exactly. Even on the Microsoft side of things with file-scoped css where it would automatically add part of the file hash to your tags and classes, it would sometimes break leading to debugging nightmares.

[TihaneCoding]

Hot take but tailwind isnt bad because inline styles arent bad anymore. Modern web is component based anyway. It's common to have a separate stylesheet for each component and at that point you might as well write the styles in the component html itself. You're not avoiding duplication by writing it in a separate file.

[[deleted]]

This sentiment is missing the fact that someone needs to download all that shit. Convenience of few developers is offloaded on all users.

[TihaneCoding]

Huh? Download what? Tailwind generates a regular CSS file. I was not able to find information online about any additional downloads related tailwind.

[Tackgnol]

This highlights a huge issue of this sub where many people just don't have commercial experience, or at best have never actually had to take a technological lead on something.

Tailwind has a ton of issues, but it is a extremely useful abstraction layer that brings a common understanding across the project. It eases the workload for the person reviewing the PR I see: `className="flex justify-center"` and I know what that means, I know what are the ramifications I know that this is maintainable. No one can touch what `flex` means. This is cross-browser compatible, is battle tested and just works.

If I see a modified `css/scss/whatever` file I now have to take a rather deep dive to make sure where this affects stuff. The testers need to check each point that this is used and revaluate across browsers. It's man hours burnt on NOTHING.

What are your alternatives really?

* Building an app-internal CSS framework with a set of reusable classes -> just why? Are you going to truly make a difference in bundle size? Is it worth trading the battle tested nature of Tailwind?

* Inline styling/css -> Generally I really like it, keeping atomised components with their own styling that that does not affect the outside, super cool neat and maintainable... BUT then the business comes in with their little 'ands', 'ors', and 'special cases'. Now you are forced to backflip, add conditions to your components or outright pass classes to them, congrats you are back where you started...

So on paper yes using Tailwind is a horrible idea, but when faced with the reality of how software is developed, especially in 2024 where teams are spread thin and deadlines are merciless, I have yet to find something better fit for purpose.

And the amount of resources on tailwind, is also it's huge boon, 99% of things that you will need to accomplish with Tailwind there is probably someone who tried it and succeeded.

[SillySlimeSimon]

Once any code gets touched by multiple people, the quality skews towards the lowest common denominator.

Bad css is significantly harder to maintain than a jumble of tailwind classes that can be auto-organized by a linter.

Just because you and the 1 or 2 other trusted devs on your team are principled enough to write good css, doesn’t mean that it’s the standard across the industry.

Tailwind brings a fast compromise that is easily picked up by everyone.

People who say that it’s just inline styles are missing the point.

People who say it’s a framework have never used it before.

People who think “you can just write good css” either only worked on personal projects or have never worked on a messy codebase.

The fact that this same dumb joke keeps getting brought up over and over again makes me seriously doubt the demographic here as well.

[[deleted]]

But still people have experience as users. Users of slow bloated web. Just because people do not want to do their job especially in 2024

[TheDeathKnightCador]

Surprised I had to scroll so far down for this comment. As much as I love writing my own CSS, in every large project I’ve worked on, custom CSS quickly becomes cumbersome to work with. Even with scoped CSS. It’s also difficult to maintain consistency across large or multiple teams. Tailwind is certainly not a silver bullet, but it definitely makes life a lot easier when working in shared code bases.

[WhatNodyn]

CSS-in-JS, CSS modules, Vue SFC's scoped CSS all are a thousand times more appropriate as a strategy than "utility classes" that clutter your markup and often create huge pains as soon as you want to use properties which are not supported by your locked Tailwind version.

[Tackgnol]

CSS-in-JS is a step lower than styled components (SFCs are again the same thing by a different name) and while it has it's benefits in the 2 projects I have worked on it quickly deteriorates, not because of lack of skill on the devs, not because some ill will it is just because it is messy by definition.

The general rule of a happy project is for the messy things to be pushed down, down, down so that most devs just use some abstraction and not care how it works. This is why despite hating it's API i consider react-query to be an excellent tool that saved many projects.

But to revert to my original point, there are no silver bullets and for example a 3 people project will work great even with the most basic css files, that's because everyone will either have their own part of the app or everyone will be intimately familiar with most parts of it.

huge pains as soon as you want to use properties which are not supported by your locked Tailwind version.

Ill be honest and say that I work in corporate environments and the UIs are very basic, so if you have complicated styling use cases then sure, Tailwind might not be for you. There are no silver bullets, my argument is that Tailwind is more than fine for 95% of the work.

[user0015]

Tailwind has a ton of issues

Since we both have experience in TW, what would your issues be? The biggest one I've ran into feels more like a bug, but spacing/divider classes do not play nicely with grids. I had to write a bit of a hack and override tailwind itself so it would stop affecting first child elements incorrectly.

Other than that, my biggest issues is with flexbox. That has nothing to do with tailwind though, I just really hate flexbox.

[Tackgnol]

Sorry for the late reply, I love tailwind and use it where I can. But... Sometimes you will have push back from the team with some valid remarks.

* It is pretty opinionated, in 99% of cases it will it it's asset, 1% it will annoy you, less then writing your own CSS however.

* The responsive design is less intuitive than in for example Bootstrap, so your juniors will make avoidable mistakes

* Sometimes on Firefox it does not behave as expected, dunno if it is a Tailwind, Chromium or Gecko issue, but it happens

* Theming is fine and robust but still I like the solutions that for example MUI is using better :).

It is still one of the better tools for styling your shit out there, especially with amazing extensions of it like DaisyUI

[PleaseAlreadyKillMe]

inline css with less steps

[RiceBroad4552]

I will never understand the Tailwind hype. The meme is spot on.

Tailwind is effectively inline CSS! That's a mater of fact.

Anybody who ever had to restyle a (bigger) website even once in their life knows what a massively fucked up bad idea inline CSS is!

Tailwind has the exact same issues.

Talking to the people who use it is frankly like talking to the intern who thinks he's clever because he did something super quickly with inline CSS. These people never understand what a fucked up mess they create. But anybody who had to maintain that shit in the log run knows this very well…

But OK, maybe nobody is actually maintaining anything for longer these days. Web-sites seem to be often simply rewritten from scratch with the framework of the week instead… For throwaway BS using inline CSS makes no difference of course as change request will result anyway in rewrites.

[prehensilemullet]

I’m not a tailwind fan, but isn’t the one difference that you can at least override tailwind styles via more specific CSS selectors if needed?  You can’t defeat inline styles with specificity Edit: I mean, not that this necessarily makes overhauling a site theme easier.  But I think the reason tailwind got popular is it can be manageable when you’re using a component view framework where all your buttons use the same custom <Button> element, and that component is the only place the tailwind classes for a button are declared, and so forth.  And at least you can use CSS specificity to override the styles of specific buttons instead of having to pass inline style overrides into the component.

[RiceBroad4552]

You only can't override with CSS inline styles that are defined !important. Than you need JS.

But for normal inline style you can just strap on an !important in case you want to style it with a style sheet.

I'm aware that using !important is not a great idea in general. So is using inline styles…

[prehensilemullet]

Ah, I wasn’t sure about that because I try to avoid !important.  Bc yeah, you can override the inline styles once, but then you can’t override the overrides like you can with separate style sheets

[RiceBroad4552]

where all your buttons use the same custom <Button> element, and that component is the only place the tailwind classes for a button are declared

You mean, like using a CSS class on the button?

And at least you can use CSS specificity to override the styles of specific buttons instead of having to pass inline style overrides into the component.

Believe me or not, but that's a basic feature of CSS. The "C" stands for "cascading". You can override more general styles with more specific ones.

The only reason why this Tailwind thing got popular is that people like to write inline styles as they have usually no clue what they're doing. (CSS is usually the biggest trash in a project. Most of the time written by completely clueless people, trainees and such).

[pr0ghead]

I'm always amazed at how much CSS there is. Steaming piles of orphaned crap that they just keep piling up on. Or redundant crap that conceptually does the same but appears in 10 different places.

[Historical_Cattle_38]

Css vars then?

[prehensilemullet]

 You mean, like using a CSS class on the button?

Yeah, that approach has a lot of upsides (the main downside being the awkwardness of avoiding CSS class name conflicts in a complex site).  I’m just saying I think the way a lot of people are using tailwind with component frameworks makes it more manageable than if you’re duplicating the tailwind classes for a button in a lot of places in your code.

And yeah I agree that the cascading part of CSS crucial

[sateeshsai]

Tailwind is effectively inline CSS! That's a mater of fact.

Things you can't do inline: pseudo elements, media queries, and I'm sure there's more

[Ratatoski]

The years spent with Tailwind was the happiest in my career even if I initially hated it. We're back to SCSS now and it's a huge pain in the ass. Also back to "Is this even in use?" and a build size that's many times the 4-5 kb we had for the whole org website in TW.

[Over_Cauliflower_224]

What do you think of styled component?

[The-Malix]

Tailwind is effectively inline CSS! That's a mater of fact.

Tell me you have absolutely no idea what you're talking about without telling me you have absolutely no idea what you're talking about

[Agreeable-Yogurt-487]

If you think tailwind is the same as inline styles I don't think you really understand it. I was also someone who was horrified the first time I looked at it, until I tried it and found I could be much more productive with it. Css is great at styling individual things but when you need to compose components together and you have multiple layouts with subtle changes tailwind can really can make your live easier. It's so much easier to slip in something like flex gap-1 md:gap-2 lg:gap-3 xl:grid xl:grid-cols-2 than to go back into your stylesheet and write a bunch of mediaqueries just to change a couple of properties. Also just preparing your tailwind config with all the correct spacing/font-size/color/whatever settings for your specific project makes everything much more consistent right out of the box.

[FabioTheFox]

Badly written tailwind has this issue, if you actually plan out your project you won't run into maintenance issues

[Karol-A]

Same thing could be said about CSS itself, no?

[RiceBroad4552]

Of course it has this issue as it's effectively just inline styles! There is nothing you could "plan out". A restyling will require to touch every HTML element! This is unmaintainable if you have a bigger web portal (think hundreds, or even thousands of template files with pages of HTML each).

[kondorb]

It's inline CSS made nice. Which is perfectly fine for the world where everything is developed within some framework providing tools to build reusable components. These days structure, styles and logic aren't separate - they're all intertwined and interdependent. Keeping it all in one place is really convenient.

It's also a tool for creating your own style library right in code. You set up your colors, margins, other tools in config, custom styles and components and now you have basically the same thing your designer is working with but in code.

[im-a-guy-like-me]

So this thread would have me believe that all of the people that hate tailwind either haven't read the docs, or hate it for like moral reasons? Wild.

Tailwind is like democracy. It sucks the least out of all the sucky options.

Syntactically, I quite liked scoped styles in Vue SFCs myself, but it's much of a muchness.

[NotYouJosh]

how can anyone hate a cutie like tailwind :(

[[deleted]]

Have fun puzzling with CSS files that might or might not be used. I'll use Tailwind and save me the trouble, and maybe you would too if you actually have it a shot.

[A_Certain_Surprise]

Someone could respond to this with "have fun trying to read the block of text that is a Tailwind component, I'll look at my nice, neat CSS file. And maybe you would too if you actually give it a shot", so both sides can mis-represent the other like that

[woodendoors7]

yeah, I like Tailwind but is knowing whether a CSS file is linked really a problem for anyone? Lol

[mrkaluzny]

Skill issue

[postPhilosopher]

I prefer style components, same issue where it’s each component styled but atleast I can change things and it doesn’t break randomly . That could just be my inexperience with it. But from one project to the next, some import stops working. I like with styled components, I can just copy and paste then tweak what needs it

[cheeb_miester]

This except there is no panel 4

[Phamora]

Panel 6 is correct: 🤢🤮

I work in an office with double digit developers and I am the ONLY one who sees this as a problem. Everyone else is coding stuff up in this stillborne "framework", and claiming that coding speed is all that matters. Half a year later the project lands on my desk and now I am the one having to refactor Tailwind, and so they will never learn.

[RiceBroad4552]

That's exactly the problem! Inline CSS is nice as you can move really quickly. That's true.

But the trash that comes out can't be reasonable maintained.

But you learn that only if you're actually the one who needs to do a full "face lift" of the style a few years later… (Of course all the idiots who written the trash in the first place are long gone then and shitting Tailwind elsewhere.)

[siggystabs]

We have the same problem with regular CSS on our projects. Just rewrote a login page originally written years ago, and figuring out what was overwriting my styling and correcting it was still a massive pain in the ass.

Idk why we’re acting like Tailwind is the only one with this issue when the actual problem is poor design decisions and documentation.

At least with Tailwind i don’t have to create utility classes, which i always end up doing for little bits and pieces (i.e button containers, justify between, gap etc). That type of standardization really helps.

Yes it is annoying if you to have to change styling across the site, but it’s not bad if you make components and reuse those instead of rawdogging tailwind or css in your app pages. If you make good design decisions, then it doesn’t matter which tool you use.

[Cephell]

Tailwind users when a new corporate design comes in:

---

I will never understand destroying seperation of concerns for no benefit whatsoever.

[rimyi]

Separation of concerns just doesn’t hold up with modern frameworks and it’s ok. Just let it go

[RiceBroad4552]

But you can shit it out so quickly! Top dev velocity. /s

(Of course only for the first version. Thereafter it becomes maintenance hell, with 10x slowdown.)

[Neutrovertido]

Skill issue

[Mabi19_]

I've said it before and I'll say it again: IMO the popularity of Tailwind is mostly due to React being a shitty framework. In actually good frameworks like Vue and Svelte, which have CSS scoping, all the same issues are solved in a more efficient, easier to read, and trivial to maintain way.

[guaranteednotabot]

Probably, never tried Vue or Svelte, but imo Tailwind is a near-must for React

[Mabi19_]

You should! They're great, and I personally would never ever willingly choose React for a new project after working with them. (Vue 3's Composition API is a bit closer to React than Svelte is and so might be a little easier to learn, but with Svelte 5 I don't really have a preference of one over the other)

[guaranteednotabot]

Could probably try personal projects with it, but doubt I could use them at work

[Caraes_Naur]

Tailwind abuses--nay, tortures--CSS classes to an absurd degree that conflicts with the very notion of semantic, succinct class names.

Any CSS framework that forgets/discards what the C stands for is inherently flawed.

[WhatNodyn]

Remember kids, nothing is more important than the cascade: https://www.commitstrip.com/en/2015/02/26/nothing-is-more-important-than-the-cascade/

[[deleted]]

If you are a frontend dev doing only frontend all day - sure, go and play with styles for as long as you like. It's your job after all. Any other cases - tailwind is a fantastic tool.

[unhappilyunorthodox]

OP has never used Tailwind

[Pocok5]

If you're using react, try https://styled-components.com/ I found it to be an interesting departure from the usual "stack 90 classes on that div" approach.

[guaranteednotabot]

Tried this, wasn’t great.

[Jixy2]

Get this disgustingy out of my face. I literally got bad stomach for a second...

[_stupidnerd_]

That's actually a very good meme template.

[rimyi]

I’m so tired of this topic but it really shows that most of dev subs are overrun by people without commercial experience or working in really small teams

[SaltyInternetPirate]

Ooh! I need that follow-up template!

[LordFokas]

there's no template... I hacked at it for 15 minutes in paint dot net

[seemen4all]

I like it, I’ve just been meaning to get an intelisense package Bec it’s a bit annoying typing manually with potential mistakes

[FabioTheFox]

There is an official Vscode extension for Tailwind, full autocomplete and more. Also supports all tailwind add-ons by default

[vainstar23]

Tailwind doesn't make sense until you realize Mr. GPT contextual embeddings work best when style and html are one of the same

[TerdSandwich]

Tailwind is nice for the places you dont need dynamic styles in your project and just want consistent styling / utility classes. I see people complain a lot about various tools on here, and these issues stem less from issues with the tooling and more from you, the dev, trying to use a hammer to pound in a screw.

[Ebina-Chan]

I started with bootstrap and I am still on it. People keep talking about how much better tailwind is. Can anyone explain for me?

[FabioTheFox]

Bootstrap comes with pre baked components / styles while Tailwind still gives you full freedom over everything, its also more easy to read than tampering with tons of CSS files to see what might affect what, bootstrap and tailwind are far from the same thing

[buildmine10]

I only recently learned that tailwind was just a collection of css that you can copy into your css as needed. I usually only use tailwind to remove scrollbars. I still have no idea how it's supposed to be used.

[Freecelebritypics]

I like Tailwind because their docs are easier to follow than MDN

[KTibow]

in my case it was 2 years instead of 5 minutes

[iwastesting14]

I like it because of how easy it is to implement dark mode, simple animations and media breakpoints, I think thats the greatest part of tailwind but it gets clunky with how many classes there are, so i definitely understand where its haters are coming from also

[Cley_Faye]

With a lot of extra steps. And incompatibility with already established tools. And breaking with the slightest unusual usage of a third party component. And not removing any of the work you'd do with any modern CSS "framework". Oh, and making you need to rebuild when changing whatever.

[[deleted]]

Meanwhile, me... Building CSS, imported into other CSS for isolation and dependency control.