Why reusable patterns matter in Tailwind - See It in Action

Why Reusable Patterns Matter with Tailwind CSS

📖 Scenario: You are building a simple webpage with several buttons that share the same style. Instead of repeating the same Tailwind CSS classes for each button, you will create a reusable pattern using Tailwind's @apply directive inside a CSS file. This helps keep your code clean and easy to maintain.

🎯 Goal: Create a reusable button style using Tailwind CSS's @apply directive and apply it to multiple buttons in your HTML. This will show how reusable patterns save time and reduce errors.

📋 What You'll Learn

Create a CSS class called .btn that uses Tailwind's @apply to add button styles

Add three buttons in HTML that use the btn class

Use Tailwind utility classes for colors, padding, border radius, and hover effect inside @apply

Ensure the buttons are accessible with aria-label attributes

Make the page responsive so buttons stack vertically on small screens

💡 Why This Matters

🌍 Real World

Reusable CSS patterns help developers avoid repeating the same styles many times. This makes websites easier to update and reduces mistakes.

💼 Career

Understanding how to create and use reusable styles with Tailwind CSS is a valuable skill for front-end developers working on scalable and maintainable projects.

1

Create the HTML structure with three buttons

Create an HTML file with a <main> section containing three <button> elements. Each button should have the text Button 1, Button 2, and Button 3 respectively. Add an aria-label attribute to each button with the same text as the button label.

Tailwind

Need a hint?

Use three <button> tags inside <main>. Add aria-label attributes matching the button text.

2

Create a CSS file and define a reusable .btn class

Create a CSS file and define a class called .btn. Inside it, use Tailwind's @apply directive to add these utility classes: bg-blue-600, text-white, py-2, px-4, rounded, and hover:bg-blue-700.

Tailwind

  Button 1
  Button 2
  Button 3


/* Create .btn class with @apply here */

Need a hint?

Use @apply inside .btn to add all the Tailwind classes in one line.

3

Apply the .btn class to all buttons

Add the class btn to each of the three <button> elements in your HTML so they all share the same style.

Tailwind

  Button 1
  Button 2
  Button 3


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

Need a hint?

Add class="btn" inside each <button> tag.

4

Make buttons stack vertically on small screens

Wrap the buttons inside a <div> with Tailwind classes flex flex-col gap-4 sm:flex-row sm:gap-2 to make them stack vertically on small screens and horizontally on larger screens.

Tailwind

  
    Button 1
    Button 2
    Button 3
  


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

Need a hint?

Use a <div> with Tailwind classes flex flex-col gap-4 sm:flex-row sm:gap-2 around the buttons.