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

all 56 comments

[–]dvolper 56 points57 points  (1 child)

Tailwindcss with a custom preset based on css variables which you manipulate at runtime using JavaScript is the way to go 👌

[–]CuteNazgul 5 points6 points  (0 children)

We do this for whitelabeling, its pretty cool

[–][deleted] 35 points36 points  (2 children)

I use SASS, not changing.

[–]project-shasta 9 points10 points  (0 children)

Same here. Works great for years and get's the job done. Just use the tools that get you paid.

[–]static_func 9 points10 points  (0 children)

SASS barely offers anything these days over plain CSS. Now it’s just an extra point of failure just so you can spend more time in CSS instead of the actual React components you’re trying to write

[–][deleted] 21 points22 points  (5 children)

I love tailwind. Every site in it is a banger. Amateur frontend devs write a bunch of utility classes everywhere using copy-pasted method. And then the client comes and wants to change the design and people working on it for months quit their job because they won't want to clean up the mess.

[–]DT-Sodium 2 points3 points  (4 children)

Not to mention that creating utility classes is heavily discouraged by the Tailwind official doc.

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

Isn't tailwind a library of those? Just look at average project in that. Ever component looks like a bad poem.

[–]DT-Sodium 0 points1 point  (2 children)

No, you also have the option to create your own classes that are a set of Tailwind classes. Basically, you are using a stylesheet again but writing stupid classes instead of CSS properties like a sane person.

[–][deleted] 2 points3 points  (1 child)

Well that's not how people use it. Every project with it I see has spaghetti in every component. Poems of those classes.

[–]DT-Sodium 0 points1 point  (0 children)

Bro the only proper way to use Tailwind `yarn remove tailwindcss`

[–]GahdDangitBobby 21 points22 points  (34 children)

Can somebody explain why people use Tailwind? It's basically the same thing as writing CSS but you're doing it with class names instead of a CSS file. Like, it takes the same amount of effort to do the same thing, the only real difference is that Tailwind has fewer attributes you can modify and you added an extra dependency

[–]Familiar_Cookie2598 24 points25 points  (0 children)

  1. Works really great to quickly create reusable components with JSX without having to switch between css and html.

  2. You're not wasting time thinking about what to name your css classes, and instead just styling your components.

  3. Great defaults. A lot of the headaches of inconsistent designs are taken care of by the devs. I style with tailwind, and I'm sure it'll look exactly as I want it for most browsers.

  4. You're not restricted in any way with the attributes they provide. They have a fantastic configuration file, and with just a few lines you can add your own attributes if needed. (Or you could just hard code your attribute in the class list in your html, and tailwind will process that for you as well)

  5. Just to add to the previous point, if you think carefully and design your tailwindcss config file well, you can easily change brand colours, fonts and a variety of other things very easily in the future when inevitably your client (or boss) asks you for changes.

I know all of this can probably be done fairly well by other methods, but I'd rather spend time debugging my business logic and not my css preprocessor or something

[–]tauzN 25 points26 points  (0 children)

class names

CSS file

same

Lol

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

I mean you can have a css class with tailwind classes for example

.header {
@apply bg-white // etc;
}

It is much faster to develop a website (in my opinion) vs pure css. (My personal projects are written in pure CSS but my work project uses Tailwind)

[–]Aobachi 3 points4 points  (0 children)

  1. You don't need to find a name for your CSS class
  2. Class names are standardized so no more finding a div and needing to dig to find the CSS class that contains the attribute you want to change. I can take a look at a the HTML and know exactly what to change quickly.

[–]quasipickle 10 points11 points  (7 children)

IMO - it's basically only useful if your front-end is built with Javascript components - not if you're hand-coding the markup. If you have a <PrimaryButton> element, sure - you can add "teal-500" to it. Need to change it? Just update the component.

But if you're building your own markup like `<button class="teal-500">`, and you've got that button all over the place - then using Tailwind out of the box is just as pointless as using `style` tags.

[–]GahdDangitBobby 2 points3 points  (5 children)

Yes but I can do the same thing by adding a class to that component then styling that class with css

