Using Tailwind CSS can result in long class names, which can make your code harder to read and navigate due to horizontal scrolling. Repeating similar styles across your code increases complexity, especially when making style changes, as you have to manually update multiple sections.

To maintain consistency across components, Tailwind's component classes (or more appropriately, custom classes) can be used to apply shared styles like padding, background color, and height without manually updating them across multiple files.

Creating Component Classes

To create a component class open the file that serves as the input file for your Tailwind CSS. It is the file that contains this code:

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

At the bottom of this file, add the following:

@layer components {
/* Your custom styling goes here */
}

The @layer directive in Tailwind CSS is used to group custom styles into specific layers. Layers are simply groups in which we categories classes. The @layer components {} syntax allows you to define custom component styles that are placed within the components layer. Meaning all styles in this layer are considered as component level styles, they are not utility styles like p-4 or max-w-2xl. Components are made up of two or more utility classes.

Let’s create a component class for a card. This is the syntax:

@layer components {
  .card {
    @apply max-w-sm rounded overflow-hidden shadow-lg bg-white;
  }
  /* You can add as many classes as you want example: */
  .btn {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
 }
 /* and so on... */
}

• .card is the name of the custom class. So you can name it however you want.

• @apply is a tailwind directive that intstructs tailwind to apply the classes, that immediately follow it, to our .card custom class.

• The rest is just regular tailwindcss classes like max-w-sm.

Using Component Classes

You use your custom classes like you would with a Vanilla CSS class. Just like this:

<div class="card">
<!-- Your Card Content -->
</div>

The code above would have looked like this without that custom class:

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
<!-- Your Card Content -->
</div>

But We Have React!

Yes! Using libraries like React or templating engines like Laravel Blade helps reduce style repetition by bundling elements into components. But sometimes a set of styles does not fit into a single component, rather it can be seen across many components. Sounds familiar? This is where these custom components or classes can be used.

Pitfall ⚠️

Using custom components is great. But if used a lot in a project, it can take away the flexibity of updating the style of your code and it makes tailwindcss just like Vanilla CSS, which results in tailwindcss being pointless.

So I’ll advice you use it sparingly. If you find yourself creating the same components in various parts of your code, consider uisng Vue.js, React, Angular etc to create more efficient resuable blocks of code.

Use custom classes only when you want to create classes that do not fit in a specific component but are repetitive across multiple components.

But I’m using HTML and Tailwind CSS only! Ok, fine. You can use it to create complete component classes. However do not over do it. Keep your css file small.

Farewell 🫡

It’s been a wonderful ride. Thank you for reading I hope you find this article informative and useful. Have a nice day ❤️.