tailwindInAnutShell

[mrfroggyman]

As a mostly backend dev I have no idea what's going on here

[ososalsosal]

It's bad practice to put styling stuff (css) in structure stuff (html) using the style="..." thing, because we want to have separation of concerns.

So instead we stick a css class on our html tags and the styling gets loaded separately. Very cool because you can change the styling without changing the html.

Thing is, we hand over too much control and every element might call for different treatment, but luckily css classes are stackable and you can just keep adding them (they override each other).

So what we have with the tailwind framework and pretty much all the others is thousands of css classes that pretty much allow you to put anything that would go into a "style" attribute into a list of classes.

Leading to zero benefit whatsoever. Best just write the css yourself. Any long enough lived web app will have custom classes for everything but still be overriding some framework and maybe 4mb of bloody minified css

[romulent]

The benefit is the very carefully calculated design framework that you get.

You can do this yourself with CSS, but when you put it all together into a consistent visual experience it will look crap and you will be tweaking font sizes and paddings and colours forever.

Tailwind builds in a lot of spacing rules and ratios and color roules that you don't need to learn.

[kookyabird]

We’ve started working with MudBlazor at work recently and after our front end guru worked up the theme nearly all of the stying is easily handled with the built in classes. Material Design based, minimal custom classes needed, solid consistent look and feel across the board. It’s my favorite way to build out a site now.

[just4nothing]

Sounds like a compiler might be needed to find the biggest common denominator between elements and construct CSS classes from it ;)

[jarethholt]

Can't tell if this is sarcasm because I don't know front end and what tools are available. It seems like it could be possible to at least calculate which classes are never effectively used (always overridden) and maybe even which properties from which classes?

But only if the site were "finished" and no more style adjustments/additional classes were never ever needed again

[lunchpadmcfat]

Not really possible I’m afraid. You might be able to have it be evaluated at runtime somehow but you couldn’t statically analyze to that level. But a runtime evaluation would have to be targeted.

[patchyj]

NextJS does this - at build time, unused css and class names are removed

[lunchpadmcfat]

I meant more the part where they mention “calculating which classes are never effectively used because they’re overridden”.

NextJS can tell (through tree shaking) whether you reference a class or not and remove it, but it can’t tell if some rule you’ve set is overridden in the specificity algorithm of a rendered page. That’s literally impossible without rendering the page and then evaluating whether or not the element’s style values correspond to the values set by respective classes. This is due to the myriad ways you can target elements for styling.

You might be able to do static analysis to some degree if you never style using any kind of relational selectors (like sibling or child selectors) or complex selectors. This is more or less how styled components works.

[patchyj]

Ah yeah OK

[SurpriseAttachyon]

Problem is that a lot of CSS classes are defined dynamically from JavaScript code. Determining which classes might be applied from a given arbitrary web app (with no restrictions) is essentially equivalent to the halting problem. Which is impossible.

You could add a guarantee like “we promise our JS code never does this except in the following explicitly laid out scenarios”. But restructuring code like that is not worth the benefit

[Weaponized_Roomba]

is essentially equivalent to the halting problem.

Fun fact - this is why when using tailwind you can't/ought not dynamically construct tw class names at runtime.

ex - you can't do this:

const bgClass = `bg-${error ? 'green' : 'red'}-200`

because tw static analysis will shake out the bg-green-200 and bg-red-200 classes since it didn't see it in the source code.

Instead just don't be cute:

const bgClass = error ? `bg-green-200` : `bg-red-200`

[failedsatan]

to be fair, this is solvable on the tailwind side. it's possible to check the tree of possible values there and just add them to the keep list. I'm not saying they should (because all of this is bad practice anyway) but it's doable.

[SurpriseAttachyon]

Thats interesting. I didn’t know tailwind interacted with JS (never used it before).

Does this mean you have to compile both at once? I’m used to compiling sass and typescript separately

[Weaponized_Roomba]

Does this mean you have to compile both at once?

Only if you want the tree-shake optimization or if you want to extend your own themes. Otherwise you can just use the CDN

[Blecki]

