Tailwind CSS Utility Classes Cheatsheet 📘

A comprehensive cheatsheet for Tailwind CSS utility classes, perfect for quick reference during development. This guide includes commonly used utilities, responsive design patterns, and best practices for building modern user interfaces.

🚀 Features

• 📱 Complete responsive design utilities
• 🎨 Comprehensive color system guide
• 📦 Layout and spacing references
• 🔤 Typography and text styling
• 🎯 Interactive state management
• 💡 Best practices and tips

📖 Quick Links

• Official Tailwind Documentation
• Tailwind Play - Official Playground
• Tailwind UI - Component Library

Table of Contents

• Installation & Setup
• Basic Configuration
• Layout
  • Display
  • Flexbox
  • Grid
• Spacing
  • Margin
  • Padding
• Typography
  • Font Size
  • Font Weight
  • Text Alignment
  • Text Color
• Backgrounds
  • Background Color
  • Background Size
  • Background Position
• Borders
  • Border Width
  • Border Color
  • Border Radius
• Effects
  • Opacity
  • Box Shadow
• Interactivity
  • Cursor
  • User Select
  • Hover/Focus States
• Responsive Design
  • Breakpoints
• Color System
• Tips & Best Practices
• Common UI Patterns
• Contributing
• License

🛠 Installation & Setup

TODO: Add comprehensive installation guide

Quick Start

# Install Tailwind CSS
npm install -D tailwindcss

# Initialize configuration file
npx tailwindcss init

Basic Configuration

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

Layout

Display

• block - Block element
• inline - Inline element
• inline-block - Inline-block element
• flex - Flex container
• inline-flex - Inline flex container
• grid - Grid container
• hidden - Hide element

Flexbox

• flex-row - Direction: left to right
• flex-col - Direction: top to bottom
• flex-wrap - Allow wrapping
• flex-nowrap - Prevent wrapping
• justify-start - Justify: start
• justify-end - Justify: end
• justify-center - Justify: center
• justify-between - Justify: space between
• items-start - Align items: start
• items-center - Align items: center
• items-end - Align items: end

Grid

• grid-cols-{1-12} - Number of columns
• gap-{size} - Gap between grid items
• col-span-{1-12} - Column span
• row-span-{1-6} - Row span

↑ Back to top

Spacing

Margin

• m-{size} - All sides
• mt-{size} - Top
• mr-{size} - Right
• mb-{size} - Bottom
• ml-{size} - Left
• mx-{size} - Horizontal
• my-{size} - Vertical

Padding

• p-{size} - All sides
• pt-{size} - Top
• pr-{size} - Right
• pb-{size} - Bottom
• pl-{size} - Left
• px-{size} - Horizontal
• py-{size} - Vertical

Size values: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96

↑ Back to top

Typography

Font Size

• text-xs - 0.75rem
• text-sm - 0.875rem
• text-base - 1rem
• text-lg - 1.125rem
• text-xl - 1.25rem
• text-2xl - 1.5rem
• text-3xl - 1.875rem
• text-4xl - 2.25rem
• text-5xl - 3rem

Font Weight

• font-thin - 100
• font-extralight - 200
• font-light - 300
• font-normal - 400
• font-medium - 500
• font-semibold - 600
• font-bold - 700
• font-extrabold - 800
• font-black - 900

Text Alignment

• text-left - Left align
• text-center - Center align
• text-right - Right align
• text-justify - Justify text

Text Color

• text-{color}-{shade} - Text color
• Example: text-blue-500, text-red-700

↑ Back to top

Backgrounds

Background Color

• bg-{color}-{shade} - Background color
• Example: bg-gray-100, bg-blue-500

Background Size

• bg-auto - Auto size
• bg-cover - Cover
• bg-contain - Contain

Background Position

• bg-center - Center
• bg-top - Top
• bg-bottom - Bottom
• bg-left - Left
• bg-right - Right

↑ Back to top

Borders

Border Width

• border - 1px
• border-0 - 0px
• border-2 - 2px
• border-4 - 4px
• border-8 - 8px

Border Color

• border-{color}-{shade} - Border color
• Example: border-gray-200, border-blue-500

Border Radius

• rounded - 0.25rem
• rounded-sm - 0.125rem
• rounded-md - 0.375rem
• rounded-lg - 0.5rem
• rounded-xl - 0.75rem
• rounded-2xl - 1rem
• rounded-full - 9999px

↑ Back to top

Effects

Opacity

• opacity-0 - 0
• opacity-25 - 0.25
• opacity-50 - 0.5
• opacity-75 - 0.75
• opacity-100 - 1

Box Shadow

• shadow-sm - Small
• shadow - Default
• shadow-md - Medium
• shadow-lg - Large
• shadow-xl - Extra large
• shadow-2xl - 2x extra large
• shadow-none - None

↑ Back to top

Interactivity

Cursor

• cursor-pointer - Pointer
• cursor-default - Default
• cursor-not-allowed - Not allowed

User Select

• select-none - Prevent selection
• select-text - Allow selection
• select-all - Select all

Hover/Focus States

• Add hover: or focus: prefix to any utility
• Example: hover:bg-blue-700, focus:outline-none

↑ Back to top

Responsive Design

Breakpoints

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

Example: md:flex-col will apply flex-col at medium screens and above

↑ Back to top

Color System

Available colors with their shade variants (50-900):

• gray
• red
• yellow
• green
• blue
• indigo
• purple
• pink

Shade values:

• 50 (lightest)
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900 (darkest)

↑ Back to top

Tips & Best Practices

1. Combining Utilities

   <div class="flex items-center justify-between p-4 bg-blue-500 text-white">

2. Responsive Design

   <div class="w-full md:w-1/2 lg:w-1/3">

3. State Variants

   <button class="bg-blue-500 hover:bg-blue-700 focus:outline-none">

4. Custom Values

   <div class="top-[117px]">

5. Organization

   • Group related utilities together
   • Put responsive utilities last
   • Keep hover/focus states near their base utilities

↑ Back to top

🧩 Common UI Patterns

TODO: Add frequently used UI patterns with code examples

Basic Patterns

• Responsive Navigation Bar
• Card Layouts
• Form Elements
• Hero Sections
• Footers

Advanced Patterns

• Dropdown Menus
• Modal Windows
• Sidebar Layouts
• Data Tables
• Authentication Forms

📚 Project Structure

tailwind-cheatsheet/
├── README.md
├── LICENSE
├── CONTRIBUTING.md
├── examples/
│   ├── components/
│   │   ├── buttons.md
│   │   ├── cards.md
│   │   ├── forms.md
│   │   └── navigation.md
│   └── layouts/
│       ├── grid-systems.md
│       ├── hero-sections.md
│       └── responsive-patterns.md
└── docs/
    ├── installation.md
    ├── configuration.md
    └── customization.md

🤝 Contributing

I welcome contributions! Please see the Contributing Guide for details.

Contribution Areas

• Adding new utility class examples
• Improving documentation
• Adding real-world use cases
• Fixing errors or typos
• Suggesting improvements

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

↑ Back to top