Introduction to Tailwind CSS

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your HTML. Unlike traditional CSS frameworks like Bootstrap that give you pre-designed components, Tailwind gives you the building blocks to create any design.

Why Tailwind CSS?

Tailwind has become one of the most popular CSS frameworks because it offers several advantages:

• Rapid Development - Build custom UIs without writing custom CSS
• Consistency - Design tokens enforce consistent spacing, colors, and typography
• Responsive Design - Built-in responsive modifiers make mobile-first design easy
• Small Production Bundle - Unused styles are automatically removed
• No Context Switching - Style directly in your HTML/JSX

Utility-First Approach

Instead of writing custom CSS classes, you apply pre-existing utility classes directly:

<!-- Traditional CSS approach -->
<div class="card">
  <h2 class="card-title">Hello World</h2>
  <p class="card-description">This is a card component.</p>
</div>

<style>
.card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.card-description {
  color: #666;
}
</style>

<!-- Tailwind CSS approach -->
<div class="bg-white rounded-lg p-6 shadow-md">
  <h2 class="text-2xl font-bold mb-2">Hello World</h2>
  <p class="text-gray-600">This is a card component.</p>
</div>

Installing Tailwind CSS

The easiest way to get started is with the Tailwind CLI:

# Create a new project
npm init -y

# Install Tailwind CSS
npm install -D tailwindcss

# Initialize Tailwind config
npx tailwindcss init

Configuration

Tailwind generates a tailwind.config.js file where you configure your project:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Adding Tailwind Directives

Create a CSS file with Tailwind's directives:

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Building Your CSS

Run the Tailwind CLI to generate your CSS:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Tailwind with Frameworks

Tailwind integrates seamlessly with popular frameworks:

# Next.js
npx create-next-app@latest --tailwind

# Vite + React
npm create vite@latest my-app -- --template react
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Key Concepts to Learn

As you continue with Tailwind, you'll learn:

• Spacing and sizing utilities (padding, margin, width, height)
• Typography utilities (font size, weight, color)
• Flexbox and Grid layouts
• Responsive design with breakpoint prefixes
• State variants (hover, focus, active)
• Dark mode support
• Custom configuration and theming