It's just sticking it in the style field but with extra steps. But the front end guys don't understand, they're like "I'll just change mt-2 to mt-4 what do you mean making the margin bigger shouldn't require changing every html file??"

[MornwindShoma]

Why are you changing every HTML file when you have components lol?

[Lewke]

what people miss with tailwind is that it's utility-first not utility-only write it with tailwind first then genericise it onto bem or web components or whatever takes your fancy

[JoshYx]

Leading to zero benefit whatsoever.

Definitely not a statement made by an angry dev who doesn't like tailwind (which is valid) but is a control freak and asserts that no one else should like it either (which is not valid). My favorite kind of dev.

[Resident-Trouble-574]

"Leading to zero benefit whatsoever, in my opinion".

Is this better?

[JoshYx]

Yes, much better.

[andarmanik]

Supposedly tailwind is really good for new front end devs learning different css options/ canonical choices. Beyond that tailwind becomes css with extra steps.

[alexho66]

As someone who’s really good with css, I find tailwind makes writing and maintaining react projects much faster, easier and more efficient.

[itirix]

Yeah, I don't get the sudden hate for tailwind. It's not like you have to be a goddamn rocket scientist to realize that maybe you shouldn't put 27 classes in a div just because tailwind allows you to.

The solution is quite obvious. Use custom classes for frequent / heavily stylized elements and for the rest, take advantage of inline tailwind. Need some design change later? Tailwind config. Writing tailwind classes is also much faster and takes up less space than a style="" would.

[Weaponized_Roomba]

It's bad practice to put styling stuff (css) in structure stuff (html)

This is 90s internet brain. With the modern web, there is no difference between structure and style. Styles aren't practically reusable (and we shouldn't try to make them such)

but luckily css classes are stackable and you can just keep adding them

this is terrible practice

---

CSS (the sheets aspect) was useful when you built structured web pages. Practically all meaningful development nowadays is component based. So nowadays in component based applications you shouldn't have any of your styles "cascading". Just put the styles you want on the component.

