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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay