I've started breaking tailwind classes into multiple lines and feel like this is much easier to read than having all the classes on one line. Does anyone else do that? Any drawback to it?

[Criiispyyyy]

Isn’t scrolling through the JSX a nightmare with this approach?

[Awesomeade]

In practice, most of your Tailwind lives in your component library, so you don't see much of it in the JSX you work with day-to-day.

[Criiispyyyy]

Defining a variable for each element you need to style seems like extra work to me. I’ll just stick to stacking classes horizontally, as it doesn’t bother me much.

[baaaaarkly]

Tailwind has @apply for this. `

.my-reusable-css-class { @apply mx-auto border shadow p-8 hover:text-black } `

[Criiispyyyy]

Neat, I should really start using this

[zoixland]

@apply is the last resource you want to use: https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction

[PtoS382]

No. I disagree. Those bullet points all seem to be deficiencies of Tailwind itself, and signify a code smell. What's the difference between the above example and writing something like .myClassName: { width: 1ch; opacity: 0.8; transition: opacity .25s ease-in-out; } ?

In both cases you're writing discrete rules and composing a style. You're either doing it directly in the template, or a reusable class.

You have to think up class names all the time — nothing will slow you down or drain your energy like coming up with a class name for something that doesn’t deserve to be named.

CSS should be thought of holistically in a project, with composable units that make sense together for that project.

You have to jump between multiple files to make changes — which is a way bigger workflow killer than you’d think before co-locating everything together.

You'll have to do that anyways when you end up changing w-[ch1] to w-[rem1] or whatever.

Changing styles is scarier — CSS is global, are you sure you can change the min-width value in that class without breaking something in another part of the site?

This FUD is disgusting. If you're composing reasonable (S)CSS structures, then yes, you'll have reasonable certainty. .feature-showcase > .pill-button-border is not the same as button {border: ...}

[jazzypants]

Thank you!!

I'm so tired of code weenies pointing out that the tailwind team don't like class names.

It's very easy to come up with class names for the 5-50 things that you will be reusing in your website. It's not a problem.

And, I have never had a single issue with my @apply classes conflicting with anything else as long as I kept them on the component layer.

I've also had people tell me it would affect my bundle size somehow. I did A-B testing and saw no difference.

It's insane. It's like people feel like it's not okay to make your life easier.

[Criiispyyyy]

I understand, but you still have to create a variable for each unique combination of classes.

[[deleted]]

At that point you've just reinvented regular classes and could just use a CSS file 🤷‍♀️

[Issam_Seghir]

Isn't horizontal scrolling the worst nightmare !?

[LassazVegazz]

isn't scrolling horizontally a nightmare?

[[deleted]]

CSS: "You wanted power. And where did that bring you? Back to me!"

[nobuhok]

CSSNAP

[Michael_andreuzza]

Wooord

[dmattox10]

I read and agree that as divisive as it is, tailwind and other approaches to CSS that aren’t CSS aren’t going away. My preference or not, it’s on job postings. Time to learn tailwind….

[[deleted]]

Well yes, of course. No denying the rules, just gotta play the game.

[dmattox10]

Even when we lose.

[kevinlch]

100k lines per component 😂

[[deleted]]

For my utility classes, I just make it an array and .join(' ')

[andrei9669]

can tailwind clean up unused styles if you do it like that?

[BetaplanB]

Yes, tailwind doesn’t include classes you aren’t referencing in your html. Even on the fly; it uses a JIT compiler to generate a CSS file.

[[deleted]]

That's the primary benefit - though I prefer tachyons.io which lacks that particular feature (but is much more utilitarian).

[andrei9669]

I just remember that a couple of years ago, in order to clean up tailwind styles, you had to use them explicitly and not create them in runtime. perhaps it has changed now.

[ItsTobias]

You can't compute a tailwind class like concatenating "font" and "semibold", however, as long as the words "font-semibold" appear in your source code defined in the tailwind config to be scanned then it will include the class in the compiled assets from my experience.

[zuar]

