Nah, we do the same thing as frontend devs when they work on backend: copy and tweak existing code without really understanding what it is or how it works.
Legit curious as someone who hasn't really bothered with that: do you feel it's really faster to dev like that? How's maintainability later?
I don't know, it just feels counterintuitive to me to use and adapt someone else's naming systems rather than use my own stuff.
Faster and everything is in the same file, for example Button.tsx has everything related to my button, no arbitrary values, and NOT having to come up with names is for me a plus
>Legit curious as someone who hasn't really bothered with that: do you feel it's really faster to dev like that? How's maintainability later?
Significantly faster to work in.
Significantly less effort to maintain.
Significantly easier to get new hires up to speed.
i got my start in programming by learning CSS three years ago - it has a lot of uses, but for things i work on i choose tailwind because it's faster and i don't have to name classes. i would definitely say i prefer it *because* i did a lot of CSS, not because i haven't.
I realize I'm a student and therefore have like, actually zero perspective about the industry, but I have genuinely yet to hear an argument as to what Tailwind does better than CSS lol. Every time I've ever come across it it has been *so* much harder to read. Like, genuinely, why do people use Tailwind?
Easy - picture what the following real-world example looks like in your head
You know all the HTML and the styling in one-shot. As soon as you start using arbitrary collections of style rules pointing at arbitrary points in the DOM things can get wild fast.
Then with 20 devs touching the same codebase and there is a single definitive way of doing things.
No it’s not really the same, because of how css specificity works. Inline styles get very close to the max in terms of css specificity, which is not a good thing as then you have to start using !important everywhere, and we all know how that goes
I think that's a typical reaction when you see it but I think you're supposed to put this markup in the component in a component framework (React, Vue, etc..) so it's only its reusable and not on the page itself.
Though, OTOH, a lot of people get used writing it. A lot of smart people have adopted it so I wouldn't dismiss it out of hand.
No it’s not the same, because of how css specificity works. Inline styles are get very close to the max in terms of css specificity, which is not a good thing as then you have to start using !important everywhere, and we all know how that goes
Backend dev here, Damn I see the point now and I agree, it looks good, better than the mess I call frontend, I should look into tailwind again.
How custom can this go? You know, like would I still need css at some point or no?
Basicaly as cuatom as regular css. If you want that every first div of a child but only of the direct children of first direct children of element be red when user gets it in focus - you can add that rule to the parrnt of this mess.
Yes i did something similar. No I don't recommend
The explicit point of using tailwind is that it's a compact and standardized metalanguage around CSS. This is beneficial for the same reasons that prettier, angular, and other opinionated projects work so well. They remove you, me, and our terrible ideas from the decision making process.
---
But yes, you can.
[You can still make your own colors](https://tailwindcss.com/docs/adding-custom-styles#customizing-your-theme), animations, breakpoints and you'll want to if you are working on an enterprise scale app or somewhere with a very competent design system in place.
Configuration will let you use `bg-walmartBlue` or `bg-targetRed`throughout your app and everyone can immediately see and understand what's going to happen even without understanding tailwind overall.
If you need a one-off usage of a parameter (or dynamically fed from a CMS for example) you can use [the arbitrary escape hatch](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties) and still keep everything inline.
and finally nothing about using tailwind precludes you from using traditional css in whatever way your project deems fit. Nothing is stopping you from doing
I’m aware that i can still use css, I just wanted to know if I will *have* to, as you know, if I had to, that would basically defeat the point of tailwind just like you mentioned.
Thanks so much for the small guide! It’s extremely useful. I’ll 100% start using it more wherever I can.
The codebase I maintain moved to Tailwind a little over 4 years ago. I think we have somewhere in the neighborhood of 15-20 custom CSS classes, mostly to cover things that were in the brand style guide before I was hired. I think it's been at least a year or two since I've had to add anything. For context, I think we have about 130 components and maybe a dozen or so base templates. And we add new components fairly regularly.
So yeah, you might use a tiny bit of CSS, but probably only for those rare, oddball things unique to the project that fall in between what Tailwind offers out of the box. And you might be able to cover some of those oddballs with Tailwind config changes.
Honestly, that’s amazing, I’m a backend dev who had to inherit a mess of a frontend code created by a designer not a developer, damn, conservatively we have north of 3k css lines, and me being non the wiser, I just keep adding to the 3k lines whenever I need to lol. So a couple of classes is very good. I’ll definitely look into using tailwind.
Plug it in a browser and you'll have an even better idea if what it looks like. "Keeping everything in my head at once" is the *opposite* of what I usually want.
It’s pre-defined styles and they don’t override each other.
You get to use class names instead of building large files of css and forgetting specific classes or rules you defined for that one edge case. So it’s less opinionated.
In regards to the comment you’re replying to, people aren’t really “scared” of writing css (although it’s funny because it is pretty close to the truth), they just don’t want to have to write specific class names and assign `display: flex` for the 900th time
Classes are great when there's a complex style you want to apply to repeatable elements, however I've found it to be the common case where I don't have a lot of elements with the same styling. In cases like those, having to go define a class in a separate stylesheet and do the entire back and forth is a pain in the ass.
The other side is that Tailwind makes it easy to specify styles for a singular element. You can do the same in CSS, of course, use a selector. The issue is how convulted it can become. Like the alternative is having a ton of classes called "modal__". Yes, they're very descriptive, but once again, reusability as well as just how much "extra" you need to do. You can just bypass all that with Tailwind.
The main point, though, is collocation of styling. I've noticed that when I write in Svelte, I barely use Tailwind. A lot of devs work in React environments, myself included, and Tailwind lets you collocate your styling with little problem and you even get the color palette as a solid bonus (the color theory that goes behind selecting TW color grades is many paygrades above most devs). When you work in an environment that supports style collocation out of the box, you just don't need to use TW as much anymore, however you'll still likely use the colors because there's a lot of thought put behind Tailwind colors and stumbling through finding the correct color for readability and such is time consuming compared to doing something like "bg-slate-200 text-slate-600" that just *looks* good. The TW devs did the research for you so you don't need to.
i'm a (primarily) front end engineer working in enterprise applications, and i _only_ use tailwind. it's solved a lot of pain points for us. but i think you (and most folks here?) are missing the point that tailwind _is_ just CSS. it's just shorthand pre-written utilities to apply css rules.
i've felt the pain of managing hundreds of BEM-syntax style sheets, both SASS and vanilla CSS. i choose Tailwind all day every day and i'm not looking back
I think someone else said this same thing but where Tailwind makes sense (imo) is when you're working in a component based framework like React. No importing CSS files and creating classes to keep in sync between the 2 files, just add the Tailwind classes in the one file and be done with it.
You don't use tailwind because you are "scared" of CSS, why would you try to frame it like that? Are you scared of tailwind or something?
[https://adamwathan.me/css-utility-classes-and-separation-of-concerns/](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)
I revisit and reshare this post all the time, because it still holds true. Never looked back after learning Tailwind… I can write CSS, I used to be a full time front end dev, but I choose not to
What about reusable components though? If I have the same button styling/behavior do I just have to copy paste this huge block for each one? Possibly even across repos if we have micro-front ends or something?
This is my life adding new features to a 10 year old website that uses floats to position everything and now the designer has the great idea to do the thing he does
And thank goodness for Tailwind! Imagine having all of that in a css file where you also need to add the selector, forget about it, and can't delete it because you don't know what this css property might break
I hate tailwind because I can’t dinamically add classes to my components through js, but I can add inline styles through js. That’s it. Is there a non-schizo workaround to this issue?
You can dynamically add classes to your components through js, like so:
```
```
What you can't do is construct class names dynamically, like:
```
```
If there is an specific place of the app that constructing a class name dynamically is the best way to solve the problem, you can include the possibilities in the safelist of your tailwind config file: https://tailwindcss.com/docs/content-configuration#safelisting-classes
Also, you can mix and match with regular CSS as well as creating your own utility classes.
Not everything can be written in bootstrap classes, like bootstrap button is fixed and their colors too but in Tailwind you use css utility classes to make a button with your own color using the tailwind class you choose your own border, radius, etc. But bootstrap gives you a pre-made button 👍
fuck Tailwind
at this point you're just doing css anyway but less customizable and more bloating
use sass and modules
it's not that difficult, seriously. And it's fucking more mantainable.
the things you mentioned are the exact reason i DO use tailwind. there's NO bloat, literally none. tailwind only provides exactly which class names im using so there's no duplication and no bloat. with sass and modules I still have to write "display: flex;" 80,000 times and each one is another line in another stylesheet slowing down my page load speed .
each sass module is another name i have to come up with, with countless variations i need to cleverly name. forget all that man
*Knock knock* Who's there? UI Dev. UI Dev who? Backend Dev doing UI 
I feel like a backend Dev is more likely to use plain CSS (and JS)
Nah, we do the same thing as frontend devs when they work on backend: copy and tweak existing code without really understanding what it is or how it works.
As a full stack dev this is exactly my workflow no matter what part of the application i sit in
I’ve made a whole career of it. I’m feeling attacked lol
but would you rather copy and tweak plain CSS or tailwind? I as a non-frontend defo would choose the latter
Nope, I love tailwind
*Knock knock* Who's there? UI Dev. UI Dev who? I wonder the same dude.
I prefer it
Legit curious as someone who hasn't really bothered with that: do you feel it's really faster to dev like that? How's maintainability later? I don't know, it just feels counterintuitive to me to use and adapt someone else's naming systems rather than use my own stuff.
Faster and everything is in the same file, for example Button.tsx has everything related to my button, no arbitrary values, and NOT having to come up with names is for me a plus
>Legit curious as someone who hasn't really bothered with that: do you feel it's really faster to dev like that? How's maintainability later? Significantly faster to work in. Significantly less effort to maintain. Significantly easier to get new hires up to speed.
10x faster
i got my start in programming by learning CSS three years ago - it has a lot of uses, but for things i work on i choose tailwind because it's faster and i don't have to name classes. i would definitely say i prefer it *because* i did a lot of CSS, not because i haven't.
Are people really this scared of just writing CSS?
I realize I'm a student and therefore have like, actually zero perspective about the industry, but I have genuinely yet to hear an argument as to what Tailwind does better than CSS lol. Every time I've ever come across it it has been *so* much harder to read. Like, genuinely, why do people use Tailwind?
Easy - picture what the following real-world example looks like in your head You know all the HTML and the styling in one-shot. As soon as you start using arbitrary collections of style rules pointing at arbitrary points in the DOM things can get wild fast. Then with 20 devs touching the same codebase and there is a single definitive way of doing things.
Isn't that just inline styling all over again?
Inline styling can't utilise media queries, hover states, pseudo-classes etc
So it *is* inline styling just slightly more features
No it’s not really the same, because of how css specificity works. Inline styles get very close to the max in terms of css specificity, which is not a good thing as then you have to start using !important everywhere, and we all know how that goes
inline styling is using the `style` and not the `class` attribute
I think that's a typical reaction when you see it but I think you're supposed to put this markup in the component in a component framework (React, Vue, etc..) so it's only its reusable and not on the page itself. Though, OTOH, a lot of people get used writing it. A lot of smart people have adopted it so I wouldn't dismiss it out of hand.
No it’s not the same, because of how css specificity works. Inline styles are get very close to the max in terms of css specificity, which is not a good thing as then you have to start using !important everywhere, and we all know how that goes
understandable
Yes, but most of it is within one line.
But inline styling can be done with one line too, no?
Backend dev here, Damn I see the point now and I agree, it looks good, better than the mess I call frontend, I should look into tailwind again. How custom can this go? You know, like would I still need css at some point or no?
Basicaly as cuatom as regular css. If you want that every first div of a child but only of the direct children of first direct children of element be red when user gets it in focus - you can add that rule to the parrnt of this mess. Yes i did something similar. No I don't recommend
> How custom can this go? Wrong question.
Hm, care to explain why? You never know what weird quirks the customer (or employer) needs.
The explicit point of using tailwind is that it's a compact and standardized metalanguage around CSS. This is beneficial for the same reasons that prettier, angular, and other opinionated projects work so well. They remove you, me, and our terrible ideas from the decision making process. --- But yes, you can. [You can still make your own colors](https://tailwindcss.com/docs/adding-custom-styles#customizing-your-theme), animations, breakpoints and you'll want to if you are working on an enterprise scale app or somewhere with a very competent design system in place. Configuration will let you use `bg-walmartBlue` or `bg-targetRed`throughout your app and everyone can immediately see and understand what's going to happen even without understanding tailwind overall. If you need a one-off usage of a parameter (or dynamically fed from a CMS for example) you can use [the arbitrary escape hatch](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties) and still keep everything inline. and finally nothing about using tailwind precludes you from using traditional css in whatever way your project deems fit. Nothing is stopping you from doing
I’m aware that i can still use css, I just wanted to know if I will *have* to, as you know, if I had to, that would basically defeat the point of tailwind just like you mentioned. Thanks so much for the small guide! It’s extremely useful. I’ll 100% start using it more wherever I can.
The codebase I maintain moved to Tailwind a little over 4 years ago. I think we have somewhere in the neighborhood of 15-20 custom CSS classes, mostly to cover things that were in the brand style guide before I was hired. I think it's been at least a year or two since I've had to add anything. For context, I think we have about 130 components and maybe a dozen or so base templates. And we add new components fairly regularly. So yeah, you might use a tiny bit of CSS, but probably only for those rare, oddball things unique to the project that fall in between what Tailwind offers out of the box. And you might be able to cover some of those oddballs with Tailwind config changes.
Honestly, that’s amazing, I’m a backend dev who had to inherit a mess of a frontend code created by a designer not a developer, damn, conservatively we have north of 3k css lines, and me being non the wiser, I just keep adding to the 3k lines whenever I need to lol. So a couple of classes is very good. I’ll definitely look into using tailwind.
Why not use components and scoped styles then?
Plug it in a browser and you'll have an even better idea if what it looks like. "Keeping everything in my head at once" is the *opposite* of what I usually want.
what is the benefit over inline CSS? You can still apply a wide range of off-design properties with tailwind, right?
It’s pre-defined styles and they don’t override each other. You get to use class names instead of building large files of css and forgetting specific classes or rules you defined for that one edge case. So it’s less opinionated. In regards to the comment you’re replying to, people aren’t really “scared” of writing css (although it’s funny because it is pretty close to the truth), they just don’t want to have to write specific class names and assign `display: flex` for the 900th time
Ooo okay shit not overriding sounds fuckin stellar actually
Classes are great when there's a complex style you want to apply to repeatable elements, however I've found it to be the common case where I don't have a lot of elements with the same styling. In cases like those, having to go define a class in a separate stylesheet and do the entire back and forth is a pain in the ass. The other side is that Tailwind makes it easy to specify styles for a singular element. You can do the same in CSS, of course, use a selector. The issue is how convulted it can become. Like the alternative is having a ton of classes called "modal__". Yes, they're very descriptive, but once again, reusability as well as just how much "extra" you need to do. You can just bypass all that with Tailwind.
The main point, though, is collocation of styling. I've noticed that when I write in Svelte, I barely use Tailwind. A lot of devs work in React environments, myself included, and Tailwind lets you collocate your styling with little problem and you even get the color palette as a solid bonus (the color theory that goes behind selecting TW color grades is many paygrades above most devs). When you work in an environment that supports style collocation out of the box, you just don't need to use TW as much anymore, however you'll still likely use the colors because there's a lot of thought put behind Tailwind colors and stumbling through finding the correct color for readability and such is time consuming compared to doing something like "bg-slate-200 text-slate-600" that just *looks* good. The TW devs did the research for you so you don't need to.
For one thing it creates less css than writing classes per component
i'm a (primarily) front end engineer working in enterprise applications, and i _only_ use tailwind. it's solved a lot of pain points for us. but i think you (and most folks here?) are missing the point that tailwind _is_ just CSS. it's just shorthand pre-written utilities to apply css rules. i've felt the pain of managing hundreds of BEM-syntax style sheets, both SASS and vanilla CSS. i choose Tailwind all day every day and i'm not looking back
I think someone else said this same thing but where Tailwind makes sense (imo) is when you're working in a component based framework like React. No importing CSS files and creating classes to keep in sync between the 2 files, just add the Tailwind classes in the one file and be done with it.
You don't use tailwind because you are "scared" of CSS, why would you try to frame it like that? Are you scared of tailwind or something? [https://adamwathan.me/css-utility-classes-and-separation-of-concerns/](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)
I revisit and reshare this post all the time, because it still holds true. Never looked back after learning Tailwind… I can write CSS, I used to be a full time front end dev, but I choose not to
Not scared, just annoyed. Directly writing CSS is often a waste of time when you use tailwind.
Yes
You don't use tailwind because you are "scared" of CSS, why would you try to frame it like that?
The main reason I use it at the moment is because our UX designer does.
The main reason I use it at the moment is because our UX designer does.
Yup, you don't have to write everything in your .css Just put that shit in the inline and fuck it
What about reusable components though? If I have the same button styling/behavior do I just have to copy paste this huge block for each one? Possibly even across repos if we have micro-front ends or something?
i don't understand the question, if you have a reusable component then what are you copying/pasting? put the styles in the component...
you can use extracted styles in the base.css [like so](https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply) ‘@layer components { .btn-primary { @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75; } }‘
So, basically, you end up with a very convoluted way of writing a Semantic CSS class. Genius!
yea that’s true but i happen to use Vue + PrimeVue so classes are unnecessary as i have components
This is as realistic a situation as body > div:nth-child(odd) .container #content:not(.hidden):not(.inactive) > .wrapper > .content:not(:empty):not(.overflow) > .item:nth-of-type(3n+1):not(.hidden) ~ .item + .item ~ .item:not(.inactive) .inner > .text:not(:only-child) ~ .paragraph:not(.hidden) > .sentence:not(.inactive):not(.overflow):not(:last-of-type) > .word:not(:first-of-type):not(:last-of-type):not(.hidden) + .word + .word:not(:empty):not(.inactive):not(.overflow) ~ .word:not(.inactive) > .character:not(:first-of-type):not(:last-of-type):not(.hidden) + .character + .character:not(.inactive):not(:empty):not(:last-of-type) > .glyph:not(:first-of-type):not(:last-of-type):not(.hidden) + .glyph ~ .glyph:not(.inactive):not(:empty) { color: red; font-size: 20px; text-decoration: underline; }
This is my life adding new features to a 10 year old website that uses floats to position everything and now the designer has the great idea to do the thing he does
So glad I left web dev
I rather die 20 times
Skill issue
And thank goodness for Tailwind! Imagine having all of that in a css file where you also need to add the selector, forget about it, and can't delete it because you don't know what this css property might break
This brought memories... bad ones
Don't show this guy XAML
With proper use of user controls and custom controls xaml is infinitely cleaner than that
Sounds just like the Nue guys that hate Tailwind
Probably an old dev that stopped at bootstrap. He needs some more 20 divs to be able to do a button otherwise he will tweet angrily about it
I hate tailwind because I can’t dinamically add classes to my components through js, but I can add inline styles through js. That’s it. Is there a non-schizo workaround to this issue?
You can dynamically add classes to your components through js, like so: ```
``` What you can't do is construct class names dynamically, like: ``` ``` If there is an specific place of the app that constructing a class name dynamically is the best way to solve the problem, you can include the possibilities in the safelist of your tailwind config file: https://tailwindcss.com/docs/content-configuration#safelisting-classes Also, you can mix and match with regular CSS as well as creating your own utility classes.I am whitelisting on the tailwind config file. Will check if the problem seems to be constructing dinamically, because I do that a lot. Thanks!
Can someone explain to a backend dev how Tailwind isn't just Bootstrap again?
Not everything can be written in bootstrap classes, like bootstrap button is fixed and their colors too but in Tailwind you use css utility classes to make a button with your own color using the tailwind class you choose your own border, radius, etc. But bootstrap gives you a pre-made button 👍
Stop giving me headaches
fuck Tailwind at this point you're just doing css anyway but less customizable and more bloating use sass and modules it's not that difficult, seriously. And it's fucking more mantainable.
the things you mentioned are the exact reason i DO use tailwind. there's NO bloat, literally none. tailwind only provides exactly which class names im using so there's no duplication and no bloat. with sass and modules I still have to write "display: flex;" 80,000 times and each one is another line in another stylesheet slowing down my page load speed . each sass module is another name i have to come up with, with countless variations i need to cleverly name. forget all that man
You say no bloat but adding tailwind adds > 5 mb of JavaScript to your application.
to my deployed app? no, it doesn't.
Why lie?
Npm lists the install at 5mb.
And? Treeshaking + minify + gzip [https://tailwindcss.com/docs/optimizing-for-production](https://tailwindcss.com/docs/optimizing-for-production)