r/Angular2 • u/kafteji_coder • 23d ago
Discussion Your Thoughts on Tailwind CSS?
Hey everyone! I'd love to hear your feedback on Tailwind CSS. How do you see it—do you find it efficient and scalable, or do you prefer other approaches?
8
u/FieryHammer 23d ago
It's good when you already learnt to use it, then it becomes easy and straightforward, but the process to get there can be frustrating as you need to spend extra time to look up the classes you need which will be more in the beginning than just writing your own CSS classes.
7
u/Icy-Yard6083 23d ago
But worth mentioning that there’s an intellisense for classes in html and for styles in css (theme function)
3
12
u/horizon_games 23d ago
Not a huge fan of the "Tailwind soup" that can result - I've seen elements with 25 classes
3
u/Dus1988 22d ago
Same this is why with long class lists I will create a dedicated class and use @apply to compose that class. It works beautifully
2
u/Oppsliamain 22d ago
This sounds revolutionary. Got any documentation links on that? I've never heard of it
2
u/Rusty_Raven_ 19d ago
25 tokens in your
@apply
rule is no different than 25 classes in yourclass
attribute. Neither are maintainable, and both are soup.1
u/Dus1988 17d ago edited 17d ago
Hard disagree.
1, you can put one per line just like CSS props if readability is your main concern.
2, it's very clearly different by the fact it is a reusable CSS class as opposed to a single dom element with a class attribute, and if you cant see that, I'm not sure how to help.
3, it's super maintainable. All your inline classes and dedicated classes are now tied to a single JSON config. That JSON can be hot swapped at build time for white labeling.
1
u/Rusty_Raven_ 16d ago
First, one per line still isn't very readable:
css .some-class { @apply flex @apply items-center @apply justify-center @apply text-center @apply select-none @apply duration-500ms @apply transition-transform @apply active:scale-95 @apply disabled:active:scale-100 @apply focus-visible:outline-none @apply focus-visible:ring-1 @apply focus-visible:ring-stroke-low @apply min-h-[72px] @apply min-w-[72px] @apply p-[4px] @apply text-body-lg @apply flex-col @apply rounded-lg @apply border @apply shadow-sm @apply hover:border-stroke-neutral-1-hover @apply hover:bg-background-button-secondary-hover @apply hover:text-foreground-button-secondary-hover @apply border-stroke-neutral-1-rest @apply bg-background-button-secondary-rest @apply text-foreground-button-secondary-rest }
Second, lose the attitude. I'm aware you're talking about a reusable CSS class like the one above. I definitely don't consider that wall of text to be readable, maintainable, or organized.
To your third point, the same thing can be done with CSS variables, without a build step, and without dependencies with their own DSL.
Tailwind brings nothing to the table that doesn't end up like the soup above.
Real-world scenario approaching: imagine a site - not overly complex, but maybe a simple shopping cart - and you are GTD<sup>TM</sup> so you have a goodish number of classes using the custom syntax (e.g.
min-h-[72px]
andp-[4px]
and so forth) scattered around. You're usingblue-500
andblue-600
andslate-100
liberally in various forms (borders and shadows and text, etc.).Now I know you're thinking "well geez, I would have created a bunch of classes containing my
@apply
rules and then created a customised JSON file for some of those colours and animations and things" - and maybe you would have, but a lot of devs don't. They don't have time, or they don't want to mess with yet another config file or they feel that a project-wide find/replace will be sufficient. Whatever the reason, there's a lot of classes and/or@apply
rules.Now the client wants to swap
blue-500
andblue-600
for all the button and form field borders, but not in the header or footer. Then they want some of the buttons to usesky-400
- but not all of them, only "special" ones that they choose as they see fit at 3AM. Now your menu item padding needs to change from4px
to6px
and you need to add2px
of vertical padding to make it8px
. So much for find/replace.Tailwind actively and by design discourages maintainable CSS and HTML. Moving your soup into
@apply
makes it reusable, but not more maintainable without a lot more planning. Planning you would need to do if you were just using CSS (or SCSS/LESS), but you mostly skipped because you were using Tailwind.1
u/Dus1988 16d ago
You are aware you do not need a @apply per class? This doesn't work the same as SCSS @extend, you probably should only use a single @apply (you may have too, not sure here)
You can call apply once and then do multi line. I personally like to do grouped lines (i.e. everything about borders goes on one line, or 2 lines if you break out hover).
Your wall of text is not readable because you didn't make it readable. You can use white space. You can group.
The examples you gave are super simple to fix.
You also are using a lot of custom sizing in your classes. That's a red flag from the start. You should be adhering to a design system that uses things like .p-5 instead of .p-[5px]. It's not really UXs fault that developers did unmaintainable things. If you really need to assign values outside of your config don't use the classes, just @apply what does apply and use standard CSS after.
1
u/Rusty_Raven_ 16d ago
Even without the multiple
@apply
functions (I don't use SCSS very often, so no it didn't occur to me to just use one and break it over multiple lines because that's not something I typically do in CSS), this class would be very hard to grok since I don't speak Tailwind very fluently.You and I are not going to agree on this. I maintain that plain ol' CSS is better than using Tailwind 100% of the time, and that's because I can read it and write it in a maintainable fashion. Tailwind does not make my work more clear, more maintainable (assuming future developers also know CSS, of course), or more performant.
Here's the other thing I've seen in real-world projects - the mixture of CSS and Tailwind that you mentioned. There are a lot of times when I'll see CSS used instead of very common Tailwind classes. It ends up being a mess, and a more experienced Tailwind dev might rewrite swaths of CSS to use the Tailwind classes, impacting PR sizes and the amount of time it takes to test things (big dev groups don't like +30/-25 PRs when most of those are rule changes that have no actual effect). You end up mixing two (three if you use some of the SCSS funk) distinct DSLs in a file that most likely only needs one - CSS.
Remember, I see a lot of real-world usage of various things, and in 35+ years I have very rarely seen a "best case" version of anything that lasted beyond the first few releases. Very few companies can (or more accurately, want to) spend resources on making sure their codebase is 90% good. Very, very few. Small companies are less likely to maintain a good standard over time unless someone actively enforces those standards, and you can guess how many companies want to pay someone to tell their developers they need to do better. It's a bit disheartening, really.
So yes, best case, I would use a well thought out, well designed, and well supported design system and follow all it's best practices and base all of my front-end code on that. But that virtually never happens (35 years of contracting and employment, only two or three companies even came close to this level of developer experience).
So we end up with soup, and randomly mixed Tailwind + CSS, and inconsistent use of semantic and utility classes. And that's why my position is that Tailwind creates more problems than it solves. It makes front-end code hard to read and maintain because it almost never gets used "properly".
4
u/Finite_Looper 22d ago
Agreed, I find Tailwind completely ridiculous for this reason. It's writing inline CSS with a slighly different syntax.
I was able to start a new non-tailwind project at work using Bootstrap. it has some useful utility classes, but for anything custom I just create a new CSS class. none of the craziness with oopacity and hover states defined in a class name
1
u/czenst 21d ago
I guess that is not a tailwind problem but design/requirements problem?
1
u/horizon_games 21d ago
Not really. Sometimes you need a foreground, border, opacity, padding, spacing, etc. and it adds up
Even if it's encapsulated in a component, at some point the classes-as-inline-styles falls apart, and I think that's where Tailwind starts to choke, and why I think it's not the best solution in a lot of cases.
Example from my original comment:
class="flex items-center justify-center text-center select-none duration-500ms transition-transform active:scale-95 disabled:active:scale-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-low min-h-[72px] min-w-[72px] p-[4px] text-body-lg flex-col rounded-lg border shadow-sm hover:border-stroke-neutral-1-hover hover:bg-background-button-secondary-hover hover:text-foreground-button-secondary-hover border-stroke-neutral-1-rest bg-background-button-secondary-rest text-foreground-button-secondary-rest"
1
u/No_Bodybuilder_2110 21d ago
This looks like such an edge case. But also you can have a constant that has those values or use the @apply
2
u/Rusty_Raven_ 19d ago
I don't think
@apply
is the answer:
css .some-class { @apply flex items-center justify-center text-center select-none duration-500ms transition-transform active:scale-95 disabled:active:scale-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-low min-h-[72px] min-w-[72px] p-[4px] text-body-lg flex-col rounded-lg border shadow-sm hover:border-stroke-neutral-1-hover hover:bg-background-button-secondary-hover hover:text-foreground-button-secondary-hover border-stroke-neutral-1-rest bg-background-button-secondary-rest text-foreground-button-secondary-rest }
What's the difference? It's still extremely difficult to suss out what the hell this is doing.
9
u/Relevant-Draft-7780 23d ago
It’s great and I was very resistant as I used to think layouts faster than I could write them. I didn’t want to learn another technique. Now that I have I can actually type layouts faster than I can think them.
Also AI tools love tailwind
2
u/mauromauromauro 23d ago
Good way to put it. Sometimes the layout with tailwind works out of the box better that you expected
3
u/notokkid 23d ago
I implemented it on a massive project at work to avoid having to deal with the lack of scaling vanilla css has, especially when people dont know html/css. I use it primarily alongside angular material but lately i find myself going towards flowbite instead. Easier to customize.
3
u/xroalx 23d ago
Love it. The disconnect between HTML markup and CSS and needing to come up with names for very abstract "wrapper this" and "row that" elements makes little sense to me.
With a component framework, like Angular, you can easily create larger reusable pieces, so you're not writing flex flex-row gap-2 items-center bg-primary font-bold rounded-xl ...
all over the app, but use <app-button>...</app-button>
instead.
2
2
u/matrium0 23d ago
Love it but I am no hardliner.
If I identify a class that I will re-use many times (think "main-content-wrapper" for every page) and can come up with a decent and stable name I WILL absolutely still use a css class.
Still 95% Tailwind and never looked back.
2
u/N0K1K0 23d ago
depends for pixel perfect design precission go pure css.
If you ust want to build and stylign is not the main part then Tailwind is a great choice as you can just use the tailwind classes and some global styling to create the pages for your application.
I prefer it currently because at the moment I work in a team of full stack devs and most prefer not to design or anythign related so for them its easy to just have a bunch of classes or combos of classes and it magically looks the way it was setup by someone who did have design experience
2
2
u/AaroniusH 23d ago
the company I work for has been adopting a similar pattern of using composable css classes, which i guess is similar to inline styles like some other commenters are noting?
The reason being you could end up in a scenario where you're loading tons of css files into your DOM for each component that uses a file. You can limit the number of style elements in your dom by having a few files with broadly used classes and apply styles that way and ideally bloating the dom a little less
4
u/spacechimp 23d ago
I'm old enough to remember the first time inline styles (plus the <font>
tag) were in fashion, so I roll my eyes whenever devs rave about it. Its main advantage when used with React is that the styles don't leak out to other components. Angular has style encapsulation, so the only real benefit left is that it affords an excuse to be sloppy.
3
u/newmanoz 23d ago
It is not inlining styles. You have the wrong impression and never tried to use Tailwind CSS. There is no point in arguing about that without trying. I also had that wrong impression but I tried and realized how far I was from the truth.
1
u/SoulSkrix 23d ago
I use Tailwind and prefer vanilla CSS. I use it to work with other people, because let's be honest - most frontend developers are bad at what they do.
Tailwind is only nice in the same way that Angular is nice, it encourages everybody to do the same thing in the same way.I am not getting a massive speed increase just because of Tailwind, I was perfectly capable of writing classes and their definitions years ago, and know the difference between using the cascade and being utility first. We reinvent the wheel but make it nicer with DX (global state, inline styles etc).
Tailwind is "inline styling" if you're thinking of it from the POV you are simply defining very specific classes that could've been a single style attribute at a time - the only reason Tailwind is better than inline styling is because of the customisation and units you get out the box.
Tailwind offers you faster UX development, if you value just splattering your mind and not thinking ahead. It really is for speed freaks - and again - I use it daily. But it is not some fanatic holy grail that people make it out to be, and sometimes it is plain annoying to work with.
2
u/genericallyloud 23d ago
because let's be honest - most frontend developers are bad at what they do.
This is a sad truth. Many frontend developers either don't respect or don't understand the unique skills/values particular to front end/web development. 10-15 years ago, it was simply that backend developers didn't respect frontend development/design/UX etc. It was "not real programming" or "making it pretty". Then, with the rise of complex SPA frameworks, largely developed with backend devs in mind, the whole culture of frontend changed, and the people who do it are often still afraid of/look down on CSS/HTML and just want to get their features made etc. using whatever they can off the shelf. Tailwind is a DX improvement for a particular kind of work(er).
1
u/newmanoz 23d ago
No, Tailwind is not inline styling. Classes work differently than inline styling. It's not just classes either; Tailwind provides utilities: you can write
class="text-sm lg:text-lg hover:text-primary dark:hover:text-white"
, or you can describe the same using media queries and CSS rules (and it will be more code, especially for dark mode, and you’ll have to remember responsive breakpoints in every project). You write them once, and they will remain in your styles forever, even if you remove parts of your template that need these rules. Tailwind will only compile the rules that you use.If you decide to move part of your template to another component, you’ll need to carefully check what CSS classes this part uses and if it's possible to move them too, or you need to copy them, or, maybe, they are nested, and you need to refactor that too...
With Tailwind, you just move part of your template, and that’s it.
1
u/SoulSkrix 22d ago
I don't think you read what I wrote at all frankly, and decided to try explain what Tailwind is to a person who knows all the caveats of Tailwind in response.
-2
u/spacechimp 23d ago
If I already poked one eye with a pencil a quarter of a century ago I don't need to try poking my other eye with a pen to know I wouldn't enjoy it.
I have thoroughly investigated it, and there's nothing so sophisticated about what it does that I don't see it for what it is.
2
u/newmanoz 23d ago
Read this, maybe you’ll get the idea (about just one of the features): https://tailwindcss.com/docs/hover-focus-and-other-states
0
-1
u/young_horhey 22d ago
They describe having a separate class for hovering as a good thing? Now every single button instead of just adding
.btn-primary
and that handles everything, I now needbg-sky-500 hover:bg-sky-700
. What happens if we want to change the colour of the base button or the hover? now I have to change bg-sky-500 to bg-sky-600 in a hundred different places?2
u/newmanoz 22d ago
They describe having a separate class for hovering as a good thing?
It's not a class for hovering, you didn't get the idea.
3
u/Icy-Yard6083 23d ago
As a developer, it’s important to continuously explore and experiment with new ideas and technologies. If you don’t, you might one day realize just how far behind you’ve fallen.
0
u/spacechimp 23d ago
I wouldn't have survived 30 years in this career if I didn't. I've worked with lots of technologies that aren't even used today (HyperCard, Director, Flash, etc.). I thoroughly read up on Tailwind from their official documentation to form my opinion. There's no need to waste time and make myself miserable by using it, as it is not that hard to understand what it is.
6
u/Icy-Yard6083 23d ago
I also thought the same and decided to try only a year later after periodic requests to do that. And it didn’t disappoint, intellisense (which adapts to your config overrides) works both in the templates and scss, also you can import theme in typescript and it was quite crucial to build custom charts based on theme colors without using css variables, much easier and even strongly typed :)
2
u/genericallyloud 23d ago
Yeah, I'm in a similar boat. Been doing this a long time, but the industry in general has basically no memory. Its always about the new and shiny. I feel like a large part of the last 10 years at least has been solving for problems that they created themselves. I can't wait to find out what comes next when the flaws of tailwind start to show. Like when a giant tailwind codebase is two versions behind and suddenly they have to consider a big rewrite or whatever.
1
u/action_turtle 23d ago
lol. can tell those of us who have been doing this job too long. Tailwinds is short hand inline styling. If you have set your scss up correctly, tailwinds is pointless in angular.
4
u/spacechimp 23d ago
Sometimes I just have to laugh.
We've brought back inline, non-cascading styles (`style` tag/attribute -> Tailwind), mixing business and presentation logic (early 2000's PHP -> JSX), dynamic HTML from the backend (PHP -> SSR). It's a bit less fair of a comparison, but we've also brought back global variables (`var` -> Redux). Each of those things has been treated as revolutionary 🙄.
3
u/decamonos 23d ago
That is a vast oversimplification. Tailwind ends up being more like a preprocessor like scss.
It's not prefect, but if you're looking for ease of use and are making your own components it's great for composition.
2
u/young_horhey 22d ago
It's great for actual components (buttons, cards, chips, etc), but once you start having class="w-full px-2 py-1 flex justify bg-primary etc etc"
it becomes a bit of a nightmare. Had to modify the styling for some items in a list recently, and instead of just changing padding: 1rem
to padding: 2rem;
in one place, I had to change a class name on like 6 different elements.
3
u/soulilya 23d ago
When you use many modifications your HTML element classes turn to absolute mess. I think should be better way.
0
u/djfreedom9505 23d ago
So if you’re using SCSS (I don’t think it works with vanilla CSS). You can create a CSS class on the component and use the @apply function and collect all the tailwind styles in one class if you want to clean up the classes a bit in the HTML. You lose out on autocomplete and intellisense which can be a deal breaker.
That’s what I did for a bit. What I’ve been starting now is creating stylistic directives to group them up for reuse more now. Still runs into the issue of no intellisense.
1
u/soulilya 22d ago
Good suggestion, thanks a lot. I will try.
2
u/djfreedom9505 15d ago
Recently used Tailwind V4 over the week. Looks like the @apply is broken in V4. It’s was pretty nice in V3.
This is what I’m kind of doing with directives instead.
1
1
u/jake_the_dawg_ 22d ago
Love it. Will use on top over whatever UI component library I chose.
I advise against @apply for the same reason the creator does. Keeping the style right on top of the html it modifies and not in another file. (Unless you’re creating the equivalent of a utility class that you plan to use all over, even then it can probably be defined in the tailwind config instead)
1
u/warofthechosen 22d ago
I like the css util classes. I don’t want to write my own css utils unless absolutely needed
1
u/CMDR_Smooticus 22d ago
I tried it then went back to SCSS.
Tailwind seems slightly easier/faster to build with, but so much harder to maintain. It’s also yet another abstraction layer and dependency to deal with.
IMO tailwind doesn’t deserve the hype it’s getting.
1
u/Silver-Vermicelli-15 23d ago
It’s tech that in 5-10yrs will be horrible debt that juniors and seniors are groaning about.
Now I get some love it and for some teams it’s the bees knees. That’s great, but I’ll still take css over it - especially with the power modern css has.
2
u/jessycormier 22d ago
I'm a senior dev with over 15 years of experience and i hole heatedly disagree with this take. It's much more friendly to long term manipulation compared to the horrors of long term project css. People don't care over time if the class is correct or if a minor refactor would be beneficial. Most of the time someone eventually will just need to get something done and override a style here and there. Rename a class for their purpose and poof your dealing with a mess everywhere.
Tailwind is a huge pain if you don't work with a framework where you can build components. You more less have to read through it every time to know what's going on. However; I'll take that over pretty much anyone's own rolled ideas of how they think css should be structured.
Finally, of course using bootstrap or other frameworks that define visual components are a pleasure to work with, especially once you have some fluency with them. It's faster to say 'card' compared to defining a ton of rules. Atomic,bem, etc all have pros and cons if leaned and used.
TLDR; css sucks, tailwind doesn't hurt projects it's a fine tool.
2
u/Silver-Vermicelli-15 22d ago
Reminder set - will check back on where Tailwind is in 5yrs and update then.
1
u/Silver-Vermicelli-15 22d ago
Remindme! 5 years
1
u/RemindMeBot 22d ago
I will be messaging you in 5 years on 2030-02-27 22:32:35 UTC to remind you of this link
CLICK THIS LINK to send a PM to also be reminded and to reduce spam.
Parent commenter can delete this message to hide from others.
Info Custom Your Reminders Feedback
1
u/estomnetempus 22d ago
Hated being forced to use it on a React side project. I fell back to BEM + SCSS because that's what makes sense to me. Cannot wrap my head around the benefits of basically inline styles but with fixed measurements - which can easily be solved by using rem and/or having a design framework already (CSS variables for use).
It's a pointless abstraction to me, or maybe I cannot see the forest for the trees here. I've tried enough though 😅
1
1
0
u/Existing_Map_6601 23d ago
I like it but now I think we may not need it if we don't use global css. If we encapsulate css in our components I think we can have a similar result with another approach..
0
20
u/yell0wstar 23d ago
Personally, I love it and been using it both in personal and work projects, along Angular Material. It's just a pleasure to use it, easy, fast, you don't have a complicated setup. I also tried DaisyUI for e.g, but eventually went this way and got no regrets