Tailwind CSS Reusing Styles

Reusing styles in Tailwind CSS is a common need, especially as the project scales, you may find yourself needing to repeat the same style combinations in different places.

In Tailwind CSS, styles are implemented through low-level utility classes, which is great for avoiding the problem of premature abstraction, allowing you to flexibly control styles and is very efficient in many scenarios.

However, as the project grows, it is inevitable that the same utility class combinations are reused in the code, which can lead to redundancy and maintenance difficulties. At this point, how to manage repeated styles and create reusable abstractions becomes particularly important.

Why are there repeated styles?

The core philosophy of Tailwind CSS is Utility-First. By combining a series of low-level utility classes, you can precisely control the styling of elements. Although this approach is powerful in the early stages, as projects become more complex, especially when dealing with common UI elements (such as buttons, cards, avatars, etc.), the same utility classes are often reused in multiple places.

Consider the following template, where each avatar image uses the same utility classes:

Here, each avatar image uses the same combination of utility classes:w-16 h-16 rounded-full border-2 border-white。

Although this approach is concise, as the number of avatars increases, the code becomes more and more verbose, and if you need to adjust these styles (such as changing the border color or border radius), you have to manually modify each class, leading to maintenance difficulties.

Solutions to Repeated Styles

With Tailwind, by using features such as @apply, @layer, and variants, you can easily create reusable styles, reduce code duplication, and improve development efficiency and maintainability.

• @apply: Combine commonly used utility classes into a custom class to reduce code duplication.
• @layer: Define style layers to organize different style combinations for easier management.
• variants: Extend utility classes so that styles can change based on state (such as responsive, hover, focus, etc.).

1. Using the @apply Directive to Create Custom Classes

Tailwind provides@applydirective, which allows you to combine a set of commonly used utility classes into a custom class in your CSS file, thus reducing duplicated code in HTML. In this way, you can abstract repeated utility classes into a reusable class.

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

/* 在你的 CSS 文件中 */
.avatar {
  @apply w-16 h-16 rounded-full border-2 border-white;
}

Then, in HTML, you only need to use this custom avatar class without having to repeatedly write the same utility classes:

In this way, you avoid repeatedly writing the same utility classes in HTML, and it also makes future style maintenance and modifications easier.

Compile Tailwind CSS using the Tailwind CLI or PostCSS:

npx tailwindcss -i ./styles.css -o ./output.css --watch

After compilation, the generated output.css file will replace @apply with the specific CSS styles.

2. Using @layer and @apply to Define More Complex Styles

If you have a more complex set of utility class combinations spanning multiple elements, you can use@layerto define these styles, and use@applyto combine them.

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

/* 定义一个自定义的层级，并应用一组工具类 */
@layer components {
  .avatar {
    @apply w-16 h-16 rounded-full border-2 border-white shadow-md;
  }
  .button {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
  }
}

Then, in HTML, you can still use these predefined styles through the avatar and button classes.

This approach allows you to define reusable classes in the CSS file and keeps HTML concise.

3. Using Tailwind CSS's variants Feature

In Tailwind CSS, variants allow you to extend existing utility classes through different states (such as responsive, hover, focus, etc.). If certain utility class combinations in your project need to change based on different states or device sizes, you can use variants to create reusable styles with responsive and interactive states.

For example, create a responsive avatar style:

@layer components {
  .avatar {
    @apply w-16 h-16 rounded-full border-2 border-white;
  }

  /* 响应式变化：在较大的屏幕上使用更大的头像 */
  @media (min-width: 768px) {
    .avatar {
      @apply w-24 h-24;
    }
  }
}

This approach ensures that the avatar maintains a consistent appearance across different devices and can automatically adjust its size based on screen dimensions.

Other Extensions