Tailwind’s @apply Function is Higher Than it Sounds

By this level, it’s not a secret to most individuals that I like Tailwind.

However, unknown to many individuals (who typically bounce to conclusions whenever you point out Tailwind), I don’t like vanilla Tailwind. In truth, I discover most of it horrible and I shall chorus from saying additional unkind phrases about it.

However I acknowledge and see that Tailwind’s methodology has deserves — a number of them, the truth is — and so they go an extended option to making your types extra maintainable and performant.

At present, I wish to discover certainly one of these merit-producing options that has been severely undersold — Tailwind’s @apply characteristic.

What @apply does

Tailwind’s @apply options helps you to “apply” (or just put, copy-and-paste) a Tailwind utility into your CSS.

More often than not, folks showcase Tailwind’s @apply characteristic with certainly one of Tailwind’s single-property utilities (which adjustments a single CSS declaration). When showcased this manner, @apply doesn’t sound promising in any respect. It sounds downright silly. So clearly, no one desires to make use of it.

/* Enter */
.selector {
  @apply p-4;
}

/* Output */
.selector {
  padding: 1rem;
}

To make it worse, Adam Wathan recommends in opposition to utilizing @apply, so the uptake couldn’t be worse.

Confession: The `apply` characteristic in Tailwind principally solely exists to trick people who find themselves postpone by lengthy lists of courses into attempting the framework.

It’s best to virtually by no means use it

Reuse your utility-littered HTML as an alternative.https://t.co/x6y4ksDwrt

— Adam Wathan (@adamwathan) February 9, 2020

Personally, I believe Tailwind’s @apply characteristic is healthier than described.

Tailwind’s @apply is like Sass’s @consists of

If in case you have been round in the course of the time the place Sass is the dominant CSS processing software, you’ve most likely heard of Sass mixins. They’re blocks of code you can make — prematurely — to copy-paste into the remainder of your code.

• To create a mixin, you employ @mixin
• To make use of a mixin, you employ @consists of

// Defining the mixin
@mixin some-mixin() {
  coloration: pink; 
  background: blue; 
}

// Utilizing the mixin
.selector {
  @embody some-mixin(); 
}

/* Output */
.selector {
  coloration: pink; 
  background: blue; 
}

Tailwind’s @apply characteristic works the identical method. You possibly can outline Tailwind utilities prematurely and use them later in your code.

/* Defining the utility */
@utility some-utility {
  coloration: pink; 
  background: blue; 
}

/* Making use of the utility */
.selector {
  @apply some-utility; 
}

/* Output */
.selector {
  coloration: pink; 
  background: blue; 
}

Tailwind utilities are significantly better than Sass mixins

Tailwind’s utilities can be utilized instantly within the HTML, so that you don’t have to write down a CSS rule for it to work.

@utility some-utility {
  coloration: pink; 
  background: blue; 
}

<div class="some-utility">...</div> 

Quite the opposite, for Sass mixins, it is advisable to create an additional selector to deal with your @consists of earlier than utilizing them within the HTML. That’s one further step. Many of those further steps add as much as rather a lot.

@mixin some-mixin() {
  coloration: pink; 
  background: blue; 
}

.selector {
  @embody some-mixin(); 
}

/* Output */
.selector {
  coloration: pink; 
  background: blue; 
}

<div class="selector">...</div>

Tailwind’s utilities will also be used with their responsive variants. This unlocks media queries straight within the HTML and generally is a superpower for creating responsive layouts.

<div class="utility1 md:utility2">…</div> 

A easy and sensible instance

Considered one of my favourite — and most simply understood — examples of all time is a mixture of two utilities that I’ve constructed for Splendid Layouts (part of Splendid Labz):

• vertical: makes a vertical structure
• horizontal: makes a horizontal structure

Defining these two utilities is simple.

• For vertical, we will use flexbox with flex-direction set to column.
• For horizontal, we use flexbox with flex-direction set to row.

@utility horizontal {
  show: flex;
  flex-direction: row;
  hole: 1rem;
}

@utility vertical {
  show: flex;
  flex-direction: column;
  hole: 1rem;
}

After defining these utilities, we will use them instantly contained in the HTML. So, if we wish to create a vertical structure on cell and a horizontal one on pill or desktop, we will use the next courses:

