Layer organization (base, components, utilities) in Tailwind - Mini Project: Build & Apply

Organizing Tailwind CSS Layers: base, components, utilities

📖 Scenario: You are building a simple webpage and want to organize your Tailwind CSS styles properly. Tailwind allows you to separate styles into three layers: base for default styles, components for reusable blocks, and utilities for small helper classes.This organization helps keep your styles clean and easy to maintain.

🎯 Goal: Create a Tailwind CSS file that uses the @layer directive to organize styles into base, components, and utilities layers. Add a base style for the body, a component style for a button, and a utility class for margin.

📋 What You'll Learn

Create a @layer base section with a style that sets body background color to #f0f0f0

Create a @layer components section with a class .btn-primary that has blue background and white text

Create a @layer utilities section with a class .m-7 that sets margin to 1.75rem

Use valid Tailwind CSS syntax and layering order

💡 Why This Matters

🌍 Real World

Organizing CSS layers is common in real projects to keep styles manageable and avoid conflicts.

💼 Career

Front-end developers often organize styles with Tailwind CSS layers to build scalable and maintainable user interfaces.

1

Create the base layer with body background color

Create a @layer base block and inside it write CSS to set the body background color to #f0f0f0.

Tailwind

# Create a @layer base block with body background color #f0f0f0

@layer base {
    /* Your code here */
}

Need a hint?

Use @layer base { body { background-color: #f0f0f0; } } to set the base style.

2

Add a components layer with a primary button style

Add a @layer components block below the base layer. Inside it, create a class .btn-primary that sets background-color to #2563eb (blue) and color to #ffffff (white).

Tailwind

@layer base {
    body {
        background-color: #f0f0f0;
    }
}

# Add a @layer components block with .btn-primary class

@layer components {
    /* Your code here */
}

Need a hint?

Use @layer components { .btn-primary { background-color: #2563eb; color: #ffffff; } } to add the button style.

3

Add a utilities layer with a margin utility class

Add a @layer utilities block below the components layer. Inside it, create a class .m-7 that sets margin to 1.75rem.

Tailwind

@layer base {
    body {
        background-color: #f0f0f0;
    }
}

@layer components {
    .btn-primary {
        background-color: #2563eb;
        color: #ffffff;
    }
}

# Add a @layer utilities block with .m-7 class

@layer utilities {
    /* Your code here */
}

Need a hint?

Use @layer utilities { .m-7 { margin: 1.75rem; } } to add the margin utility.

4

Complete the Tailwind CSS file with all layers organized

Ensure your Tailwind CSS file contains all three layers: @layer base with body background color, @layer components with .btn-primary styles, and @layer utilities with .m-7 margin class. The layers should be in this order: base, components, utilities.

Tailwind

@layer base {
    body {
        background-color: #f0f0f0;
    }
}

@layer components {
    .btn-primary {
        background-color: #2563eb;
        color: #ffffff;
    }
}

@layer utilities {
    .m-7 {
        margin: 1.75rem;
    }
}

# Review and finalize your Tailwind CSS file

Need a hint?

Make sure all three layers are present and in the correct order.