Why do you hate utility-css?
I could probably go on, but I think that is enough. There were a lot of discussions about this in the thread about tailwindUI here: https://news.ycombinator.com/item?id=22422873
If that's the only reason, then you should seriously re-evaluate it. [1] You can combine the utilty classes into your own component classes anyway e.g: '.my-button'.
The main thing that "utility css" offers is composition over inheritance. You're basically composing small styles to create component styles. You're not overriding the css framework, you're composing your own framework.
But it's not for everyone and that's cool too
[1] https://tailwindcss.com/docs/extracting-components/#extracti...
Yeah, I heard that argument but in that case I really don't see why I would use it over some well-defined css variables in normal css like this:
.btn-blue {
background: var(--color-blue);
color: var(--color-white);
font-weight: bold;
padding: 0.5rem 1rem;
border-radius: .25rem;
}
.btn-blue {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}Another benefit is that "bg-blue-500" is globally configurable with [1] themes or configuration files. This means you're not hard-coding colors or sizes (although, yes that's possible with plain old CSS too)
But what's even faster is simply using the utility classes in your components (it looks messy at first) but its extremely fast to write once you know the syntax of the classes e.g. ".p-xx = padding: xxem". Then all your components encapsulate that messiness and it's easy to change.
For example in vuejs, I might make a "btn" component file and style it using Tailwind classes, then the component encapsulates all it's styles but can still be globally configured using tailwind themes.
Outside of CSS Zen Garden and tiny hobby project, I feel like CSS and HTML _never_ were used as intended. I think the author of TailwindCSS said as much, but I can't find the quote now.