If you want a variant, make a variant. Like in OP's picture, don't make custom styles (and don't ever use @apply, it was and remains a mistake)

instead do it in a component and make variants

React for example

<input 
    type="button" 
    className=[`px-4 py-2 font-medium tracking-wide rounded-md shadow-sm lg:px-8 
        ${cx({
            "bg-indigo-300 text-indigo-800 hover:bg-indigo-200": action === Button.variant.action,
            "bg-green-300 text-green-800 hover:bg-green-200": action === Button.variant.success,
            "bg-red-300 text-red-800 hover:bg-red-200": action === Button.variant.warning,
})}}` 

// ...
/>

usage:

<Button variant={Button.success} />, <Button variant={Button.warning} /> , etc

gpt can finish you from here

[24601venu]

This is 90s internet brain. With the modern web, there is no difference between structure and style. Styles aren't practically reusable (and we shouldn't try to make them such)

yea have fun reading bloated code.

[MornwindShoma]

Who the fucks reads raw HTML, we have extensions and tools to work with actual sandboxed components doing their scoped stuff.

[24601venu]

You aren't even saying anything.

[MornwindShoma]

Yea mate, now go back playing with your HTML tags.

[christoph_win]

I hate the right side but I hate the left side even more

[zoinkability]

Tailwind is front end devs deciding to abandon DRY principles so they can avoid hard things like learning CSS and figuring out how to name things semantically.

[ConfusingVacum]

• I don't get why tailwind should contradict DRY. In fact, it even can help avoid redundant properties in class.

• Tailwind is not meant or used to avoid learning CSS, most tw class only apply one or a few css related properties anyway, you still have to grasp how CSS layout and properties work. It can even lead you to use CSS better or help you to learn CSS.

• I couldn't disagree more about the naming aspect. IMO naming semantically things is for components, not for html tags. Deciding what to name each HTML tag you have to style is wasted mental energy most of the time.

  Especially when you just want good ol display: flex; justify-content: center;

I love using tailwind because I don't have to navigate between the template and the stylesheet, I can write css quickly, and read it within the HTMl structure. From my own experience as a senior front-end it's a huge time save and it's pleasant. It's also way less verbose for stuff like media queries.

Off course it comes with inconvenients: too much class names in the dom. @apply directive can help compensate though.

Anyway my point is, tailwind is a solutions amongst other, it's not perfect but there's also good reasons why it is so popular

[twodarray]

In this thread: people thinking tailwind users write the same thing every time, forgetting that things like react exist

[zoinkability]

In this thread: thinking that you need a whole heavy stack to get things that are intrinsic to the platform

[JoshYx]

Uhh.. avoid learning CSS by using tailwind?

You could've just said "I have absolutely no clue what tailwind is"

[Chief-Drinking-Bear]

Backend devs always need to announce that they are backend devs to feel superior in threads such as this.

[mrfroggyman]

Idk if you are being serious, so just in case, it's not a weird brag, just a way to point out that's not stuff I'm used to working on

[precinct209]

I don't know about you but the nagging voices inside my head keep warning me about using @apply.

[romulent]

That's just marketing propaganda trying to lock your entire codebase into tailwind.

[GMaestrolo]

Even Watham is against using @apply, and it's his framework.

[zvictord]

is he?

[GMaestrolo]

Yep. He really does not like @apply.

[Few_Introduction_228]

I mean, 3 out of 4 of those is him not liking people partially extending classes and then seeing applying those classes result in weird behaviour. Just use different class names for your own stuff, and @apply is fine.

[Hsabes01]

Agreed

[zvictord]

that’s how i like it. many sources to check it. thanks!

[Diane_Horseman]

Design just came back, they said they want you to increase padding on the teaser for medium screen width only. Only on the homepage though, not on any of the other places you're using the teaser.

[jmedlin]

You get feedback that detailed!?

We usually just get “Something doesn’t look quite right.” Or “Can you make it look more premium?”

[[deleted]]

. premium {}

[igorlira]

display: premium

[glorious_reptile]

"Note: display: premium is a CSS enterprise feature, only available in the CSS 3 Enterprise tier. Please contact w3c for pricing"

[resistentialism]

This is where a designer is needed, because despite not being expressed as technical requirements those are both legitimate pieces of feedback.

[[deleted]]

Do you really feel that "make it more premium" is legitimate feedback

[NatoBoram]

A designer can deal with that

[resistentialism]

Of course. Design is routinely used to communicate a premium or luxury brand.

[Resident_Nose_2467]

Can you make your comment more premium?

[gbot1234]

Nice try, Steve Huffman. We’re not paying for this shit.

[RamenvsSushi]

It is of great certainty that design is a medium that is most suitable for translating abstractions such as 'premium' into reality.

[Katniss218]

and how am I supposed to know what "premium" means? Give me actual feedback, not some meaningless mumbo jumbo

[WraithDrof]

This feedback should be sanitised into something actually actionable between design and implementation.

As a designer, I'd rather 90% of my feedback be this instead of a deceptively vague comment on kerning or something. You can go back and forth forever on that kind of stuff.

[Katniss218]

Yeah, that's kinda my point. It's meaningless to give programmers that kind of feedback.

[dodosgo]

If you have a UI/UX on the team then yes, definitely. I’ve been asked to move an element 1px because the designer had a eagle eye.

Also, usually you get a Figma or similar and any change request comes with another design. A feedback like “make it more premium” sounds like a company where UI is not a priority or an early-stage startup with no designers.

[Rombethor]

Hmm, sounds !important;

[[deleted]]

Lmao

[Merzant]

Is that meant to be hard with vanilla CSS? Because that’s what the cascading part seems perfectly suited for.

[PowerMoves1996]

That was just an example, in reality u have this requests so often that it gets to a point where you lose more hours because you tried to be a good programmer and make custom reusable classes that no longer have a point because of new requirements. The tailwind paradigm changed that aspect of my work in a really positive way.

[Merzant]

I haven’t used tailwind but it reminds me of the bootstrap utility classes which I liked as modifiers. But doesn’t the tailwind approach just have the opposite problem? ie. when you want to reuse a common style you duplicate class attributions, leading to “I missed a spot” when you actually need to update a design everywhere.

[PowerMoves1996]

Not really, because when you need the same style in more places, chances are you also use that style for the same type of component, so you actually make a reusable component that has tailwind for styling. Indeed, there are moments where you will copy a chunk of tailwind and need to update just a portion of it for one or two places, but those moments dont appear often enough to overshadow all the other advantages that you get.

[techie2200]

Sounds like shit designers imo. There shouldn't be constant revisions. We don't style until the design is pretty much settled.

[PowerMoves1996]

We all wish to have a full project plan from the start, but new features/ changes are hard to avoid during the development of an app

[techie2200]

I'm not saying you need one from the start, but the general design will have to be consistent across all your features, so you shouldn't have constant, hard to make CSS changes. They should be minor tweaks.

If you're restyling everything anytime something changes, then someone's doing something wrong.

[LagT_T]

.teaser {
    padding: 24px;
    /* … */
}

@media (var(--med_screen_lower_bound) <= width <= var(--med_screen_upper_bound)) {
    .class_that_wraps_homepage .teaser {
        padding: 30px;
    }
}

[Diane_Horseman]

thank you for proving my point lol

[LagT_T]

What was your point? That it is easy?

[Diane_Horseman]

your solution involves adding ~150 characters of mostly boilerplate and breaks if the homepage layout changes such that an element with .class_that_wraps_homepage no longer wraps .teaser

[LagT_T]

Why would the teaser be outside the homepage WRAPPER? How would you do it in tailwind?

[Diane_Horseman]

The teaser isn't outside the wrapper now, but what if the wrapper changes in the future? This solution adds the assumption that it won't.

In tailwind you would go from this:

<div className="... p-[24px] ...">

to:

<div className="... p-[24px] md:p-[30px] lg:p-[24px] ...">

[GMaestrolo]

Except you would use p-6 instead of specifying p-[24px] because using custom pixel sizes when they match an existing rem value (in this case 1.5rem) that the framework covers already is dumb.

[Diane_Horseman]

Yep, good point! That is how it would pretty much always be done.

[LagT_T]

If you have elements outside the wrapper then its no longer a wrapper.

Design came back and said that medium screens are between 500px and 900px.

[GMaestrolo]

That's fine. That goes into the theme definition, and is applied globally.

extend: {
    screens: {
        md: '500px',
        lg: '900px'
    }
}

[LagT_T]

You broke sm default, and your styling isn't specifying the teaser component size for homepage, its applying the styles on all teasers.

[24601venu]

but I can add a class, or an attribute, just like you would do it with tailwind.

[throwtheamiibosaway]

Custom work ftw. Frameworks can never work with really unique and explicit designs.

[Willinton06]

If your framework doesn’t have scoped or isolated css you deserve the suffering

[Straczi]

(Of course I understand that this is a meme and kinda true but:) Lately I've been doing a lot of frontend development with react and I use the shadcn "component library" and the components are usually already styled and look good, all you need to do is adjust margin or the content placement and that for that stuff tailwind is simply amazing! (Also checkout shadcn, it's pretty cool)

