Applying Conditional Styles with @apply in Tailwind CSS

1. Introduction

In this tutorial, we will be exploring how to use the @apply directive in Tailwind CSS to apply conditional styles. This is an effective way to make your styles more readable and maintainable.

By the end of this tutorial, you will be able to:
- Understand the concept of @apply in Tailwind CSS
- Apply conditional styles using @apply

Prerequisites:
- Basic understanding of CSS
- Familiarity with Tailwind CSS is beneficial but not required

2. Step-by-Step Guide

The @apply directive allows you to extract repetitive utility patterns into reusable classes. However, it's important to note that @apply cannot be used with conditional styles directly. We will need to create separate classes for the different conditions and then apply them as needed.

Here's a step-by-step guide on how to do this:

1. Define your base class: Start by defining a base class with the common styles that will always be applied.

2. Define your conditional classes: Next, define classes for each condition, including the base styles using @apply, and then adding any additional styles.

3. Apply the classes conditionally: Finally, in your HTML, you can conditionally apply the different classes depending on your specific requirements.

3. Code Examples

Here's a practical example of how you might do this:

/* Define your base class */
.base-btn {
  @apply px-4 py-2 rounded;
}

/* Define your conditional classes */
.btn-primary {
  @apply base-btn bg-blue-500 text-white;
}

.btn-secondary {
  @apply base-btn bg-gray-500 text-white;
}

In this example, .base-btn is a common base class that has padding and rounded corners. We then define two conditional classes, .btn-primary and .btn-secondary, which both apply the base styles and then add their unique styles.

In your HTML, you might use these classes like so:

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>

4. Summary

In this tutorial, we learned how to use the @apply directive in Tailwind CSS to apply conditional styles. We learned that @apply cannot be used with conditional styles directly, and instead, we need to create separate classes for the different conditions.

Next steps for learning could include exploring more about Tailwind CSS and its utility-first design paradigm.

Additional resources:
- Tailwind CSS Documentation

5. Practice Exercises

Exercise 1: Create a .card base class and two conditional classes .card-primary and .card-secondary with different background colors.

Exercise 2: Create a .text base class and two conditional classes .text-warning and .text-danger with different text colors.

Solutions:

/* Exercise 1 */
.card {
  @apply p-4 rounded shadow;
}

.card-primary {
  @apply card bg-blue-200;
}

.card-secondary {
  @apply card bg-gray-200;
}

/* Exercise 2 */
.text {
  @apply font-medium;
}

.text-warning {
  @apply text-yellow-500;
}

.text-danger {
  @apply text-red-500;
}

These exercises should help reinforce your understanding of using @apply for conditional styling. Keep practicing with different use-cases to get a better grasp of this concept!