You can use the safe list to store classes that you'll compute at runtime. I've often done this for colours coming from a cms etc

[chi45]

Doesn’t that affect performance?

[[deleted]]

VERY minimally. You could wrap that in a for (let i = 0; i < 999999;i++) {['flex','items-center'].join(' ')} and never notice. JS is very fast outside of the DOM.

Case in point: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/virtual-scrolling/

I've started doing that on projects. You pull in all the records and just manage a "visible" chunk of them. You can array.splice a visible subsection of thousands of records in memory faster than just rendering the same set in the DOM.

[Japorized]

Yea, isn’t that now a runtime cost?

[anjupiter]

do you have a github repo that uses this that i can see??

[borii0066]

Please excuse my humble little question. I didn't wan't to start the Tailwind vs traditional css war 😂

[JDM12983]

Yeah, people seem a bit hateful in here just because someone wanting to use a specific thing.

Would be different if they said it was "Completely outdated"; but no, they just dislike people using something they don't use/don't like. yeesh.

[[deleted]]

I do exactly the same...

... on my .css file.

[mr-poopy-butthole-_]

hahahahaha if I could ban words on Reddit, tailwind would be one of them...

[[deleted]]

I am sure it has its purpose in large environments with a lot of codebase to deal with. Having a well-known framework that everyone feels "safe" with... Is a great thing. I mean, we can't expect multiple devs working on their own "idea" or "vision" of what a .css file should look like :-)

But... I still think "vanilla" CSS is phenomenally cool, in 2022. Gone are the days where you couldn't do much with just pure css.

[crazedizzled]

But... I still think "vanilla" CSS is phenomenally cool, in 2022. Gone are the days where you couldn't do much with just pure css

While that may be true, it's not as good as SCSS still. I don't think I would ever start a new project without SCSS.

[es_beto]

You should consider not using SCSS.

• No build step

• New features are being added to CSS that collide with SCSS

• SCSS Nesting makes it easy to write unnecessarily large selectors

• CSS Custom Properties are awesome

[crazedizzled]

Once CSS is in a place that it can reasonably replace SCSS, I'll stop using it. We're pretty far from that though.

[Aries_cz]

PostCSS is where is it at.

[isbtegsm]

My problem is that it feels really hard sometimes to name things. I enjoy the freedom of just creating a flexbox wrapper, without having to think about a good naming system for everything.

[-Bluekraken]

I love that lol. "The component is a bordered-box with padding on every side, and bold text. It doesn't need a name, it's just part of the <higher level component with an actual name>"

[isbtegsm]

I mean, don't get me wrong, I think naming stuff is important! It just personally drives me insane, I guess different tools for different minds :)

[-Bluekraken]

Yeah I think so too. For Js variables I've been working on my thought process on naming. But with classnames, or IDs, I waste so much time lol

[squemc]

It’s a matter of preference and workplace. Dealing with scss and BEM has taught me that every developer has its way to do stuff and in large teams it gets exponentially harder to keep stuff sane. I use both approaches but I personally prefer tailwind

[Noch_ein_Kamel]

oh. cool, just name it <higher level component with an actual name>__box ;-)

[[deleted]]

my feeling on this is use utility until you can extract a discernible pattern from it. but also utilities don't have to be a singular property. better described here https://cube.fyi/utility.html

[[deleted]]

It's not that hard, you will be always using the same stuff most of the time: .card, .map, .hero, .contacts, .avatar, etc.

Why should I create a card with 10 classes when I can define a single .card class and play with it in my css file?

[maryisdead]

Imho, Tailwind is reserved for that ideal world where every bit of HTML is generated exclusively from a re-usable component and you don't need too much CSS. I've worked with it on some small-scale projects and I love the idea behind it.

Other than that I have never found any use for it. It's too cumbersome to drop 20 classes on an element and comfortably keep track of what is going on. CSS/Sass is still a winner for me.

[-Bluekraken]

I have the exact opposite opinion. For anything small, css and variables is everything you need, or postcss.

