DEV Community

Discussion on: Tailwind class madness. Never again?!

View post

Replies for: It’s clean, readable, convenient, fast, and globally available Is the world going mad or am I? .button { font-weight: 700; border-radi...

Collapse
 
esirei profile image
Esirei • • Edited

This works, but with tailwind, you use the @layer and @apply directives to create such components.
This ensures that the classes are above the utility classes in the compiled css file and as such properties can be overridden using tailwind utility classes.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer components {
  .button {
    @apply font-bold rounded border-0 bg-blue hover:opacity-80;
  }

  .buttonPrimary {
    @apply p-4 text-lg;
  }

  .buttonSecondary {
    @apply p-2 text-md;
  }
}
Enter fullscreen mode Exit fullscreen mode

Checkout this Tailwind Playground

This is also not so global, "reuse" friendly.

Also, I do not understand what you mean here @lukasborawski .

Collapse
 
lukasborawski profile image
Lukas Borawski • • Edited

Yes, I've mentioned that you can use it and define it like that, but still this is just CSS. I can't type it, can't easily extend it and mix with some additional logic, can't use it with props. Get your point but still, it's very useful and versatile for the Vue.js app.