YouTip

Reusing styles in Tailwind CSS is a common requirement, especially as projects grow, 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. This approach is very suitable for avoiding premature abstraction problems, giving you flexible control over styles and being very efficient in many scenarios. However, as the project grows, it's inevitable that the same utility class combinations will be used repeatedly in the code, which can lead to redundancy and maintenance difficulties. At this point, how to manage duplicate styles and create reusable abstractions becomes particularly important. ### Why Are There Duplicate Styles? The core concept of Tailwind CSS is Utility-First. By combining a series of low-level utility classes, you can precisely control element styles. Although 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 class combinations are often repeated in multiple places. Consider the following template, where each avatar image uses the same utility classes: ## Example [Try it »](#) Here, each avatar image uses the same utility class combination: w-16 h-16 rounded-full border-2 border-white. Although concise, as the number of avatars increases, the code becomes increasingly verbose, and if you need to adjust these styles (such as changing the border color or border radius), you need to manually modify each class, making maintenance difficult. ### Solutions for Duplicate Styles Through using @apply, @layer, and variants features, Tailwind allows you to 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 duplicate code. * **`@layer`**: Define style layers to organize different style combinations for easier management. * **`variants`**: Extend utility classes so that styles can change based on states (such as responsive, hover, focus, etc.). **1. Using @apply Directive to Create Custom Classes** Tailwind provides the @apply directive, which allows you to combine a group of commonly used utility classes into a custom class in a CSS file, thereby reducing duplicate code in HTML. Through this approach, you can abstract repeated utility classes into a reusable class. @tailwind base;@tailwind components;@tailwind utilities;/* In your CSS file */.avatar { @apply w-16 h-16 rounded-full border-2 border-white;} Then, in HTML, you only need to use this custom avatar class instead of writing the same utility classes repeatedly: ## Example Through this approach, you avoid writing the same utility classes repeatedly in HTML, and it also makes future maintenance and modification of styles easier. Compile Tailwind CSS using Tailwind CLI or PostCSS: npx tailwindcss -i ./styles.css -o ./output.css --watch After compilation, the generated output.css file will replace @apply with specific CSS styles. **2. Using @layer and @apply to Define More Complex Styles** If you have a more complex combination of utility classes across multiple elements, you can use @layer to define these styles and combine them with @apply. @tailwind base;@tailwind components;@tailwind utilities;/* Define a custom layer and apply a group of utility classes */@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. ## Example This approach allows you to define reusable classes in the CSS file while keeping 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 vary based on different states or device sizes, you can use variants to create reusable styles with responsive and interactive states. For example, creating a responsive avatar style: @layer components { .avatar { @apply w-16 h-16 rounded-full border-2 border-white; } /* Responsive variation: use larger avatar on larger screens */ @media (min-width: 768px) { .avatar { @apply w-24 h-24; } }} This approach ensures that avatars maintain a consistent appearance across different devices and can automatically adjust in size based on screen size.