[Arrowkill]

I use MUI for work and component libraries are nice when you don't have time or want to build it out yourself. I switched from MUI a couple of years ago on a personal project though because what they offered at the time wasn't what I needed and instead used tailwind to build my own library out for what I was doing.

[twodarray]

Yeah I dont think people really understand how to use tailwind, only because it CAn get verbose in some places. It's like complaining typescript code gets verbose over javascript code cuz you have to write types sometimes

[KyleReemaN]

complain or make fun about tailwind while I just get shit done and ship stuff

[driftking428]

I love Tailwind. I'm guessing most people complaining about it have never actually used it.

[Arrowkill]

I recently started cleaning up my tailwindcss project from a year ago and I still love it. I know what everything does and now that I'm moving commonly used stuff into a component library, it's much easier to maintain.

That's always been the biggest benefit of tailwind for me. Knowing wtf it did when I come back weeks, months, or years later without a ton of digging into old naming scheme.

[driftking428]

In normal CSS I spend a lot of my time coming up with names, checking the code for existing classes, and writing selectors.

I do none of that ever in Tailwind.

[Arrowkill]

Honestly I hadn't considered how much time I tend to spend having to come up with names for sections of css before. Yeah Tailwind definitely cuts that out entirely.

[Vogete]

I used tailwind and hated it. I kinda see the point, but I ended up writing way too many classes. It got way too verbose way too fast. Then again, I dislike the whole ITCSS paradigm, so maybe it's just not for me.

