Custom Utilities, Variants and @apply

@utility, @custom-variant and @apply

@utility defines a new utility that works with all variants (hover:, md:), for example a scrollbar-hidden helper. @custom-variant defines new conditions, such as a theme-midnight variant. @apply inlines existing utilities into custom CSS, which is useful for styling third-party markup you cannot add classes to, but overusing it recreates traditional CSS with extra steps. Plugins are loaded with @plugin, for example the typography plugin.

Extending Tailwind in CSS

A custom utility, a variant, @apply and a plugin.

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@utility scrollbar-hidden {
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

/* styling markup from a CMS you cannot add classes to */
.cms-content a {
  @apply font-medium text-brand-500 underline underline-offset-2;
}

Prefer components over @apply

Reuse markup through framework components or partials; reserve @apply for markup you do not control.

Quick check: What is a good use of @apply?

• Styling third-party or CMS markup you cannot add classes to
• Recreating a class for every component
• Replacing all utilities in HTML
• Defining breakpoints