So lately, I've started to break some habits. I am not great at managing CSS but I've really pushed myself to keep myself organized. I've tried to use inline styles only sparingly and I've really seen the benefit of using a separate stylesheet and working with classes to give style individual elements. This for the most part has worked pretty well and I like it. One of the main things that I like about this method is that it pushes me to be more organized. Everything has its place and everything looks cleaner and more organized.
Now more recently, I started to look into Tailwind CSS because of course it's the newer trendier thing that seems like everyone is using. I've used a bit of the other CSS libraries out there, of course especially Bootstrap, but I wanted something that can of course make things easier but also give me some flexibility. I don't know about you but I'm kind of tired of everything looking like Bootstrap.
Lately, as I dive into Tailwind, there are of course many things to like about it. While I like the idea of keeping everything very clean, I do like the idea that I don't need to leave the HTML or JSX to see changes. Also, it seems as though I can make changes to style much quicker than with the old way of doing things. There is much less typing than there is in Vanilla CSS to accomplish some of the same things. Also, there are so many more options than there is with Bootstrap and even if I don't like the built in options, which there are very many, I can very easily adjust the style to how I like it.
All of this being said, I'm not exactly sure if I'm sold on Tailwind, and this is for one reason. Tailwind definitely makes the HTML or JSX a bit more difficult to read because now there are many more classes that are written into the elements. It doesn't look as clean nor as organized as it was before and there is a part of that that bothers me. I'm not sure if I just need to get over that or move on and find a different alternative.
Let me give an example, let's say that I want to adjust the margin and the padding of a div. With Vanilla CSS I would create a class in a separate CSS file, and inside of this class I would put all of my adjustments. Then I add the class to that div element which applies that style.
.vanilla {
margin-top: 12px,
margin-bottom: 12px,
padding-left: 12px,
padding-right: 12px
}
<div class="vanilla"></div>
In Tailwind the same can be achieved by putting everything into the div element.
<div class="mx-3 py-3"></div>
When I insert mx-3, this adjusts the margin of the element on the x axis by 12 pixels, and py-3 adjusts the padding on the y axis by 12 pixels. This is much less code than the Vanilla CSS. Also, if you want to have a separate CSS file you can but it's not necessary. It's also very fast to change styling on the fly.
I know that many people will tell me about Sass or many different libraries, and I think that's all great but right now for me, I think I'm going to try Tailwind for a while.
Top comments (40)
Your css example is a bit verbose tbh... It can be a bit shorter:
And you can use css vars and/or SASS + mixins to achieve a lot of what Tailwind does.
That's very true but even with your example, it is still way more verbose than Tailwind.
It seems like that at first, but when you look at some bigger projects done with tailwind and the endless strings of css classes, it quickly becomes better to use css with mixins, or even your own class names... You can combine that with tailwind btw, but whats the point of tailwind then?
Yes, I second that. It becomes terrible to read those super long class lines. A bit of nonsense, I'd say. Much cleaner and easier to maintain is to have some mixins for media, shadows, and radius and just have one CSS file per component. Much neater approach. Less CSS generated, too 🚀.
It was fun and fast to make v1 of the website, but to maintain and adjust things on Tailwind - good luck finding that 2 symbol string class in your 2 line class list 🤣
When you decide to change your site so that everything has slightly larger margins, you have the exciting prospect of changing every single one of your HTML files and templates. Long strings of utility classes aren't very manageable.
If you use something a little more semantic, with variables for things like gutter-widths, etc., then you're not painting yourself into that particular corner. Utility class things like Tailwind work if you use them in a separate stylesheet, but if you do that then they offer no benefit over a preprocessor like Sass.
Or you could just change a few spacing config parameters because Tailwind was designed with flexibility and configuration in mind.
This is exactly what Tailwind discourages.
Yes, which is why it's such a poor proposition.
You can configure anything, but as long as you're using classes like
object-left-bottom,float-right,font-extralight, etc., you're going to have a bad time. These things only work if you abstract them (which you can do, but then what's the point of all the Tailwind stuff) or you end up defining classes likewhen your client says they want the sidebar on the other side or whatever.
Even dont need to mention if you need anything more complex your tailwind code become like **** [& > * mx-3 my-2] text-[#ff22ee] you come back to the css or if you want to make for each a that contains ul on hover to display it
Took me a while as well to get use to Tailwind. Like you, I love to write my CSS in separate file because it's more organized to me. But you can actually use @apply in your CSS class, hence making it the HTML looks organized like you prefer while also writing less code using Tailwind.
Here's example of how your CSS would look like:
This is very true and I thought about talking about this aspect but I really wanted to talk about even though regular Tailwind can add so much into the HTML element, it still seems to be more efficient. I think for me one of the things I hate about a separate style sheet is coming up with class names lol.
Using
@applywith Tailwind is an anti-pattern to its mythology and discouraged by Tailwind. Adam himself has several Tweets on his Twitter where he advises against using it, pretty sure he regrets adding the feature to Tailwind meanwhile.… but then you may as well just use postcss?
Your example is great and that's the only way in which I would chose to use tailwind, but the question becomes... Is it still useful to have a pre compiled list of utility classes, that you need to configure anyway to fit what you want... It becomes easier to write the mixins and classes yourself, to fit the use cases that you need... Tailwind syntax becomes really complicated if you want to do anything responsive that doesn't fit their very limited mobile-first strategy. Its also very difficult to build white label apps with tailwind due to its pre compiled nature. It's not difficult to define some css variables for spacings, breakpoints and colors and write a few utility classes of your own...
What is benefit of Tailwind if you come back to writing your own classes and extending them and than even typing stuff like text-[#ff44dd]
That's a strong point, but I don't really think that's the point of Tailwind. I believe the point of Tailwind is to have a balance between the restrictiveness of some of the libraries and full customization. Of course if you are specifically defining all of your CSS properties, then Tailwind doesn't make sense but if you only need to extend a few of them, then that's probably not that bad.
Tailwind is just a solution to a problem that postcss/less/scss/sass had already solved. And a step back to the original issue with html/css builds 15 years ago when everyone was using classes such as “red” then deciding that they actually wanted the display colour to be blue
Tailwind seems a nice concept, but in reality, having been a developer for many years, you’re just moving the problem of maintaining css to the html. Imagine, you need to redevelop your site. You already have a great html structure in place, so instead of just changing a selector in your css, you have to change that in 100+ html files, however, you’ve used that same padding tailwind class in multiple components, now you’re not just able to do a find and replace. You’ve also got a bit of tailwind in your database too, that needs to be changed. Suddenly changing a few values in your .vanilla selector seems much better.
The benefit of not writing css, is just changed to the possibility of writing a lots of classes in html being able to scan and read large strings and managing those in multiple places…
yeah, but in reality, the html is always coupled to the CSS. Have you ever just gone back and changed the CSS and nothing else? Its a myth.
I dont know what you want to say
:root {
--mds: 12px
}
.vanilla {
margin: var(--mds) 0px;
padding: 0px var(--mds);
}
if you use the same size or use it like calc(var(--mds) * 2) etc whenever you decide to change you just change it in root in tailwind you will need to go and do mx-6 py-6 and your html look amazing
Or like I do it with tailwind in whole website I use for my background color on elements bg-indigo-600 hover:bg-indigo-700 when I want change need to go thrugh whole website and change it instead on single place
Or if you using sass even better
$mds: 12px;
.vanilla {
margin: $mds 0px;
padding: 0px $mds;
}
If you drop tailwind for vanilla css, you just got rid of another dependency you have to maintain, track and migrate. Eg: Tailwind 4.0 just out! Please update all your perfectly stable projects to the latest version to prevent security issues and building up technical debt.
Ah the great tailwind debate where everybody shits on it because "my elements have long class attributes now".
Thing is. 99.9% of modern sites use a component framework and it's the components that abstract this sort of stuff for you. Yes you might have a long list of classes applied to your button element, but then that is all encapsulated in a Button component.
vs
Good, modular components completely negate the tailwind verbosity argument...
What is real benefit of tailwindcss?
When I was using it, I'd say it was the speed at which you can develop. No need to futz around with class names or selectors or thinking about naming conventions. Everyone in the team is on the same page and you get the makings of a design system right out of the box. You also get the flexibility of a utility first framework so when you hit those edge cases where you just need to add a little padding or margin or whatever, it's very simple to do.
Of course no one solution is perfect. I will agree with Tailwind's greatest criticism that it adds a lot of class bloat to HTML, but in my experience this is worth the tradeoff and is often a signal that you need to break your HTML down further into more manageable components.
I think tailwind is nice for small and simple things, but once you need anything more and need to change config and use arbitrary values whole point of tailwind lose sense and become one ugly thing that is almost imposible to understand. Specially if you need any child or even more complex things with not child etc
You can combine both. Use Vanilla CSS to create common "components" for example form elements or buttons and use tailwind for layout and to customize those components.
...and then you have a really huge project and the client wants to have buttons styled differently...
I just think tailwind is overhyped and missleading to a lot of developers who never experience redesigning.
if you’re exploring css libraries in general, take a look at Vanilla-Extract vanilla-extract.style/
My gripe about Tailwind is just if your going to have to learn hundreds of classes you might as well just learn the raw CSS, at least its not a fad and will give you more power in the long run as you can do more with it. I'd just rather spend my time learning the fundamental web technology rather than groping around inside of someone elses ideas which are probbaly not going to relevant in 5 years.
Its about what you spend your time on and fill your head with in the end.