Tailwind CSS 3.x Skill

Target: Tailwind CSS 3.4+ | Purpose: Utility-first CSS styling reference

Overview
Quick Start
Core Utility Classes
Flexbox
Grid
Responsive Design
State Variants
Dark Mode
Basic Configuration
Essential Component Patterns
@apply Directive
Arbitrary Values
Performance Tips
Quick Reference Card

Overview

What is Tailwind CSS: A utility-first CSS framework that provides low-level utility classes to build custom designs directly in markup.

When to Use This Skill:

Styling components with utility classes
Configuring tailwind.config.js
Implementing responsive designs
Creating dark mode themes

Prerequisites: Node.js 14.0+ (for build tools)

Quick Start

Installation

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

Minimal Configuration

tailwind.config.js:

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

CSS Entry Point:

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

Core Utility Classes

Spacing (Margin & Padding)

| Pattern | Example | Result | |---------|---------|--------| | m-{size} | m-4 | margin: 1rem | | p-{size} | p-8 | padding: 2rem | | mx-auto | mx-auto | center horizontally | | space-x-{size} | space-x-4 | horizontal gap between children |

Scale: 0=0px, 1=0.25rem, 2=0.5rem, 4=1rem, 8=2rem, 16=4rem

Colors

Format: {property}-{color}-{shade}

<div class="bg-blue-500 text-white border-gray-300">

Properties: text-, bg-, border-, ring-, divide- Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Typography

| Class | Effect | |-------|--------| | text-sm/base/lg/xl/2xl | Font size | | font-normal/medium/semibold/bold | Font weight | | text-left/center/right | Text alignment | | truncate | Ellipsis overflow | | line-clamp-{1-6} | Multi-line truncation |

Sizing

| Pattern | Example | |---------|---------| | w-full, w-1/2, w-64 | Width | | h-screen, h-48 | Height | | max-w-sm/md/lg/xl | Max width | | size-10 | Width + height together |

Flexbox

Quick Pattern

<div class="flex flex-row items-center justify-between gap-4">
  <!-- children -->
</div>

| Class | Effect | |-------|--------| | flex / flex-col | Enable flexbox, set direction | | items-center | Vertical alignment | | justify-between | Horizontal distribution | | gap-4 | Gap between items | | flex-1 | Grow to fill space | | shrink-0 | Prevent shrinking |

Grid

Quick Pattern

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Wide</div>
  <div>Normal</div>
</div>

| Class | Effect | |-------|--------| | grid-cols-{1-12} | Column count | | col-span-{1-12} | Span columns | | gap-{size} | Gap between cells |

Auto-fit Pattern (Responsive without Breakpoints)

<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">

Responsive Design

Breakpoint Prefixes (Mobile-First)

| Prefix | Min-Width | |--------|-----------| | sm: | 640px | | md: | 768px | | lg: | 1024px | | xl: | 1280px | | 2xl: | 1536px |

Common Patterns

<!-- Stack on mobile, row on tablet+ -->
<div class="flex flex-col md:flex-row gap-4">

<!-- Hide on mobile, show on desktop -->
<div class="hidden lg:block">Desktop only</div>

<!-- Responsive text -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">

State Variants

Hover, Focus, Active

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 active:bg-blue-700">

| Prefix | Trigger | |--------|---------| | hover: | Mouse over | | focus: | Element focused | | active: | Being clicked | | disabled: | Disabled element |

Group and Peer

<!-- Group: parent state affects children -->
<div class="group hover:bg-gray-100">
  <span class="group-hover:text-blue-500">Hover parent</span>
</div>

<!-- Peer: sibling state affects element -->
<input class="peer" type="checkbox" />
<label class="peer-checked:text-green-500">Checked!</label>

Dark Mode

Configuration

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media' for OS preference
}

Usage

<html class="dark">
  <body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

Basic Configuration

Extending Theme

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: { 500: '#3b82f6', 900: '#1e3a8a' },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

See REFERENCE.md for advanced configuration (custom screens, container, presets, plugins).

Essential Component Patterns

Button

<button class="
  px-4 py-2
  bg-blue-500 hover:bg-blue-600
  text-white font-medium rounded-lg
  focus:outline-none focus:ring-2 focus:ring-blue-300
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-colors
">
  Button
</button>

Card

<div class="
  bg-white dark:bg-gray-800
  rounded-xl shadow-lg p-6
  border border-gray-200 dark:border-gray-700
">
  <h3 class="text-xl font-semibold">Title</h3>
  <p class="mt-2 text-gray-600 dark:text-gray-300">Description</p>
</div>

See REFERENCE.md for more component patterns (input, navigation, badge, modal).

@apply Directive

Extract repeated utilities into custom classes:

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors;
  }
  .btn-primary {
    @apply btn bg-blue-500 text-white hover:bg-blue-600;
  }
}

When to Use: Repeated utility combinations, component libraries When to Avoid: One-off styles (use inline utilities)

Arbitrary Values

Use brackets for one-off custom values:

<div class="w-[137px]">Exact width</div>
<div class="bg-[#1da1f2]">Custom color</div>
<div class="grid-cols-[1fr_500px_2fr]">Custom columns</div>

Performance Tips

Content Configuration: Ensure all template paths are in content array
Avoid Dynamic Classes: bg-${color}-500 won't work

// DON'T
className={`bg-${color}-500`}

// DO
const colorClasses = { blue: 'bg-blue-500', red: 'bg-red-500' };
className={colorClasses[color]}

Quick Reference Card

SPACING: m-4 p-4 mx-auto space-x-4 gap-4
SIZING: w-full h-screen max-w-xl size-10
FLEX: flex flex-col items-center justify-between flex-1
GRID: grid grid-cols-3 col-span-2 gap-4
TEXT: text-lg font-bold text-center truncate
COLORS: bg-blue-500 text-white border-gray-300
BORDERS: border rounded-lg border-2
SHADOWS: shadow-sm shadow-lg
POSITION: absolute relative fixed sticky top-0 z-50
RESPONSIVE: sm: md: lg: xl: 2xl:
STATES: hover: focus: active: disabled: dark:
TRANSITIONS: transition duration-200

See Also: REFERENCE.md for:

Complete utility class reference (layout, typography, effects, filters)
Advanced configuration (presets, content transform, safelist)
Custom plugin development
Animation utilities and custom keyframes
Typography plugin usage
CSS-in-JS integration (twin.macro, CVA, clsx)
Framework integration (Next.js, Vite, Nuxt, SvelteKit)
Performance optimization
Migration guides

See Also: REFERENCE.md for comprehensive documentation.

styling-with-tailwind

Tailwind CSS 3.x Skill

Table of Contents

Overview

Quick Start

Installation

Minimal Configuration

Core Utility Classes

Spacing (Margin & Padding)

Colors

Typography

Sizing

Flexbox

Quick Pattern

Grid

Quick Pattern

Auto-fit Pattern (Responsive without Breakpoints)

Responsive Design

Breakpoint Prefixes (Mobile-First)

Common Patterns

State Variants

Hover, Focus, Active

Group and Peer

Dark Mode

Configuration

Usage

Basic Configuration

Extending Theme

Essential Component Patterns

Button

Card

@apply Directive

Arbitrary Values

Performance Tips

Quick Reference Card