Crash Course: Tailwind CSS Essentials — Learn Utility-First Styling Fast

📘 Chapter 5: Building Reusable Components with Tailwind

🧭 What You’ll Learn

In this chapter, you’ll learn how to:

• Build modular and reusable UI components using Tailwind CSS
• Use @apply to extract repetitive utility classes
• Maintain a scalable folder/component structure
• Create buttons, cards, navbars, modals, and forms
• Reuse design patterns across pages or frameworks (React/Vue)
• Write clean, maintainable Tailwind markup

⚙️ What Are Reusable Components?

A reusable component is a self-contained block of UI that can be used in multiple places in your application—either via HTML partials, component-based frameworks (React, Vue, Svelte), or even in server-rendered apps.

In Tailwind CSS, we use utility classes directly in markup to style these components—but to keep things DRY, we can also extract them using:

• @apply in CSS
• Custom class names in HTML/JSX
• Framework-specific component systems

🔨 Component Design Principles

When building Tailwind components:

• Keep logic and structure consistent
• Limit utility class repetition
• Group related classes together
• Extract frequently reused styles using @apply
• Make components responsive by default
• Use slot/content injection if using Vue, React, etc.

🧱 Folder Structure for Components

bash

src/

├── components/

│   ├── Button.vue / Button.jsx

│   ├── Card.vue / Card.jsx

│   ├── Modal.vue / Modal.jsx

│   └── Navbar.vue / Navbar.jsx

├── styles/

│   └── components.css (for @apply utilities)

🔹 Using @apply to Create Reusable Class Styles

styles/components.css

css

.btn {

  @apply px-4 py-2 rounded bg-blue-600 text-white font-semibold hover:bg-blue-700;

}

.btn-outline {

  @apply px-4 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white;

}

Then use:

html

<button class="btn">Submit</button>

<button class="btn-outline">Cancel</button>

🧩 Example 1: Reusable Button

html

<!-- Primary Button -->

<button class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">

  Submit

</button>

<!-- Secondary Button -->

<button class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">

  Cancel

</button>

Use @apply or convert these into React/Vue components for true reusability.

🧩 Example 2: Card Component

html

<div class="bg-white rounded-lg shadow-md overflow-hidden">

  <img src="https://via.placeholder.com/300" alt="Image" class="w-full h-48 object-cover">

  <div class="p-4">

    <h2 class="text-xl font-bold mb-2">Card Title</h2>

    <p class="text-gray-600">Short description for the card component.</p>

    <button class="mt-4 bg-blue-600 text-white py-2 px-4 rounded">Learn More</button>

  </div>

</div>

Use @apply for .card, .card-title, etc., or componentize in Vue/React.

🧩 Example 3: Responsive Navbar

html

<nav class="bg-white shadow px-6 py-4 flex items-center justify-between">

  <h1 class="text-2xl font-bold text-blue-600">MyApp</h1>

  <div class="hidden md:flex space-x-6">

    <a href="#" class="text-gray-600 hover:text-blue-600">Home</a>

    <a href="#" class="text-gray-600 hover:text-blue-600">Features</a>

    <a href="#" class="text-gray-600 hover:text-blue-600">Pricing</a>

  </div>

</nav>

For mobile, use a hamburger menu or headlessui + Vue/React transitions.

🧩 Example 4: Modal Dialog Box

html

<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">

  <div class="bg-white p-6 rounded-lg w-96 shadow-lg">

    <h2 class="text-xl font-bold mb-4">Are you sure?</h2>

    <p class="text-gray-600 mb-6">This action cannot be undone.</p>

    <div class="flex justify-end space-x-4">

      <button class="btn-outline">Cancel</button>

      <button class="btn">Confirm</button>

    </div>

  </div>

</div>

Show/hide modal with JS logic or framework state.

🧩 Example 5: Form with Validation UI

html

<form class="space-y-6 max-w-md mx-auto">

  <div>

    <label class="block text-gray-700 font-medium">Email</label>

    <input type="email" class="w-full mt-1 p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" />

  </div>

  <div>

    <label class="block text-gray-700 font-medium">Password</label>

    <input type="password" class="w-full mt-1 p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" />

  </div>

  <button type="submit" class="btn w-full">Login</button>

</form>

Add error indicators using border-red-500, text-red-600, etc.

🛠️ Responsive & Variant Utilities

Tailwind utilities support state & breakpoint modifiers:

html

<button class="bg-blue-600 hover:bg-blue-700 active:scale-95 sm:px-2 md:px-4">

  Click Me

</button>

🧠 Best Practices

• Start with raw utility classes → extract patterns later
• Use @apply for repeated styles (btn, card, etc.)
• Leverage Tailwind plugins like forms, typography, and aspect-ratio
• Combine Tailwind with JS frameworks for dynamic interactivity
• Keep classes grouped logically (e.g., layout, spacing, colors)

📊 Component Class Example Table

✅ Summary

Tailwind CSS makes it simple to build reusable components that are:

• Scalable
• Customizable
• Fully responsive
• Easily styled with variants (hover, focus, etc.)
• Extractable with @apply or component libraries

In the next chapter, we’ll explore optimizing your Tailwind project and preparing for production.