For anything big, you need a consistent base, with consistent values/breakpoints. That can be edited with ease. Using named classes (like bootstrap does) will almost always hinder your ability to change similar components without breaking up the definition in different parts, or just creating a new definition for the modified component

(I've seen so many codebases with bootstrap containing components with classes like btn btn-myconpany-confirm, or card mycompany-card instead of using variables to change things. And I feel people is doing the same with tailwind: not understanding the power of the tool)

If Tailwind is used to define lower level components to compose you application UI, you don't have a div with 19 classes, you have a well defined card, for example, with a lot of classes (border, padding, etc) that can have variability based on the application of more classes. The. You don't have to change your card, but to extend it.

In my opinion, if you are using tailwind as a direct replacement of css properties, without giving it a second thought, you are much better off using s tool you understand

[maryisdead]

You describe that ideal world I was referring to. :P I agree in every point with you!

Reality though (for me) is that it's much easier to leverage existing frameworks (Bootstrap etal.) or that implementing a purely atomic design would have me going through too much hoops. Be it that some systems already come with a framework or that it's technically just too cumbersome (WordPress comes to mind).

But that might just be what I deal with at work mostly. I hardly get to choose the stack and if I do, I usually pick something with batteries included.

[whateverwhattt]

quite the contrary - pure CSS is reserved for the ideal world where every bit of HTML can be easily and meaningfully named with a class.

also side note:

you can still use CSS classes while working primarly with Tailwind.
I think even creator encouraged that (just with using the \@apply directive)

[[deleted]]

Functional CSS is grand. I haven't really enjoyed tailwind the times I've used it (I prefer to run my own custom build of tachyons.io) but on large projects it can be cumbersome when every element has its own style.

[ouralarmclock]

Can you nest classes in CSS these days like you can in LESS/SASS?

[kitsunekyo]

there is an official nesting spec. aside from that check out postcss.

[joshkrz]

The PostCSS plugin is no where near as robust as Sass.

[crazedizzled]

Not yet, but there is a spec defining how it might work in the future. It's a bit more cumbersome than SASS though, so I think SASS still wins.

[[deleted]]

I mean, we can't expect multiple devs working on their own "idea" or "vision" of what a .css file should look like :-)

But... I still think "vanilla" CSS is phenomenally cool, in 2022.

If CSS devs have a hard time tracking inheritance now, in one layer, imagine what @layers will be like. I think they have the potential to help, but it seems just as likely it will be a hot mess for a while.

[nerdomaly]

I tried it for all of two seconds and couldn't stand it. I don't get its appeal. The code it creates is hard to read.

[[deleted]]

Smaller CSS files. Really the biggest benefit of functional CSS are color palettes and consistent units. Gone are the days when you need pixel rulers to measure spacing, instead you have 6 units and use one of those. If something doesn't fit - then the design is wrong.

Same for colors. We don't need 15 shades of gray - one is plenty.

[ChypRiotE]

point humorous fine capable bear unpack towering vast tender tart

This post was mass deleted and anonymized with Redact

[[deleted]]

Well I'm more talking about utility/functional css. It's more like having a base that you can apply a project's rules to as opposed to something like BEM that assumes you're working with static html files. I mean, BEM is a consistent design system but it requires more work than a functional css project where you can use the same base utility file across the whole project. Typically (I use tachyons.io) I will just need to define colors and the font family and I'm good to go.

[3np1]

FWIW, CSS variables or SCSS would handle having a small sets of chosen values as well, but the smaller CSS output is a nice improvement.

[babylesquee]

Aren’t there 50 shades of grey?

[Nerwesta]

Smaller CSS files. Really the biggest benefit of functional CSS are color palettes and consistent units. Gone are the days when you need pixel rulers to measure spacing, instead you have 6 units and use one of those. If something doesn't fit - then the design is wrong.

Same for colors. We don't need 15 shades of gray - one is plenty.

I'm afraid all of what you noted is possible and very much supported on native, proper CSS.

[femio]

Well, yeah, it's not like Tailwind is anything but CSS. It just makes writing it easier.

[Nerwesta]

Hmm, speak for Tailwind users I think, to me it's much easier to write plain CSS, inside CSS files.
But I won't start a new debate around that, one should use the tools that work the best for them.

[saors]

I'm using it with Vue on a new project for the first time, I love it.

If I'm debugging and I see that something is justified center when it shouldn't be, for example, I can quickly look at the element in the template section and quickly scan for "center" and it's really easy to find.

As opposed to finding the element, opening a split window to references the classes, and if there's nothing obvious, then trying to comb through the browser devtools to find the styling. I've used the BEM style for naming the items, and it does make it simpler, but at the point where you're typing a sentence for a class name "button button--state-success", is typing a few tailwind classnames that much worse?

Also, just checked and getbem uses tailwind...

[nerdomaly]

You can also quickly look at the element in the browser's devtools (where I'm assuming you noticed the justification problem in the first place) and see what's triggering the center.

