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 t...
For further actions, you may consider blocking this person and/or reporting abuse
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.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...
… but then you may as well just use postcss?
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
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;
}
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…
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.
...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/
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.
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.
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.
tailwind css is like bootstrap?
Here is an awesome video about that :)