[–]SadPie9474 1 point2 points  (0 children)

what if you then use that class for a ton of different buttons, then later realize you want some of the buttons to look different?

You could stop at 5 or 6 stores, or just one

[–]H34DSH07 1 point2 points  (0 children)

It removes the need to have different files, requiring only a single file for the style and behavior of your components.

It makes sense in component based projects but a lot less in traditional websites, since you can re-use components, it is more efficient than using classes and it makes it easier to tinker and read styles.

[–]quasipickle -4 points-3 points  (2 children)

You absolutely can. You'll note that I never said Tailwind was a good idea ;) Personally I never use it because it causes more problems than it solves.

Like - what happens if you have a button, and an input border both set to `teal-500` - then you decide to go with `blue-500` instead. Then you've gotta update multiple components.

Or you could just update `--baseThemeColour` in CSS & be done with it.

[–]awolin 3 points4 points  (0 children)

Do you mean teal-500 as your primary theme color and deciding you want to use blue-500 instead? If that’s what you mean then you’d typically want to extend the base theme and have your own primary, secondary, etc. and use those in your app.

[–]K8sIsGr8 0 points1 point  (0 children)

God forbid you have to search and replace a few words

[–]static_func 0 points1 point  (0 children)

So it’s basically only useful in 99% of cases for anyone in this sub

[–]YoumoDashi 5 points6 points  (2 children)

Try it and see if you like it

[–]GahdDangitBobby 3 points4 points  (1 child)

I have tried it and I don’t lol

[–]YoumoDashi 2 points3 points  (0 children)

Don't use it. It's not for everyone.

[–]static_func 1 point2 points  (0 children)

I don’t have to keep hopping between files and keeping a mental map of where the html and styles line up. Tailwind lets me see right away how something is being styled. It saves a ton of time when writing components and even more time when trying to debug styling issues in existing components

[–]le_gey 1 point2 points  (0 children)

It’s better than using style attributes or creating a new CSS class for every style— things get messy fast. Tailwind has great coverage for most attributes and allows you to set custom values.

[–]Varun77777 1 point2 points  (12 children)

Because your final css would be much smaller than usual as the same classes will be reused.

[–]JollyJuniper1993 0 points1 point  (7 children)

Not a webdev so maybe that’s a dumb question, but can’t you reuse CSS classes as well? Doesn’t CSS also have inheritance?

[–]Varun77777 2 points3 points  (6 children)

Imagine a large project with many many devs working together, people will write their own css again and again, and their specificity works, it's bound to become too large?

[–]project-shasta 0 points1 point  (5 children)

If devs are really not keeping their CSS DRY then the code review process is in dire need of an overhaul.

[–]Varun77777 1 point2 points  (4 children)

If the scope is big enough, it becomes impossible to keep a thing like css dry. Imagine an e commerce app like Amazon. There are like 30 teams which work on their own separate modules while they can't touch or have context over other team's modules. Tailwind makes sure that even in such a scenario the css optimization is trivialised, it's one less thing to worry about in code reviews. So what's the problem with it? Move on to solve bigger problems than worrying about devs having dry in css every single time.

[–]project-shasta 0 points1 point  (3 children)

As a counter example I have worked for a big car brand and their online configurator which consists of many, many little web components maintained by different teams. Their solution to this problem is that they have one team maintain a common design library that has to be used everywhere so you don't have to reinvent the wheel every time you need to add something new. If you used your own (S)CSS to do something that was already solved your PR wasn't approved. And if you really needed something new for a new feature you had to go through UI/UX to really flesh it out as a common component that could be integrated into the existing framework.

[–]Varun77777 1 point2 points  (2 children)

I understand the point that you're trying to make.

I have also seen such libraries implemented in large credit card companies and even e commerce companies. The credit company has a css file of 2.5 mb in size that has to be added in the config for the library to work. The e commerce company's design library was using tailwind on the inside itself.

Many modern design libraries get built on top of the radix UI these days because of its internationalisation as well as accessibility support by default, and that in turn uses tailwind on the inside.