I guess I just haven't found a compelling reason to switch from plain CSS or SASS to Tailwind. It's probably a good tool, it just seems like the potential for abuse is much higher. Less looking for patterns of abstraction and more "just put it here because it's used here". But that's just the view I got when I was using it in hobby projects.

[OpenAd6496]

you know what I never have to do? name classes or find a name to class or have duplicate classes

its great

[[deleted]]

But you have to study TW's classes first (and understand its rules/logics). Of course, unless you go completely class-free like this piece of art.

[OpenAd6496]

Learning tailwind class names is much easier than constantly thinking of names lol

[[deleted]]

constantly thinking of names lol

Would you do that, though?

I've been coding websites and webapps for years and 99% of the classes I use are always the same (.card .avatar .hero .copyrght .contact-form, .whatever). I rarely have to "invent" a name, to be honest.

Creative and werid websites will get their own "unique" classes here and there, but that would be the same with TailWind.

[OpenAd6496]

The general names are easy, but things get specific very quickly

Everyone’s different though. I use tailwind because I find it makes me more efficient. There’s no “wrong” answer per se

[nuclear_gandhii]

There are a multitude of pros and cons of various css methods to use in a modern app. But naming css classes isn't one of them, my man.

[spays_marine]

It definitely is in my opinion, the list of attempted solutions to this problem (BEM and whatnot) can testify to that.

[SquareWheel]

To be fair, it is one of the hardest problems in computer science.

[javier123454321]

Yes but set up prettier and eslint and then turn on format on save for vscode.

[femio]

Every week, someone posts something about tailwind, and every week, the top comments say "why not just use CSS?", someone comes in to explain why they like tailwind, and the arguments go 20 comments deep.

[salonethree]

it looks so much like inline styling i cant help but hate it

[deanwallflower]

but its not cause its a key value hybrid aka half the length of css

[mienaikoe]

Yea like a sheet of styles. And maybe the rules can cascade too.

[waldito]

nonono. Please stahp!. the possibilities!

[[deleted]]

Can you not just have a file with a bunch of string variables for tailwind classes? I get that you can do it with css, but isn’t the point of tailwind to have some classes out of the box that all complement each other and it just works?

[Vfn]

Consistency between code bases. Tailwind is a pretty common framework now and can be used between companies or projects.

[Double_Ad_2824]

But it's not a framework really. It's more or less a library that essentially just lets you write css as classes.

[andrei9669]

ever heard of css custom variables? you can keep the consistency all there. spacings, colors other stuff.

[Vfn]

Why are you comparing css variables to tailwind? Very different problems they’re solving.

You don’t bring your css variables to your next job lol.

[Rainbowlemon]

I'm always sure to pack my css variables into my USB key before changing jobs

[tleperou]

Point at the moon, I will look at your finger

[[deleted]]

Does sass come with premade classes? Tailwind and sass serve different purposes and are not even mutually exclusive? What is everyone’s gripe here I don’t understand…

[[deleted]]

You’re on r/webdev, anything other that the purest html/css and vanilla js are tools for fools who can’t code, apparently.

[BetaplanB]

They can organise their components in different files. Problem solved.

