Search⌘ K
AI Features
Home
Courses
Modern CSS with Tailwind

Using @apply for Duplication

Discover how to use the @apply directive in Tailwind CSS to apply utility classes within custom CSS selectors. Understand the role of @layer to organize styles into base, components, and utilities layers, enabling you to manage style precedence and avoid duplication while building maintainable, scalable designs.

We'll cover the following...

@apply directive

The @apply directive lets us use Tailwind classes in the definition of other CSS selectors. So, we can redefine our header classes in CSS like this:

@layer components {
  .title { @apply text-6xl font-bold }
  .subtitle { @apply text-4xl font-semibold }
  .subsubtitle { @apply text-lg font-medium italic }
}

We can use these like any other CSS classes:

<div class="title">Title</div>

@layer directive

The @layer directive can either be base, components, or utilities. As far as the browser is concerned, if we use @layer, the selectors are defined as part of whatever layer we declare, no matter where the selector definitions are actually ...