Tailwind CSS Skill

progressive_disclosure: entry_point: - summary - when_to_use - quick_start sections: core_concepts: - utility_first_approach - responsive_design - configuration advanced: - dark_mode - custom_utilities - plugins - performance_optimization integration: - framework_integration - component_patterns reference: - common_utilities - breakpoints - color_system tokens: entry: 75 full: 4500

Summary

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS. It offers responsive design, dark mode, customization through configuration, and integrates seamlessly with modern frameworks.

When to Use

Best for:

• Rapid prototyping with consistent design systems
• Component-based frameworks (React, Vue, Svelte)
• Projects requiring responsive and dark mode support
• Teams wanting to avoid CSS file maintenance
• Design systems with standardized spacing/colors

Consider alternatives when:

• Team unfamiliar with utility-first approach (learning curve)
• Project requires extensive custom CSS animations
• Legacy browser support needed (IE11)
• Minimal CSS footprint required without build process

Quick Start

Installation

# npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# yarn
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# pnpm
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuration

tailwind.config.js:

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

Basic CSS Setup

styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

First Component

// Simple button with Tailwind utilities
function Button({ children, variant = 'primary' }) {
  const baseClasses = "px-4 py-2 rounded-lg font-medium transition-colors";
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700",
    secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
    danger: "bg-red-600 text-white hover:bg-red-700"
  };

  return (
    <button className={`${baseClasses} ${variants[variant]}`}>
      {children}
    </button>
  );
}

Core Concepts

Utility-First Approach

Tailwind provides single-purpose utility classes that map directly to CSS properties.

Layout Utilities

Flexbox:

// Centered flex container
<div className="flex items-center justify-center">
  <div>Centered content</div>
</div>

// Responsive flex direction
<div className="flex flex-col md:flex-row gap-4">
  <div className="flex-1">Column 1</div>
  <div className="flex-1">Column 2</div>
</div>

// Flex wrapping and alignment
<div className="flex flex-wrap items-start justify-between">
  <div className="w-1/2 md:w-1/4">Item</div>
  <div className="w-1/2 md:w-1/4">Item</div>
</div>

Grid:

// Basic grid
<div className="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

// Responsive grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div className="col-span-1 md:col-span-2">Wide item</div>
  <div>Item</div>
  <div>Item</div>
</div>

// Auto-fit grid
<div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <div>Auto-sized item</div>
  <div>Auto-sized item</div>
</div>

Spacing System

Padding and Margin:

// Uniform spacing
<div className="p-4">Padding all sides</div>
<div className="m-8">Margin all sides</div>

// Directional spacing
<div className="pt-4 pb-8 px-6">Top 4, bottom 8, horizontal 6</div>
<div<