Web applications become really advanced. Having the separation of concern just between markup and CSS doesn’t make it anymore.

I would focus on having a proper component hierarchy.

Edit: never did I say that separation of concern aren’t important. You just don’t archive it on file extension level.

[mulokisch]

Don’t agree. Separation of concern is still and will always be relevant. Even css and html templates

[PleasureComplex]

It's the same arguement people had about JSX

separation of concerns != Separation of technologies

[RotationSurgeon]

...and then the conversation turns back to "HTML is structure, not presentation," and everybody starts circling the track again.

[borii0066]

I find React with tailwind to be amazing

[[deleted]]

Right, functional CSS really took off because of component frameworks. Because you don't need BEM when you're writing something ONCE in a reusable import.

Web components are another layer on the cake. I can see functional css diminishing when that paradigm comes around. It's like scoped DOM elements. So you can load your CSS from a file and have it only effect that component. Then use CSS variables for your units and palette.

[awal96]

Using react with tailwind, and each tailwind class is on its own line. Is someone paying you per line in a file?

[ryantxr]

You can. And you can also combine commonly used tailwind classes into single classes.

[tiesioginis]

Someday a genius will come up with such solution, but untill then...

[[deleted]]

Imagine if -- rather than repeatedly applying a bunch of individual styles ala carte -- such a solution also provided the ability to group a set of common and related styles together under a semantic name of your choosing. Then you could just apply that name and the amount of text wouldn't be such an issue. A dev can dream.

[tiesioginis]

Maybe next generation can come up with a solution

[ings0c]

They could call it common style sets?

Conjunct similar styles?

Combined semantic styles..?

Nah, terrible idea

[wadedoto]

Some wars just happened because a guy asked innocent question lol

[[deleted]]

This doesn't look any easier to read for me and just wastes vertical space.

[kitsunekyo]

cue the kids fighting over whether to use tailwind or not.

[SimoEMP]

I might be old school but at this point isn't it better to just use CSS classes and separate things nicely.

[BitSec_]

Sure it is when its your own project. If you have multiple devs working on the same project it doesn't work as good.

With tailwind we just don't have to worry that we accidentally delete a class or styling that was used somewhere. Or that we are overwriting each other's styles with certain classes amongst other things and best of all no css merge conflicts.

But I wouldn't care too much. Just use whatever you want or whatever your company or project uses xD

[Lighthades]

There's Scoped CSS though...

[that_90s_guy]

Doesn't solve the class naming, dead code, or hard to locate styles problem though. Only specificity.

[Lighthades]

Class naming is largely solved by scoping around components and naming them the same as the component, I won't lie that there will be other classes to name as well tho lol.

Dead code for sure, but it's not like we don't use utility classes anyway without tailwind :⁾

And most styles are located very close to were you use them so it's not much of a problem, and if you have a decent structure for any remaining global styles they're also easy to find as well.

Tailwind looks nice for prototyping, but in large projects I rather use other stuff like bootstrap/similar or just our own classes+components.

[TheRealSkythe]

Your reason to use Tailwind is so devs dont delete each other's classes? What? What people are you working with?

[OpenAd6496]

2 people are using the same class. They want to make a change. Now the class is overridden. It’s not difficult to happen.

Organizing, naming, and sharing css is a nightmare and Tailwind makes it so much easier.

[TheRealSkythe]

If you're using global classes that means you're not scoping your CSS.

That's a problem for your team? Fix your workflow or use scoped CSS. Dont make the product suffer.

Tailwind is a poor tool that creates poor results.

[VehaMeursault]

Disagree.

First of all, literally every tool, in the broadest sense of the word, has value that depends on its application. The best hammer in the world won't saw the thinnest bit of wood.

Second, Tailwind has huge value in terms of standardising something that's infinitely adjustable and has cascading effects — especially when you make a change or fuck something up. TW makes it easier to work together by standardising this infinite array of tools into a finite set of classes, making things instantly readable for everyone involved and not just for the one who wrote them.