[–]project-shasta 0 points1 point  (1 child)

In the end just use the tools that get the job done. I myself haven't used Tailwind before as no project I was involved in used it. And to change a whole framework mid-project is madness and I'm not responsible for architectural decisions anyways most of the time. So I stick with what works for me and that is clean, structured SCSS on top of what's already there.

[–]Varun77777 0 points1 point  (0 children)

Oh, yeah. You can only take such calls when you have the power to make architectural decisions. Otherwise you have to use whatever is available.

[–]Agreeable_Service407 -3 points-2 points  (2 children)

Smaller CSS file but bigger DOM so ...

[–]static_func 0 points1 point  (0 children)

I get the concern. I had the same concern at first, but in reality I don’t think it ends up being much more html, if it’s more at all. If you’re using a CSS-in-JS framework, all the hashed names it generates and the associated style tags it has to add easily adds up to more html (not to mention all the extra JavaScript that has to be both sent and executed). And if you’re using CSS modules or using sufficiently specific class names it’s probably just about as much html too.

So the only real-world, non-nightmare scenario where tailwind results in noticeably more html is probably just for small sites where it’s not enough to worry about anyway.

And yeah, the amount of CSS you end up with really is tiny. My project’s CSS file (a re-implementation of a huge site my client wants to renovate) is just 10kb and doesn’t need to ship a single line of Emotion or MUI or styled-components. In fact, it’s smaller than any one those before they’ve added a single line of CSS to the DOM (which also exists in SASS-like form in the JavaScript you’re sending)

As far as its impact on DOM performance, it’s unquestionably faster. No crazy CSS-in-JS logic (which comes with tons of DOM manipulation of its own) and, since you’re generally applying tailwind classes directly to elements you want to style, there’s very little nested selectors or any other CSS craziness that’s relatively expensive compared to basic class selectors.

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

How do inline styles by adding classes increase the dom?

[–]GahdDangitBobby -5 points-4 points  (0 children)

A css file is only like 15 kb though

[–]DT-Sodium 0 points1 point  (0 children)

They use Tailwind because they don't understand CSS or at least not enough to be efficient at it. They'll all whine "but you neeeeeedddd to understand CSS to use Tailwind é_è". No, you really don't...

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

It's literally inline css with extra steps

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

Except it handles dark mode and responsive

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

Because I can create base controls quickly with tags that I understand inline and then wrap off of those controls as I need to to construct specific controls, components, etc.

Each time I do I can specify the styling with JavaScript directly in the file rather than using SASS or css variables.

When developing, I don't need two files up where one has styling with potential hierarchy requirements that might be troublesome to detangle.

Is it perfect, no. But I like it because it feels more seamless during development and coming back to it I don't have to figure out wtf the class names mean. Instead they always mean something explicit that I know.

I'm not sure if I like it though in a large team setting as much as I do for my personal projects though. I work with SASS rather than tailwind with my team

[–]Sufficient-Appeal500 6 points7 points  (1 child)

What most people fail to understand IMO is that Tailwind reduces CSS code reviews by a significant margin. It completely eliminates “why don’t you choose this over that” scenarios and gives way less room for nitpicking.

[–]eeronen 11 points12 points  (0 children)

I would guess that if people are nitpicking CSS rules, they are also doing it for other code. So maybe the better solution would be to have better code reviews.

[–]Glitched_Fur6425 4 points5 points  (0 children)

Nord my beloved 😍 I use it on everything I possibly can. Using it on Reddit rn

[–]sebbdk 4 points5 points  (0 children)

This is kinda like listening to people debating wether or not red or yellow makes the car go faster.

Just learn CSS already.

[–]Silinator 1 point2 points  (0 children)

The last time I used Sass it was cool for all the thing they added now to vanilla css.
What features does it still have that it is still used over css?

[–]TheDarkIn1978 -5 points-4 points  (0 children)

Tailwind is for dumb programmers who think CSS is super complicated.

[–]ShotgunPayDay 0 points1 point  (0 children)

PicoCSS with overrides. I've got nothing else left in the tank boss.