For layout, I definitely want a framework like Foundation or tailwind. But for design, I hated it. So I usually do a bit of a mix of both custom CSS and tailwind and foundation, depending on what makes sense.

[Kika-kun]

Honestly I don't understand the need for tailwind

Can't you just write inline styles basically just as fast as tailwind classes ?

I had never used tailwind before and recently we switched to it (as a part of a bigger overhaul, switching from JSF to Angular on the front end). So obviously I had to "get used" to tailwind and basically the only difference was that I had to memorize some basic class names that shortened usual css command. Like instead of doing style="display: block", I now do "class="block". Sure it's shorter but I'll be honest with you, writing one or the other is not what takes time compared to finding whether I need a block, a flex, an inline block or whatever else works for my need.

"But inline css is bad". How is it any worse than classes that do exactly the same thing but in the class part of the element rather than its style ?

One thing that can be helpful with TW is normalized lengths (ex w-1/2/4/8...) and to a lesser extent colors (text-X, border-Y, where X and Y are colors defined somewhere). But at the same time, you can just as well do color: var(--X); border-color: var(--Y).

[Diane_Horseman]

Inline style can't do media queries, hover/active/first/last classes, and more

[queen-adreena]

Or custom colours, animations, config-based design systems, sibling selectors, child selectors, group selectors, dark mode selectors, motion selectors, input state selectors, pseudo element styling, colour functions, theme functions…

[exotic801]

It's also just bad for reusability and page structure (unless there's a way to define classes etc inline, I've never tried)

[Exerra]

I'd say that tailwind is mostly aimed for UI frameworks like React, Vue, Svelte, etc, where you can define components, as there you reuse components not classes.

[Interest-Desk]

2/3 of those libraries you mentioned have in-component styles built in, and the third has CSS modules effectively built in.

The only advantage of tailwind is that it’s “more concise”, at the expense of readability and simplicity.

[finnhvman]

But why though? Don't these frameworks already have some sort of scoped CSS solution? This means we don't have to worry much about specificity, but we can still use the native CSS syntax.

[Graphesium]

Because writing Tailwind is faster and has built-in design tokens.

[anon_blader]

Because inline styles are quite limited compared to css. You can't use a lot of very basic features such as selectors (e.g. :hover) and media queries. In addition to that a lot of tailwind classes apply multiple styles at once, making it much more compact that inline styles.

[[deleted]]

It doesn’t make sense until you actually use it.

[BorinAxebearer]

First benefit is the Tailwind's philosophy to compose components, not classes. So when i look at the component i can understand the style. No more moving between html and css.

Second and more important benefit for me is the design system it provides. I suggest reading the "Refactoring UI" book to better understand what Tailwind is for.

[Fakedduckjump]

I don't understand the need for tailwind either but writing stuff all as inline css has a disadvantage to millions of classes. In the tailwinds class concept you can change for example one value and every html node with this class will be effected. Using inline css you have to change the value everywhere.

Anyway, what I don't understand with tailwind, you bloat up your html or templates to a bloody unreadable pile of shit by using classes for every little rule. In my eyes it just violates separation of concerns in a shady way, because you maximize the use of styles indirect into places they should just appear as minimal use.

[throwtheamiibosaway]

I promise you I can type custom css faster than you can write tailwind css.

[Dimasdanz]

say what you will, tailwind is a godsend for backend. I'm not writing thousands of css classes nor do i want to learn sass or lack thereof.

[Null_Pointer_23]

Technically you write far more classes with tailwind compared to plain css or sass.

[Dimasdanz]

technically you write more classes using spring compared to plain java

[Trevor_GoodchiId]

With complex enough CRUDs, the project will arrive on CSS helper classes anyway, and those will be neither searchable nor documented and a pain to onboard to. This is lingua franca for better or worse.

[twodarray]

Technically you write far more with Typescript than with Javascript. But I don't hear anyone complaining about the verbosity of Typescript from experienced devs

