CODEWITHSUNDEEP
csssasstailwind-css
Jeff
Jeff

Reputation: 152

Tailwind @apply directive vs plain CSS when extracting components

Apologies if this falls under something opinionated, but I'm trying to determine if I'm missing something or if this is just another way of doing it.

We currently have our own CSS styles for commonly used elements using SASS. For example, for a button we have a base "btn" class and can apply diff variants using SASS "&-blue" to layer on a btn-blue style, etc. Overall this has worked well, but the issue (and why we rolled w/ tailwind) was that you can't account for every single thing within classes and a lot of our UI is specific to a component. Tailwind has been an absolute joy in this context of not needing to write "style: blah blah" or think too hard about what to name the class or what's common among certain classes.

That said, in the tailwind docs they mention extracting components and I'm trying out how that's any different from what we are doing now. It actually seems more cumbersome for us in that regard to recreate every base class we already have as @apply bg-white, etc. Is it fine to just do what we're doing for the base/common classes that we KNOW are common across the app and then just use tailwind to sprinkle in some additions or build out more custom use cases? What am I missing by not switching to @apply that I can't do in SASS?

Many thanks appreciated!

Upvotes: 1

Views: 2650

Answers (1)

chojnicki
chojnicki

Reputation: 3623

When to extract component and when use just classes depends of your needs.

Your "btn" is perfect example why @apply and extracting components may be handy. If your button has for ex. 10 tailwind classed then repeating it every time in layout is bad practice. When you extract it to .btn it will be easy to use.

But You asked what is the point of doing this instead of just standard CSS/SCSS. This is the thing with all frameworks. Why would you include framework and still use plain code, when framework can make it shorter and clean?

Instead of:

.btn {
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: .25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;

  &.btn-blue {
    background: #2b6cb0;
  }
}

You have just:

.btn {
  @apply text-white text-lg font-bold py-2 px-4 rounded;

  &.btn-blue {
    @apply bg-blue-500;
  }
}

Or if you have blue button in one place then keep it simple and:

.btn {
  @apply text-white text-lg font-bold py-2 px-4 rounded;
}

And in button:

<button class="btn bg-blue-500">

Tailwind is not designed to use it just with inline class="xxx yyy zzzz". If you just stick with that, code will eventually get really messy. That's why there is also option to use @apply or in some cases theme().

Upvotes: 2

Related Questions