[faebi]

Random rant: I still don‘t get it. Why is inline CSS supposed to be bad but tailwind is supposed to be fine? And yes, inline CSS lacks features like hover and predefined color palettes. Personally, these days I‘m lost in between them all and have started using them all; a framework like bootstrap, some handy thing like tailwind with a prefix and inline CSS for anything I feel like. Did I mention that I like !important ?

So, time to go to hell for saying all of that.

[ushakov]

in my experience things like Tailwind are mostly pushed by managers, not developers

the managers see how simple it is to build complex UIs in Tailwind and then project it into how much resources they can save their company and how quickly they'll be able to iterate on design

a major problem with projects that are built with tailwind is that the code produced is unmaintainable, unreadable spaghetti

you can even see it on their own home page if you scroll down a couple sections

https://tailwindcss.com

tailwind also requires a build system and introduces 500+ npm dependencies, which is a huge security risk

personally i think Tailwind is a solution looking for problem and would avoid it at all costs

[monkey_monkey]

> in my experience things like Tailwind are mostly pushed by managers, not developers

In my experience, Tailwind adoption is pushed hard by engineers who use it on side projects and see how delightful it is to use.

And if you think it's unmaintainable, maybe you should explain why you feel that way (apart from your clear distaste for it). My counterpoint is that it's amazing to be able to pick up a project after months or years and instantly understand what's going on.

[ushakov]

we might have different experiences, but in my view when you take the downsides into account: a build system requirement and very large amount of dependencies, then Tailwind isn't worth it

you should avoid large dependency trees and if possible avoid the JS-ecosystem altogether, because these dependencies introduce security vulnerabilities routinely

we already have web components which support scoped styles, so you can just build a component once and reuse it everywhere else in your code

i'd love to hear more counter-arguments though

[kaba0]

I really dislike the js ecosystem, but as mentioned in my other comment, there is barely any security risk in shipping a compiled css file. Most of the deps are just there for file system watching and live-reloads.

Regarding web components, you can just use them with tailwind, they are not complementers. Hell, if you want to have a stylized button, of course just write it once, but the reusability comes from it being a component — I really have to question the reusability of CSS styles that are more complex than a few properties. Like, do you honestly reuse the style of a button in your menu? Perhaps the color scheme and font, but those should be variables to begin with.

[ushakov]

> there is barely any security risk in shipping a compiled css file

not when you require 500 dependencies to actually compile the css

imagine running “npm run build” but instead of getting a css file you get your hard drive wiped out, because some author of random npm module decided it’s April Fool’s day today

this is a hard reality than many are not willing to acknowledge because of all the hype around JS

[kaba0]

I agree that it is currently a very real security risk but at the same time we should ask ourselves what on Earth are our OSs do? Because my phone could protect me from that 100%. Running arbitrary code should pose no such threat ever.

[lgas]

FWIW I'm a (developer turned) manager who took over a team that was using tailwind and said "hey if you wanted you could do X or Y or Z as an alternative to tailwind..." and everyone metaphorically gasped in horror and said that tailwind was better than anything they had collectively done before.

I didn't get it at first either but I think perhaps a surprisingly big part of it is the fact that our UI is based on React and having everything contained within each component so you don't have to go hoping around between files is much nicer. And then it's just a thorough, tasteful and well thought out framework based on modern principles.

[kaba0]

> tailwind also requires a build system and introduces 500+ npm dependencies, which is a huge security risk

Compile time != run time. Those dependencies will never get to any form of production code.

[Existenceblinks]

Everyone is tired of defending "inline style" for a long while now. It has `hover:bg-gray400` and thing like `md:w-1/3` and some fancy animation too. I think they should start creating 2-3 properties size classes more, currently it's mostly 1:1.

[notjustanymike]

Tailwind employs utility CSS methodology, but it's not equivalent to inline. It standardizes your core elements (colors, font sizing, spacing) which ensures the consistency of a framework mixed with the flexibility of inline.

Any reused styles (eg button) should be turned into a class via composition.

So it's flexible, but also ensures adherence to your company design standards.

[Brajeshwar]

Here is my thought process, but take it lightly as I have not been part of front-end teams for quite a long time. It is more about how your code modules are organized, for what purpose, and how it will be managed.

I would say go bang-bang with all the classes for Marketing/Landing Pages and websites that will change regularly both in code and final designs.

Now, for a user logged in WebApp where many engineers (front + back) will work but want to leverage TailwindCSS without having to write everything from scratch, leverage its capabilities, but start writing your classes -- use TailwindCSS as a utility.

TailwindCSS makes it easy to get in new members to the team, and even new developers, just like Bootstrap does. It gives you the advantage of using it as your tamed tooling, complete with sharable design tokens between designers, the front-end, and the back-end.

[wildrhythms]

Imagine you have 100 Jekyll templates that all contain a few dozen instances of <div style="display: flex; ..."> don't you feel you're wasting some bandwidth by not creating a .flex { display: flex; } class to handle that common case? This is all Tailwind is doing.

[nickjj]

gzip is remarkably efficient to reduce duplicate repeating strings.

You could have 10 classes or raw styles repeated 50 times and all instances of those might condense down to 1 string of WWUElinMSS1J1TQwMFFISi7KtsMiZAuVKU.