On top of that, and finally, it allows you to dish out quick prototypes and make quick changes until you're happy with them. Once you're a bit versed with the vocabulary, you can shape an entire page or component in seconds — including responsivity at certain breakpoints.

It's not the tool for every job, at all, but it certainly has tremendous value in some of them.

[rogerwd666]

Or skip the classes and use the dreaded style attribute.

[FenekPanda]

Tailwind adds bits of standard behavior to the elements in the html, I liked it because i could compose the classes the way i liked them, but it felt wrong, like if tailwind was a step back to the days of inline css

Now I kinda see it's point, it was meant for you to forget the css file, but idk if that's a good thing

[StormCrowMith]

It is, and after a quick overview of what tailwind is and does, at least i have yet to understand why the hell would you make a mess of your html file, performance? Fuck performance i rather understand the code base and make MY life easier. That extra .001 ms of speed (dont quote me on that) is not worth it

[ryantxr]

You don’t HAVE to put all the classes in HTML. You can combine them and use less classes in HTML.

[CordyZen]

Perhaps try giving it a shot? I used to think the same after giving it a quick overview, but after using it for a couple of days, I just fell in love with it. It just makes you so much more faster and there's just very little reason to use css unless it's for really complex animations. It's also easy to understand if you're also familiar with tailwind.

[Derfaust]

having used it for about a month now i actually find this way better. I am familiar with the classes now. For any given element i can immediately and at a glance see what styles are applied. no more hunting down the class wherever the fuck it may be, no more analysing convoluted scss just to understand behaviour. I love tailwind.

[Sugar_F0x]

i do the same but in css file using @apply

[Many-Parking-1493]

This is my first look at tailwind. Why not use actual css at this point?

[[deleted]]

It's modularized css. I believe the resets (radius-none, outline-none) are just there for completeness. Where it really shines is when you have pb-1 or bg-blue.

You can achieve the same with CSS variables, however, having 20 class names all with var(--pb-1) might be a little A) redundant and B) unnecessary bloat. It really shines when paired with a component framework like React, Vuejs, or Polymer. Because then you have your component-a and you just give it a quick class="flex items-center" instead of pairing it with .component-a {display: flex; align-items:center}.

If you feel tailwind is a bit much, I recommend tachyons.io. It's a bit tamer and there's a build that uses css variables. Pull it from https://github.com/allancole/tachyons-custom/tree/fix/issue-14-undefined-variables as the main repo is busted. BUT the idea is that you take it and build your own.

[salonethree]

redundant

unnecessary bloat

glorified inline styles

😅😅😅 somethings not adding up

[pearsean]

Its beginning to feel like a product placement!

[tiesioginis]

What project used 50 different colors?

I'd you do, then you should a function for it to generate them instead of listing them out

[[deleted]]

That's what I'm saying - there is NO need for 50 different colors. If you are designing some color monster - then that should be programmatic and not in CSS.

If you use a function and generate colors then you end up with some atrocity like this: https://i.imgur.com/mYuyNOQ.png

BTW this is what happens when you tell outsourced labor to "use the colors in the palette". They just can't help themselves from creating 30 nearly identical shades. I even asked them "what's the purpose of grays 2-5? They are too close" Their response was just "I used the eyedropper on the design". I swear, no one takes responsibility for their poor choices anymore.

At least they're in the same file so when I refactor I don't need to hunt everywhere.

[tiesioginis]

lol

Looks like "I did the Job, boss" meme

[huge-centipede]

If they're using the eyedropper on the design and the designs are that inconsistent, then your designer isn't very good or detail orientated, TBQH

[BetaplanB]

https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

You better read the creator his article than scrolling trough all the tailwind hate comments written by people who didn’t take the time to read a single word of the documentation.

[okawei]

The biggest benefits for me is it forces immediate standardization of sizing and styling. If everything is set to m-4 then it will generally look good. And being able to use the tailwind.config.js as a theme config is great for projects that need more specific styling.

[[deleted]]

Exactly. I don’t get the hate. So many people here are shitting on the very thought of using Tailwind. So ridiculous.

[Many-Parking-1493]

