In which scenario is it recommended to use @apply over extracting styles into a component?

Can @apply be used like a replacement for @mixin in sass? If not, what should I use as a replacement for @mixin when working with tailwindcss?

CodePudding user response：

Generally, It is best to use @apply when applying the same styling across multiple components.

I find it is best to use @apply on your common elements such as h1-6 and p tags. I also like to create common components across my application like Cards or Buttons which use shared "surfaces". You will benefit from creating styles with @apply and then referencing them in the className of these components as you may wish to have common styles such as background color on dark/light mode, hover opacity, responsive sizing, etc...

You don't have to use @apply, and it makes no real difference in terms of performance. However, tailwindcss is a utility framework, so combining utilities into a single class does defeat the purpose of the library. It just makes your dev experience better if you are repeating yourself.

CodePudding user response：

The documentation suggests to use @apply only for small highly reusable things like buttons, inputs, headers etc. Otherwise you'll lose the advantages tailwind gives you.

For larger things suggests to use components, loops etc.

As a side note if you are using @apply more than it is necessary you'll increase tailwind's size, so you'll lose one of the biggest advantages tailwind has.

So you have to find a balance between these 2.

As for the mixin. the only thing you could do is the following in your app.css -tailwind's file-

@layer components {
  .foo {
     @apply mb-2 text-2xl font-bold;
  }

  .bar {
    @apply .foo;
   }
}