Tailwind CSS Documentation

Overview

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML.

Instead of writing custom CSS, you use utility classes directly in your markup. This approach offers: - Faster development - Consistent design system - Smaller CSS bundle (with purging) - Responsive design out of the box

Card Component

Card.tsx

1<div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
2  <div className="md:flex">
3    <div className="md:shrink-0">
4      <img 
5        className="h-48 w-full object-cover md:h-full md:w-48" 
6        src="/img/building.jpg" 
7        alt="Building"
8      />
9    </div>
10    <div className="p-8">
11      <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
12        Company retreats
13      </div>
14      <a href="#" className="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
15        Incredible accommodation
16      </a>
17      <p className="mt-2 text-slate-500">
18        Looking 400">for a place to stay? We've got you covered.
19      </p>
20    </div>
21  </div>
22</div>

Installation

Quick Install

Terminal

1-amber-400">npm install -D tailwindcss postcss autoprefixer && -amber-400">npx tailwindcss init -p

Requirements

Node.js 14+

Setup Steps

1Install Tailwind CSS: npm install -D tailwindcss postcss autoprefixer
2Generate config files: npx tailwindcss init -p
3Configure content paths in tailwind.config.js
4Add Tailwind directives to your CSS

Responsive Design

Tailwind provides responsive variants for every utility class. Use breakpoint prefixes to apply styles at different screen sizes.

Breakpoints: - sm: 640px - md: 768px - lg: 1024px - xl: 1280px - 2xl: 1536px

Responsive Layout

ResponsiveGrid.tsx

1<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
2  <div className="p-4 bg-blue-500 text-white rounded">
3    Column 1
4  </div>
5  <div className="p-4 bg-blue-500 text-white rounded">
6    Column 2
7  </div>
8  <div className="p-4 bg-blue-500 text-white rounded">
9    Column 3
10  </div>
11</div>

Dark Mode

Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled.

Dark Mode Styling

DarkModeCard.tsx

1<div className="bg-white dark:bg-slate-800 p-4 rounded-lg">
2  <h2 className="text-slate-900 dark:text-white text-xl font-bold">
3    Dark Mode Card
4  </h2>
5  <p className="text-slate-600 dark:text-slate-300">
6    This card adapts to dark mode automatically.
7  </p>
8</div>

Best Practices

Use component extraction for repeated patterns
Configure your color palette in tailwind.config.js
Use @apply sparingly in component classes
Enable JIT mode for faster builds
Use the Tailwind CSS IntelliSense VS Code extension

Common Pitfalls

⚠️Not purging unused styles in production

⚠️Over-relying on @apply instead of utility classes

⚠️Not configuring content paths correctly

Code Snippets

Button Variants

basic

Styled button with variants

TSX

1<button className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors">
2  Primary
3</button>
4 
5<button className="px-4 py-2 bg-transparent border border-blue-500 text-blue-500 hover:bg-blue-50 font-medium rounded-lg transition-colors">
6  Outline
7</button>

Resources

Official Documentation

https://tailwindcss.com/docs

GitHub Repository

https://github.com/tailwindlabs/tailwindcss

Related Technologies

▲Next.js ⚛️React