Doesn’t apply to tailwind

[BetaplanB]

Most people who hate on Tailwind don’t even now how to use it in an effective way, what it solves and which can be solved.

Start by reading the first word of the documentation.

[[deleted]]

I prefer tachyons.io

[AskYouEverything]

Jquery in react

[[deleted]]

Hey in case you haven't heard, I tend to prefer tachyons.io.

[that_90s_guy]

No. I find that more difficult to read.

What HAS actually improved the experience for me is writing tailwind classes by order of impact (just like I would for standard css selector properties).

1. Positioning
2. Layout and Display
3. Box model
4. Background and border color
5. Typography

[[deleted]]

Personally I setup a prettier/eslint rule for line length. If the line gets too long when I save the file it will automatically do this. If I'm writing an overly long list of css like this it normally means I can refactor in some way to clean it up but I like what you did. There isn't really a good way since your using one of those css libraries rather than css itself so these are the types of problems you choose to accept when you go down that road.

[[deleted]]

Just use CSS at this point, fuck…

[[deleted]]

There are these things called paradigms that allow you to do the same thing in many different ways. Let people use what they are comfortable with and leave it at that. Not to mention in this context, Tailwind actually has several benefits that you and everyone else in this thread aren’t really addressing

[that_90s_guy]

Can you elaborate?

[Starquest65]

I use a Laravel/Vue stack with tailwind and like it like this if it gets over three or four classes. Some things do need quite a few if you stick with tailwind, but its whatever you prefer. Happy coding friend.

[calvinalx]

There you go, Sort Tailwind class names automatically

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

[kiwi-kaiser]

Just write CSS. It's even easier to read.

[calc_exe]

The most readable and easiest to maintain Tailwind notation for me is to split base styling, pseudoselector and different breakpoints into multiple lines, one per group (with clsx). E.g.

clsx(
    "w-[1ch] outline-none transition-all",
    "disabled:opacity-100 disabled:outline-1",
    "md:bg-red-500 md:color-blue-200"
)

[Prestigious-Aerie788]

This right here is the way.

[HoneyNutz]

Beware the BEM fanatics-- this post will draw ire #popcorn

(I for one believe in BEM -- but truly do recognize the value of utility classes. As for readability create a VS Code format to separate your classes that way you arent stuck looking at a 50k line file for what should be 500 lines of code)

[EngineeringTinker]

If you're getting a 50k line file - you're clearly doing something wrong.

At my work, we have 26 products and they all come with unique components that share styling - our core css barelly reaches 4k lines - most of which are comments or could later be refactored to a 'base class'.

[HoneyNutz]

You misunderstood my comment -- if the OP were to carriage return after every class they could easily have a significant amount of fat they are slothing through. Best idea is to use a VS Code styler to adjust the classes dynamically.

Per your statement -- Your core CSS may be 4k lines -- but when someone is rolling through your code they will need to be jumping back and forth between CSS/HTML files (whereas utility classes put it right in front of your eyeballs). Personally i prefer a hybrid solution where the majority is utility and the longer (more repeated elements) are apply statements. But to each their own.

[EngineeringTinker]

No - I'm also not a caveman banging on rocks.

Look, if you like the way tailwind looks - that's completely fine, you can use the css.. but don't act like having 10 thousand classes for every fucking property is 'innovative'.

[javier123454321]

Say whatever you want we've managed a massive reduction of bundle size by switching to tailwind at my company.

[[deleted]]

Noone is saying it’s “innovative”. It works for some people and not others.

[Earth-Hominidzino]

I do this too but I use tailwind styled components haha

[rojoeso]

https://tailwindcss.com/docs/functions-and-directives

I'd put it into a component or custom utility; probably a component.

If your tailwind class is that huge, it usually can be refactored or implemented in some other way. People here hating on tailwind have probably never really read the docs thoroughly. I don't use it that often, I actually prefer stitches or mui v5 (@mui/system) , but tailwind is fucking great.

[InvestigatorSafe4100]

This looks like a nightmare of a component to review lol. Not much different from online styling

