Skip to main content

Applying all the things

If you're adding Tailwind CSS to your existing project or can't use atomic/utility classes straight away, the @apply directive might be an option.

It's a way to extract components within CSS using the same classes you'd add to the element.

Here's a quick example:

.btn {
  @apply py-3 px-6 bg-red text-white hover:bg-green focus:bg-green;
}

It works with interaction states, such as hover and focus states, too.

It's not something I use or recommend often, but it could be a good way to get started.

Just don't overuse it.

Was this interesting?

Subscribe to my daily newsletter for software professionals on software development and delivery, Drupal, DevOps, community, and open-source.

About me

Picture of Oliver

I'm a certified Drupal Triple Expert and former Drupal Association staff member with 18 years of experience, a Drupal core contributor, public speaker, live streamer, and host of the Beyond Blocks podcast.