3 ms·
In my experience, it isn't black or white. I've used tailwind along with components, e.g. .button-primary { @apply rounded-full focus:ring focus:ring-orange-
by ekzy 3y ago
In my experience, it isn't black or white. I've used tailwind along with components, e.g.
.button-primary {
@apply rounded-full focus:ring focus:ring-orange-500 ring-offset-4 outline-none px-6 py-3 etc...
and it gives you the best of both worlds. You refactor common css code into components and still have the amazing flexibility of utility classes.
- tipiirai 3y agoCertainly not black and white. The article merely states that you need less HTML/CSS code to do the same thing and the resulting site is leaner and faster.
- NikxDa 3y agoArguably, this is the worst of both worlds. In a React world, you'd have a <Button variant="primary"> component for this. By using @apply excessively, now you have to deal with class names and the resulting messy conflicts, and yet you still can't/don't write plain CSS and harness its full power. @apply is one of Tailwind's worst features, imo.
- willdr 3y agoThis is not the best of both worlds. This is an antipattern and discouraged by the Tailwind core team and the Tailwind community at large.
- arzke 3y agoActually, the docs says it's perfectly fine to use @apply for highly reusable components like buttons and form controls: https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction https://tailwindcss.com/docs/reusing-styles#avoiding-prematu...