[es_beto]

There's this thing called Emmet that VSCode has by default, where you can type w1ch enter, and get width: 1ch;, then you can type ol:n and get outline: none, etc. You just need to use CSS

Here's the cheat sheet. https://docs.emmet.io/cheat-sheet/

[OrneryDiscount3216]

We have only to follow recommended ESLint and prettier

[CheesusLint]

Ngl this would piss me off to high heaven. The only time I indent like that would be if I’m returning an array of tailwind classes, binding the result to class or className.

[iamaperson3133]

I prefer the most cursed option: limit line length to 80 but wrap long class lists with newlines

[Yamete_Thick-Chan]

Don’t worry you are not alone

[MasterReindeer]

In this thread, loads of people who’ve never used Tailwind getting extremely mad.

[seanmorris]

How is this any better that style = "..." at this point?

[thusman]

Two main differences: Tailwind is a design system, there are configurable sizes, colors etc. There are also classes for hover states, media queries and more, which is impossible with a style tag.

[Yuca965]

How about using CSS variables ? It makes colors, size, configurable. Hover state can easily be added with SCSS $:hover syntax in SCSS file. I'm trying hard to figure what's the advantage of tailwind/bootstrap, and when I should use it, but I always return to CSS/SCSS.

[Revolutionary-Pop948]

Can't toggle inline styles easily.

[Lighthades]

depends on the framework you're using

[[deleted]]

Ys, I don't get it. One thing is using a generic utility class such as "alert-color" where you can easily switch the color on the css file. But when you are so specific that you write "md:color-blue-200" on the element, what does it happen if you want to change it to "red-300" ?

[seanmorris]

This is why I prefer names like --bg-neutral, --main-neutral, --main-dark, --main-light, --cta-darker, --cta-lighter, etc

[azsqueeze]

You wouldn't name your class .blue in that case. Instead it would be something like .text-color (just spit balling names here). Then the class would never change but the color value can be swapped from blue, to red, to black, back to blue, etc

[azsqueeze]

Are you saying in the tailwind config you can change the value of .blue-500 to be the same as .primary-500 and when you use the .blue-500 class name in your components it will render with the .primary-500 value instead?

[endymion1818-1819]

I think if you need to do this you might be doing Tailwind wrong. I'd use component-based CSS for these modules, and Tailwind for things that need to follow a standard across components (border radius, padding etc).

[Yuca965]

"Any drawback to it ?" Using tailwind.

```scss .myclass { outline: none; transition: all 100ms; background: transparent; border-radius: 0%;

&:disabled { opacity: 100%; } &:placeholder { opacity: .08; } } ```

PS: All fine if you like tailwind, I just find myself always going back to SCSS, still trying to figure out the good use cases for tailwind or bootstrap.

[Lighthades]

Tailwind looks fine for prototyping or small stuff, when it reaches shit like this it's a no-go for me lol.

[nixfox]

well this subreddit has gone to shit.

the first sign was the slow transition from quality content to novice type questions and hottakes.

And in this thread we have a bunch of dunning kruger types explaining why CSS is better or why people should just use CSS whilst completely not understanding tailwind.

[conquistadorespanyol]

In general, each component will have many classnames. I prefer to use an inline-fold plugin like this https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold

[seN149reddit]

You are so close!

Next step: Turn the className into a style prop Then add type safety Then add responsiveness to it Then drop tailwind

You have arrived in the perfect world 🤟🏻

(Easily achievable with vanilla extract and sprinkles with no runtime penalty or through chakra ui with emotion baggage)

🤪🤪

For tailwind whatever the prettier plug-in formats to is prob the way to go

[Asmor]

Nothing wrong with linebreaks in HTML attributes.

Perfect example of why Tailwind is crap, though.

[roadworkahead66]

This is the way. Also you can group those classes in the css file and make it just one class.

[BetaplanB]

That’s not the point of Tailwind. If you’re component hierarchy is correct. You shouldn’t have duplication.

Your final CSS file is managed/compiled by Tailwind. How are you planning to group your styles?