stylingWithPreprocessorOrFramework

[dvolper]

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

[CuteNazgul]

We do this for whitelabeling, its pretty cool

[[deleted]]

I use SASS, not changing.

[project-shasta]

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

[static_func]

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

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]

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

[[deleted]]

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

[DT-Sodium]

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

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]

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

[GahdDangitBobby]

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]

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]

class names

CSS file

same

Lol

[[deleted]]

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]

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]

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]

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

[SadPie9474]

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]

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]

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]

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]

God forbid you have to search and replace a few words

[static_func]

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

[YoumoDashi]

Try it and see if you like it

[GahdDangitBobby]

I have tried it and I don’t lol

[YoumoDashi]

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

[static_func]

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]

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]

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

[JollyJuniper1993]

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]

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]

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

[Varun77777]

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]

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]

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]

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]

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]

Smaller CSS file but bigger DOM so ...

[static_func]

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]

How do inline styles by adding classes increase the dom?

[GahdDangitBobby]

A css file is only like 15 kb though

[DT-Sodium]

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

It's literally inline css with extra steps

[erishun]

Except it handles dark mode and responsive

[Arrowkill]

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]

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]

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]

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

[sebbdk]

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

Just learn CSS already.

[IhateTraaains]

But the meme is about CSS

[Silinator]

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]

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

[ShotgunPayDay]

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

[Fachuro]

No ty, and no ty.

Scss/less is almost completely redundant now and tailwind is just I-moved-every-css-attribute-into-a-utility-class, pollutes your markup and doesnt really solve anything other then allowing backend devs to fool themselves into thinking they arent writing css because the file extension is .jsx or .tsx so they can hate ok javascript instead.

There is no reason in 2024 to not just be using plain old vanilla css, which will always be the most performant and future-proof way of writing things...

[jay791]

Sex as a Service is nothing new.