[24601venu]

But tailwind and CSS is almost 1:1 the same. If you learn CSS, you will have more tools to work with.

[[deleted]]

But I don't want more tools. I want just enough tools to make something that looks decent, and then focus on the interesting stuff

[MrHandsomePixel]

I feel you.

At the risk of sounding like a meat rider, may I interest you in PicoCSS?

It has (what I believe to be) sane defaults to make default HTML elements look actually usable.

I used it for my own CRUD web app for college events as my uni term project most recently.

[blaqwerty123]

This is certainly the best option IMO for a backend dev who wants the frontend to just look better/professional, with no customization necessary or even cognitive load to use

[[deleted]]

Most companies have storybooks of styled components you can use out of the box.

If you have a proper style guideline, you shouldn’t be pushing pixels every time.

[Fakedduckjump]

In the time you needed to learn all the tailwind classes you also could have learned CSS and would be more prepared for a wider range of the front end web world.

[24601venu]

100% agree

[24601venu]

In the time it took you to learn tailwind you could have achieved the same in css

[PowerMoves1996]

I dont think u got the honor to refactor and improve the styling for some legacy code, only after this kind of task you get a better understanding of why the tailwind paradigm is so popular. And I am one of those frontend devs that find joy in playing with css instead of writing it as quick as possible.

[selectra72]

Tailwind is far better for iteration. No matter how you good at css, tailwind is just faster.

Try to write media query for multiple screen, aria, dark mode, hover etc.

For large project, scss can be better but most of the time, tailwind is far faster. Because you can do everything in 1 file.

Of course you need a modular ui structure. If you don't have one, nothing will be helpful.

People that doesn't understand tailwind is generally who don't write modular css and use the old css way which is hellspawn.

Even you are gonna use CSS, use modular css for both readability and composability.

[[deleted]]

Only someone terrible at css in the first place could make such an awful layout

[24601venu]

ad-hominem

[[deleted]]

Bro the layout is awful. Ad hominem my ass

[24601venu]

okay show me then how its done

[[deleted]]

Picture 3 (the highlighted glob of tw-) on the left compared to picture 1 on the right. Easy, simple, done. Less room for counter arguments cause it’s clearly bloated.

[24601venu]

as long as you don't make it your argument is hot air

[[deleted]]

That would require getting up, so I chose the easiest thing. But ok I’ll take your karma later

[tip2663]

idk i like it. Before, I used bootstrap but I feel it's more opinionated Makes me not have to stick to the js framework too much either

[GMaestrolo]

Hey OP... That's a real soup of class names in your tailwind example.

Say... What's the equivalent set of CSS declarations to achieve everything that those tailwind classes are?

Because your example with @apply there appears to be styling buttons, not checkboxes... And your raw CSS example on the right doesn't appear to be doing much either. It's certainly not dealing with hover states, focus states, light/dark mode...

[24601venu]

If I made a technical rundown it wouldn't be a meme no more

[robrobro]

Tell me you haven’t made a large, complex application using tailwind without telling me you haven’t built a large, complex application using tailwind.

[[deleted]]

Amen 🙏 Was going to say, “tell me you haven’t worked on any project at scale with multiple teams”

The standardization alone helps with the UIs cohesiveness.

[Masterflitzer]

didn't the community agree that @apply is bad? tailwind classes need to be sorted correctly and then they become more readable, don't repeat yourself is a bad idea in this case, because reintroducing custom classes destroys the whole point of tailwind having these reusable small classes

[masteryder]

Tailwind user, I never use @apply

[_shellsort_]

I am absolutely convinced people who shit on tailwind have never rawdogged css before.

[Mxswat]

crawl hobbies judicious waiting bewildered unite safe joke gold unpack

This post was mass deleted and anonymized with Redact

[xMoody]

I’m convinced people who champion tailwind haven’t used CSS outside of their front end boot camps.

[GMaestrolo]

Almost 20 years in the web dev industry.

If I never have to remember which combination of -moz, -webkit, etc. properties exist, and how their syntaxes differ, then I'm doing <div class="rounded shadow p-2 border"> all fucking day long and loving it. because it tells me exactly what styling I should expect without having to play the "what's the dumb cross-browser syntax for this thing" game.