<div class="vertical sm:horizontal">...</div>

For individuals who are new to Tailwind, sm: here’s a breakpoint variant that tells Tailwind to activate a category when it goes past a sure breakpoint. By default, sm is ready to 640px, so the above HTML produces a vertical structure on cell, then switches to a horizontal structure at 640px.

Should you favor conventional CSS over composing courses like the instance above, you’ll be able to deal with @apply like Sass @consists of and use them instantly in your CSS.

<div class="your-layout">...</div> 

.your-layout {
  @apply vertical; 

  @media (width >= 640px) {
    @apply horizontal;
  }
}

The attractive half about each of those approaches is you’ll be able to instantly see what’s occurring along with your structure — in plain English — with out parsing code via a CSS lens. This implies sooner recognition and extra maintainable code in the long term.

Tailwind’s utilities are rather less highly effective in comparison with Sass mixins

Sass mixins are extra highly effective than Tailwind utilities as a result of:

1. They allow you to use a number of variables.
2. They allow you to use different Sass options like @if and @for loops.

@mixin avatar($dimension, $circle: false) {
  width: $dimension;
  peak: $dimension;

  @if $circle {
    border-radius: math.div($dimension, 2);
  }
}

Alternatively, Tailwind utilities don’t have these powers. On the very most, Tailwind can allow you to soak up one variable via their purposeful utilities.

/* Tailwind Useful Utility */
@utility tab-* { 
  tab-size: --value(--tab-size-*);
}

Luckily, we’re not affected by this “lack of energy” a lot as a result of we will benefit from all fashionable CSS enhancements — together with CSS variables. This offers you a ton of room to create very helpful utilities.

Let’s undergo one other instance

A second instance I typically wish to showcase is the grid-simple utility that allows you to create grids with CSS Grid simply.

We are able to declare a easy instance right here:

@utility grid-simple {
  show: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  hole: var(--gap, 1rem);
}

By doing this, now we have successfully created a reusable CSS grid (and we not need to manually declare minmax all over the place).

After now we have outlined this utility, we will use Tailwind’s arbitrary properties to regulate the variety of columns on the fly.

<div class="grid-simple [--cols:3]"> 
  <div class="merchandise">...</div>
  <div class="merchandise">...</div>
  <div class="merchandise">...</div>
</div>

To make the grid responsive, we will add Tailwind’s responsive variants with arbitrary properties so we solely set --cols:3 on a bigger breakpoint.

<div class="grid-simple sm:[--cols:3]"> 
  <div class="merchandise">...</div>
  <div class="merchandise">...</div>
  <div class="merchandise">...</div>
</div>

This makes your layouts very declarative. You possibly can instantly inform what’s happening whenever you learn the HTML.

Now, alternatively, when you’re uncomfortable with an excessive amount of Tailwind magic, you’ll be able to at all times use @apply to copy-paste the utility into your CSS. This manner, you don’t need to hassle writing repeat and minmax declarations each time you want a grid that grid-simple can create.

.your-layout {
  @apply grid-simple; 
  @media (width >= 640px) {
    --cols: 3;
  }
}

<div class="your-layout"> ... </div>

By the way in which, utilizing @apply this manner is surprisingly helpful for creating advanced layouts! However that appears out of scope for this text so I’ll be completely happy to point out you an instance one other day.

Wrapping up

Tailwind’s utilities are very highly effective by themselves, however they’re much more highly effective when you enable your self to make use of @apply (and permit your self to detach from conventional Tailwind recommendation). By doing this, you acquire entry to Tailwind as a software as an alternative of it being a dogmatic method.

To make Tailwind’s utilities much more highly effective, you would possibly wish to think about constructing utilities that may assist you create layouts and good visible results rapidly and simply.

I’ve constructed a handful of those utilities for Splendid Labz and I’m completely happy to share them with you when you’re ! Simply take a look at Splendid Layouts to see a subset of the utilities I’ve ready.

By the way in which, the utilities I confirmed you above are watered-down variations of the particular ones I’m utilizing in Splendid Labz.

Another observe: When scripting this, Splendid Layouts work with Tailwind 3, not Tailwind 4. I’m engaged on a launch quickly, so join updates when you’re !