Tailwind CSS Cheat Sheet

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup. Here’s a cheat sheet to get you started with Tailwind CSS:

Layout

  • Margin and Padding:
    • m-{size}: Margin
    • p-{size}: Padding
    • m-auto: Margin auto
  • Width and Height:
    • w-{size}: Width
    • h-{size}: Height
    • max-w-{size}: Maximum width
    • max-h-{size}: Maximum height
  • Flexbox:
    • flex: Enable flex container
    • flex-{value}: Flex property
    • justify-{value}: Justify content
    • items-{value}: Align items
  • Grid:
    • grid: Enable grid container
    • col-{value}: Column span

Typography

  • Text Color and Size:
    • text-{color}: Text color
    • text-{size}: Text size
  • Font Weight:
    • font-{weight}: Font weight
  • Line Height:
    • leading-{size}: Line height

Backgrounds

  • Background Color:
    • bg-{color}: Background color
  • Background Image:
    • bg-{image}: Background image

Borders

  • Border:
    • border: Add border
    • border-{side}: Border on specific side
    • rounded: Apply border-radius
  • Border Color and Width:
    • border-{color}: Border color
    • border-{width}: Border width

Shadows

  • Box Shadow:
    • shadow: Apply box shadow

Interactivity

  • Hover and Focus:
    • hover:{property}: Apply on hover
    • focus:{property}: Apply on focus
  • Cursor:
    • cursor-{type}: Change cursor type

Utilities

  • Visibility:
    • invisible: Hide element
    • visible: Show element
  • Overflow:
    • overflow-{type}: Set overflow behavior
  • Positioning:
    • static, relative, absolute, fixed: Position values
  • Z-Index:
    • z-{index}: Set z-index

Responsive Design

  • Responsive Prefixes:
    • sm:, md:, lg:, xl:: Apply styles based on screen size

Flexbox and Grid

  • Flex Container:
    • flex, inline-flex: Set display property
  • Grid Columns:
    • grid-cols-{value}: Set number of grid columns

Tailwind provides a large set of classes, and you can customize it further by configuring your tailwind.config.js file. For detailed information, refer to the official Tailwind CSS documentation.