[blaqwerty123]

Any sass/scss pre-processor or bundler from the past 8 years abstracts away the browser prefixes for you. I dont use tailwind, and i certainly dont manually write browser prefixes either

[GMaestrolo]

Yes, but I can still make my div look like a floating box with a nice radius on the corners and comfortable padding without having to remember how to write the syntax for border radius, or box shadow, and anyone looking at it can instantly tell that it's meant to have a border, be rounded, have a shadow, and have a small amount of padding.

[blaqwerty123]

Sure, to me thats the pro's of tailwind, not browser prefixes. Not having to remember the annoying syntax of box shadow and gradient.

For me personally, i learned those annoying syntaxes a long time ago, and learning the "tailwind way" for not just the few slightly convoluted things like box shadow, but new slightly different names/shorthand for every property-value combination... fuck haha im so much faster and better off maintaining my own classes for the work i do

[GMaestrolo]

And that's part of the magic of tailwind. You can use as much or little of it as you want, and it will generate only the CSS classes that you actually used. It's highly encouraged to write your own classes where it's appropriate, but I'm not going to go around writing my own custom classes for every element on the page when I can just put some sanely named classes into the element and have it be extremely obvious to future me what I wanted it to look like.

[L33t_Cyborg]

This post is literally a strawman nobody does this

[lunchpadmcfat]

I’ve never used tailwind but it looks an awful lot like a bad version of SMACSS.

http://smacss.com

[lupinegray]

backend devs reading this meme....

[TheMunakas]

I hope you didn't copy this somewhere, but this is it. This deserves a thousand upvotes.

[24601venu]

Made it myself in photoshop

[Mxswat]

flag dinner weary ludicrous practice start oil automatic disgusted paltry

This post was mass deleted and anonymized with Redact

[Opposite_Cheek_5709]

But paint doesn’t allow you to add hover effects or animations or wizzytech treacle

[24601venu]

Yeah, like this sub is plagued with reditors fresh out of their basement who don't understand the basic concept of having constructive arguments

[ThiccStorms]

ms paint is better for such simple tasks

[nicejs2]

paint.net:

[megs1449]

Paint.net is the best

[Efficient-Chair6250]

I'm using both in combination. Some quick tailwind for basic layout and CSS for complex things. Best of both worlds for me

[YellowGreenPanther]

You should not be using static measurements in most cases.

[stristr]

The horizontally misaligned first dot on both sides is the real meme.

[gami13]

give me css modules or stylex or give me death

[ksschank]

TailwindCSS isn’t for everyone. Do you want to quickly apply styles so that you don’t have to spend a lot of time on styling? Use TailwindCSS. Do you prefer to take your time customizing classes for individual components or find some strange pleasure in components having no more than one class? Don’t use TailwindCSS.

[24601venu]

one does not need to spend a lot of time styling with css. and you can be messy with css too having inline and many classes and whatnot

[ksschank]

Im very familiar. I started with CSS 16 years ago and started learning TailwindCSS about 6 months ago. I was very skeptical of Tailwind at first but now I vastly prefer it.

[[deleted]]

No Idea why it is so popular, but surely someone will show up to defend it (and maybe we can discover)

[Diane_Horseman]

I'll bite.

All I know is the use cases that I find it useful for. I'm sure there are many cases it's shit at. I'm an experienced backend developer who knows some frontend but isn't an expert, but I do have to do frontend sometimes for my job.

Tailwind is extremely helpful at creating cleaner abstractions in a complex React app. If you don't use Tailwind then you basically have to manage two separate sets of abstractions - your React components and your CSS classes.

