2 ms·
> You can combine the utilty classes into your own component classes anyway e.g: '.my-button'. Yeah, I heard that argument but in that case I really don't see
by SahAssar 7y ago
> You can combine the utilty classes into your own component classes anyway e.g: '.my-button'.
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;
}
instead of:
.btn-blue {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
- gitgud 7y agoWell, it's probably faster to write (depending on how good your code completion is). 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. [1] https://tailwindcss.com/docs/theme https://tailwindcss.com/docs/theme