Getting Started

Tailwind CSS Introduction

Learn about the utility-first CSS framework that changes how you write styles.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Instead of predefined components, it provides low-level utility classes that let you build custom designs directly in your HTML.

Utility-First vs Component-Based

Traditional CSS (Bootstrap-style):

html

<button class="btn btn-primary">Click me</button>

Utility-first (Tailwind):

html

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Click me</button>

Why Tailwind?

No naming fatigue (no inventing class names)
No CSS bloat — unused styles are purged in production
Design constraints built in (spacing scale, color palette)
Highly customizable via tailwind.config.js
Excellent with component frameworks (React, Vue)

Setup

bash

npm install -D tailwindcss
npx tailwindcss init

Example

html

<!-- Traditional CSS approach -->
<!-- You write: .card { padding: 1rem; border: 1px solid #e2e8f0; } -->
<div class="card">...</div>

<!-- Tailwind utility-first approach -->
<div class="p-4 border border-gray-200 rounded-lg shadow-sm bg-white">
  <h2 class="text-xl font-semibold text-gray-800 mb-2">Card Title</h2>
  <p class="text-gray-600 text-sm leading-relaxed">
    This card is styled entirely with utility classes.
    No custom CSS needed!
  </p>
  <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white
                 font-medium px-4 py-2 rounded transition-colors">
    Learn More
  </button>
</div>

Try it yourself — HTML