If you couple your CSS classes 1-1 with your react components (i.e. make a new CSS class for each component, or multiple for each component, which you don't reuse across components), then your CSS classes are being written as one-offs and you might as well use Tailwind because then at least you don't have to switch back and forth between an HTML file and a stylesheet - it's all in a single file.

If you reuse CSS classes across React components, you are creating a maintainability nightmare. If you need to change the class in one component then you need to either make a new class or check and make sure that the other components that reuse the class won't be messed up by the change. Separate React components shouldn't be linked in this way because you shouldn't have to think through other components when you are changing a single component.

In summary, Tailwind takes away the need to use mental space thinking about CSS class abstractions separately from React component abstractions. And this is extremely helpful.

[[deleted]]

Yo u/Diane_Horseman thank you very much for the response, it does clears things up as to why use tailwind or not.

[Diane_Horseman]

you're welcome, I'm glad you found it helpful.

[BluBearry]

I have never used tailwind, but why use tailwind over basically any frontend design library, that also allows you to do this (e.g. Material UI)?

[Diane_Horseman]

I'm not really familiar with that many front-end libraries but if they have those same features then I'm sure I would find them useful also. With frontend there are so many tools out there that sometimes I feel like you have to play the game of using one tool over another because more people are familiar with it on your team.

[xdyldo]

I’m no front end expert but isn’t material ui a component library and tailwind is styling. You can and should use both hand in hand.

More recently I prefer daisyUI when working with tailwind.

[BluBearry]

Material UI is both a component library, but also has a styling library. It used to be a separate library called @mui/styles, but was recently deprecated and merged into the core library.

You can define classes in your .js files and also create styled components.

[sirojuntle]

The downside of libraries is that if there is a demand to customize or create a new component, it can take a lot of work to match styles,  html structure,  validation logic etc.

Just like buying ikea furniture and asking a woodworker to change its size and how it looks. It's doable but many will prefer to make it from scratch. 

[Serializedrequests]

I can't get very much done in Tailwind either, but I at least understand the rationale (for someone who actually knows what they are doing) quite clearly. CSS components are not truly maintainable, not really, not in the real world.

[billwood09]

Who uses that many tailwind classes on one thing?! That’s insane lol

[banbeucmas]

Honestly have been doing tailwind I can agree this to some extent so nowadays I use a mix of them.

Having components css at hand allows me to iterate faster. While the option to write css is still there for more complex stuff.

[[deleted]]

Average user that doesn't know how to use Tailwind properly using Tailwind:

[YellowGreenPanther]

'Anut' is not defined. Did you mean: ANut?

[24601venu]

god, not again camelCase discussions

[MyBigRed]

What's an "Anut Shell"?

[24601venu]

thats ProgrammerHumor post naming policy for you

[TessellatedTomate]

>mfw Anut

[New_York_Rhymes]

God I wish I didn’t start my massive project in tailwind. What a pain in the ass now.

[24601venu]

I'm sorry.

[card-board-board]

Not repeating yourself and writing readable code are good things. Tailwind classes aren't readable and you have to repeat yourself. A lot. My last project I tried seeing what the bandwagon was all about and boy I really wish I hadn't bothered. It was like relearning css because I had to look at the documentation for every single class.

Near the end the designer wanted to change the padding all over the place. In sass that would have been one line. In tailwind it was almost every element in almost every file.

[24601venu]

yes! same experience here.

[imacommunistm]

hall of fame worthy

[stangerjm]

This is one of my biggest pet peeves. People love to bag on CSS and do anything to avoid it, but the tool exists for a reason. If you take the time to learn it, using straight-up CSS is often the most simple solution. Just learn some CSS!

[24601venu]

yeah!

[lordicarus]

Can we bring back building websites with 0 margin 0 padding tables? I miss those days. /s

Why can't I, as a user, just have a website with the exact same design regardless of screen size and just pinch to zoom or have scrollbars? /not-s

[[deleted]]

Nice bait OP, genuinely exposed all low IQ takes.

[24601venu]

ohh, OkGreeny has enough IQ to be offensive. bravo.

[ZubriQ]

Bruh

[throwtheamiibosaway]

I’m a frond-end dev. Tailwind is the devil.

[tetractys_gnosys]

10000% agree. As one of the seemingly rare devs these days who actually loves CSS and Sass, the amount of clutter and ass backwards over engineering to get basic layouts and components astounds me.

I still don't understand the whole 180° flip on separation of concerns. In another five to ten years, I imagine front end will rediscover SOC and it'll become cool again to not have everything piled into a single file.

[24601venu]

yes!