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 usually 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 lot of them, in actual fact — and so they go a protracted solution to making your types extra maintainable and performant.

At the moment, I wish to discover one in every of these merit-producing options that has been severely undersold — Tailwind’s @apply function.

What @apply does

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

More often than not, folks showcase Tailwind’s @apply function with one in every 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` function in Tailwind principally solely exists to trick people who find themselves postpone by lengthy lists of lessons into making an attempt the framework.

It is best to virtually by no means use it 😬

Reuse your utility-littered HTML as a substitute.https://t.co/x6y4ksDwrt

— Adam Wathan (@adamwathan) February 9, 2020

Personally, I believe Tailwind’s @apply function is best than described.

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

In case you have been round through the time the place Sass is the dominant CSS processing software, you’ve in all probability heard of Sass mixins. They’re blocks of code which you could make — upfront — 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() {
  colour: pink; 
  background: blue; 
}

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

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

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

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

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

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

Tailwind utilities are a lot better than Sass mixins

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

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

...
 

Quite the opposite, for Sass mixins, you might want 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 so much.

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

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

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

...

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

…
 

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 format
• horizontal: makes a horizontal format

Defining these two utilities is straightforward.

• For vertical, we are able to 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 are able to use them straight contained in the HTML. So, if we wish to create a vertical format on cellular and a horizontal one on pill or desktop, we are able to use the next lessons:

...

For many 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 about to 640px, so the above HTML produces a vertical format on cellular, then switches to a horizontal format at 640px.

For those who favor conventional CSS over composing lessons like the instance above, you’ll be able to deal with @apply like Sass @consists of and use them straight in your CSS.

...
 

.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 taking place together with your format — in plain English — with out parsing code by way of a CSS lens. This implies quicker 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);
  }
}

However, Tailwind utilities don’t have these powers. On the very most, Tailwind can allow you to soak up one variable by way of their practical utilities.

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

Thankfully, we’re not affected by this “lack of energy” a lot as a result of we are able to make the most of all trendy CSS enhancements — together with CSS variables. This provides you a ton of room to create very helpful utilities.

Let’s undergo one other instance

A second instance I usually wish to showcase is the grid-simple utility that permits 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, we’ve got successfully created a reusable CSS grid (and we now not need to manually declare minmax in all places).

After we’ve got outlined this utility, we are able to use Tailwind’s arbitrary properties to regulate the variety of columns on the fly.

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

 ...