DEV Community

Cover image for Tailwind tip: Managing a long list of utility classes in a single line of code
Kaleem Elahi
Kaleem Elahi

Posted on

Tailwind tip: Managing a long list of utility classes in a single line of code

Managing a long list of utility classes in a single line can become unwieldy.

Here is Tailwind's built-in feature @apply that can help make your code more readable and manageable:

Use @apply in Custom CSS

With Tailwind's @apply directive, you can create reusable CSS classes by grouping multiple Tailwind utilities. This helps reduce the number of classes in your HTML and keeps your components more organized.

Example:

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

You can then use this new .btn-primary class in your HTML instead of repeating the Tailwind utilities:

<button class="btn-primary">Primary Button</button>
Enter fullscreen mode Exit fullscreen mode

If it helped you, you can support:
https://buymeacoffee.com/kaleemelahi


Follow for more:
Linkedin
GIthub

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay