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.
Latest comments (41)
It depends on the project, as well as how important speed and flexibility is to you. If this is important, then Tailwind makes sense. If clean, structured CSS is more important, Vanilla CSS wins.
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.
The big draw for tailwind for me isn't the amount of code I need to write versus vanilla css. The big thing is the fact that with it, you only have the css you use, and nothing else.
I'll admit it's because I'm not the best or most experienced developer, but inevitably in any project where I use vanilla css, it just builds up more and more like muck and rust underneath my car. I'll make a new class in one place for one element - then I'll override it with another elsewhere. Then while I know it's no good, I'll even start dropping !importants everywhere because I just want to finish and make it work without going back and reworking the entire cascading styles. Also, I might get rid of all elements using a class I had created, and that vestigial class will live on because I won't know to go back and prune it out.
Tailwind makes it so I don't have to worry about that at all. I drop in the classes I need, remove the ones I don't, and I never have more css than I need, and it's always applied to just the right elements.
tailwind css is like bootstrap?
Here is an awesome video about that :)
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.
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
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.
I would avoid using Tailwind CSS.
An open-source product that is the only product of a for-profit company will eventually try to charge you.
That could be said about many open source products. Yes, they will look for revenue streams (Tailwind already does with TailwindUI), but it's highly doubtful that they would lobotomise their core product. The real business strategy is to follow a similar path as Laravel - have a great core offering for free and supplement it with convenient add-ons at a reasonable cost.
If it's an open source product from a larger company (such as Microsoft), that's perfectly fine, because their entire existence does not depend on it.
But the Tailwind company is known only for that product, and they're a for-profit company.
I see a significant risk there.
The risk is all the same. Large companies can drop projects without a care because their entire existence does not depend on it.
It's not about dropping the project, it's about removing any free version and asking users to pay.
What are the main targets?
In genereal, you would like to separate the styling from content. The appearance of visual elements should be the same on all pages of your website. It does not look great if you change font or styling from one paragraph to the next. So, the base style should be independent of your content.
On the other side, CSS is needed in a functional context too (e.g. to create round and rectangular buttons).
Every library that helps you to separate this concerns will do.
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.