DEV Community

Cover image for How to Create Reusable Components in Tailwind CSS
aryan015
aryan015

Posted on

1

How to Create Reusable Components in Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows developers to build modern and responsive UIs quickly. While Tailwind is highly customizable, it does not provide predefined components like Bootstrap. However, we can create our own reusable components using Tailwind’s @apply directive. This makes project setup faster and ensures consistency across the design.

Why Use Reusable Components?

  • Consistency: Ensures the same styles are applied across the project.
  • Faster Development: Reduces the need to write repetitive utility classes.
  • Easier Maintenance: Update styles in one place instead of multiple files.

Step-by-Step Guide to Creating Tailwind Components

1. Install Tailwind CSS (If Not Already Installed)

If you haven’t set up Tailwind in your project, you can install it via npm:

npm install -D tailwindcss
Enter fullscreen mode Exit fullscreen mode

2. Define Custom Classes in globals.css or tailwind.css

In your CSS file, use the @layer components directive to create reusable classes.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .h1 {
    @apply text-4xl font-bold text-gray-900;
  }

  .h2 {
    @apply text-3xl font-semibold text-gray-800;
  }

  .p {
    @apply text-lg text-gray-600;
  }

  .btn {
    @apply px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition;
  }

  .btn-outline {
    @apply px-4 py-2 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-600 hover:text-white transition;
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Use Custom Classes in Your HTML

Once the custom classes are defined, you can use them in your HTML files.

<h1 class="h1">Main Heading</h1>
<h2 class="h2">Subheading</h2>
<p class="p">This is a paragraph using Tailwind custom classes.</p>
<button class="btn">Primary Button</button>
<button class="btn-outline">Outline Button</button>
Enter fullscreen mode Exit fullscreen mode

4. Benefits of Using @apply

  • Reduces duplication of Tailwind utility classes.
  • Keeps your HTML cleaner and easier to read.
  • Allows for centralized style updates.

Conclusion

By leveraging Tailwind’s @apply directive, you can create scalable, reusable components without compromising flexibility. This approach speeds up development and ensures design consistency throughout your project. Start using custom Tailwind components today and experience a more efficient workflow! 🚀

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

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

Okay