Using @apply in Tailwind CSS to Create Reusable Utility Classes

Why use @apply

When the same set of Tailwind utilities appears repeatedly in your HTML, you can move those utilities into a custom CSS selector with @apply. This keeps the markup cleaner while still relying on Tailwind’s design system.

How it works – a worked example

Add a rule to your stylesheet (e.g., src/styles.css or the file referenced in your Tailwind config):

/* src/styles.css */
.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

After rebuilding Tailwind, the generated CSS will contain a .btn rule with the properties from the listed utilities. You can then use the class in HTML:

<button class="btn">Save</button>

Limits and what to watch for

• Only generated utilities: @apply works with class names that Tailwind has actually produced (e.g., bg-blue-500). Arbitrary values like bg-[#1a2b3c] or unsupported pseudo‑classes must be written with square‑bracket notation or added as plain CSS.
• Build step required: If you forget to run the Tailwind build after adding or changing an @apply rule, the browser will see no matching CSS and the styles will not appear.
• Dynamic strings: @apply does not resolve class names that are constructed at runtime (e.g., from template literals). Those utilities must be present in your template files so Tailwind can include them.
• Media queries: Placing @apply inside an @screen block does not work; the rule is ignored silently.

Practical verification

1. Run your build command (e.g., npm run build or tailwindcss -i src/styles.css -o dist/output.css --watch).
2. Open the generated CSS file and confirm that the .btn rule contains the expected properties (background-color:#3b82f6; etc.).
3. Inspect the rendered button in the browser’s developer tools; the computed styles should match the utilities you placed inside @apply.

Common mistakes

• Adding the @apply rule but not rebuilding, leading to missing styles.
• Expecting @apply to pull in utilities that are only referenced via JavaScript‑generated class strings; Tailwind’s purge will remove them.
• Trying to use @apply with values that Tailwind does not generate, resulting in no effect and no error message.