@apply for extracting patterns in Tailwind - Mini Project: Build & Apply

Extracting Patterns with Tailwind CSS @apply

📖 Scenario: You are building a simple webpage with multiple buttons that share the same style. Instead of repeating the same Tailwind CSS classes on each button, you want to extract the common styles into a reusable CSS class using the @apply directive.

🎯 Goal: Create a CSS class called .btn that uses @apply to include common Tailwind utility classes. Then use this class on multiple buttons in your HTML to keep your code clean and consistent.

📋 What You'll Learn

Create a CSS class named .btn in a styles.css file

Use @apply inside .btn to add Tailwind utility classes for padding, background color, text color, rounded corners, and hover effect

Add three buttons in the HTML that use the btn class

Ensure the buttons have consistent styling and a hover effect

💡 Why This Matters

🌍 Real World

Extracting common styles into reusable classes helps keep your CSS clean and maintainable, especially in projects with many similar elements.

💼 Career

Knowing how to use Tailwind's @apply directive is valuable for frontend developers to write efficient, scalable styles and collaborate on large codebases.

1

Create the HTML structure with three buttons

Write the basic HTML skeleton with a <main> section containing three <button> elements. Each button should have the text Button 1, Button 2, and Button 3 respectively. Do not add any classes yet.

Tailwind

    
    
    Button Styles
    


    
        
    

Need a hint?

Use three <button> tags inside the <main> element with the exact texts.

2

Create a CSS class .btn with Tailwind utility classes using @apply

In the styles.css file, create a CSS class called .btn. Inside it, use the @apply directive to add these Tailwind classes exactly: px-4, py-2, bg-blue-600, text-white, rounded, and hover:bg-blue-700.

Tailwind

    
    
    Button Styles
    


    
        Button 1
        Button 2
        Button 3
    



/* In styles.css file */

/* Create .btn class and use @apply with Tailwind classes */
/* Your code here */

Need a hint?

Write a CSS class .btn and inside it use @apply with the exact Tailwind classes separated by spaces.

3

Add the btn class to all three buttons in the HTML

Modify the three <button> elements in the HTML to include the class attribute with the value btn. For example, <button class="btn">Button 1</button>.

Tailwind

    
    
    Button Styles
    


    
        
        Button 1
        Button 2
        Button 3
    



/* In styles.css file */

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

Need a hint?

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

4

Add accessibility and responsive spacing to the buttons

Add an aria-label attribute to each button with the same text as the button's visible text (e.g., aria-label="Button 1"). Also, add a Tailwind class space-x-4 to the <main> element to add horizontal spacing between the buttons.

Tailwind

    
    
    Button Styles
    


    
    
        Button 1
        Button 2
        Button 3
    



/* In styles.css file */

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

Need a hint?

Add class="space-x-4" to the <main> tag and add aria-label attributes to each button with matching text.