# Custom Utilities, Variants and @apply — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/x-utility

> Extend rather than fight the framework.

## @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.

```css
@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.

**Quiz:** What is a good use of @apply?

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

*Answer:* Styling third-party or CMS markup you cannot add classes to. Use it sparingly.