Not having to come up with names for CSS classes, no duplicated CSS code, no fighting conflicting classes, everything in one file, being able to visualize a component just by reading the code... it's a godsend. I'll never go back to SCSS unless work obliges me.
Vue 3 with <script setup lang="ts">, TailwindCSS and Vite. The way God intended.
> If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.
Now I'm going to try it.
Bootstrap gives you a pre-made look and feel that you can use despite knowing CSS or not and maybe you can customize a bit, make a theme, etc. Bootstrap is more like "Tailwind UI" which is different thing from Tailwind (the tool).
To use plain Tailwind (without Tailwind UI) you do need to know CSS. It's just like a "CSS-in-JS" tool, except it's "CSS-in-HTML" this time.
It goes against semantic web, the old css zen garden etc, with good markup I can style a page however I want.
However using tailwind, it’s the get shit done tool. It is ugly, it goes against good web design and everything I believe makes good web design but it works fantastically well in practice.
I dislike using tailwind, at the same time I will choose to use tailwind without hesitation as it makes up process a lot less friction and avoids selector conflicts.
As soon as you want theming you'll need to start naming stuff. And if you want that theming to support third-party CSS overrides, or need good CSS selector support, you're going to be back to needing to name classes again.
Not everyone needs that, and that's fine. But there are plenty of people working on products and in environments where the Tailwind way is not going to be the path of least friction.
I would actually say StoryBook, or the StoryBook pattern at least, has been a much greater boon on FE development over the last decade.
DaisyUI on top of Tailwind helps, but then you may as well use Bootstrap and get better component support.
In the end I'll be writing <PricingCard :price="product.price" /> anyway. All that Tailwind garbage will be nicely hidden inside the component.
Saying it's because naming a class is hard is BS.
Working on an app with a great deal of technical debt last year, moving to Tailwind made a world of difference in being able to restyle components without also breaking styles on distant parts of the app that nobody on the team realized were relying on the same styles.
"Naming things is hard" is still such a cop-out.
Mess is still mess even if you are making it through a framework.
Tailwind is primarily a way to do "css-in-js", except it's "css-in-html". It might not look nice on the eye but it's fucking easier to maintain, safer to remove, etc. As long as you have a way to create "components" you're fine.
> Coming up with css class names is not hard.
Yes, unless you work alone on your tiny 2 weeks old side project, it's fucking hard.
idiot edit: not React, Rust.
I haven't used Vue (any version) so this wouldn't be the place I'd normally chime in about Svelte. People seem to love Vue as well.
The great thing about HN is you can easily see a users comments.
Rust is also about 100X as difficult to learn as Svelte (assuming you have basic familiarity with front-end dev), and easier to learn than React as well. Speaking from personal experience.
Interesting. Is there a page where I can read more about this and the current progress?
React has been moving in the direction of a compiled approach for over seven years now[1], predating Svelte’s first release. The introduction of hooks in 2018 grew out of early efforts on an optimizing compiler. Those earlier efforts were hampered by class semantics making things like constant folding across components difficult. React Forget seems like a predictable progression from there.
So if you're on the vue-wagon, skip svelte and wait until the next "The way God intended". If you're on svelte now, skip the next "The way God intended" and then after that, jump on the new wagon.
I was heavily into full-stack SSR frameworks + jQuery, then Angular and React came along and I was like "oh heaven, is this were we headed?", ignored both of those for years and finally found peace in the sacred words of Evan You.
Helper functions like createEl(tag, attributes, style, text) help...