Tailwind CSS

Simple summary of the most commonly used Tailwind elements for easy reference.

Official documentation: tailwindcss.com/docs

Visual Styling (Text & Colors)

Syntax

text-{color}-{shade}: Changes font color
text-{size}: Size (xs, sm, base, lg, xl, 2xl…)
text-{align}: Direction (left, center, right, justify)
bg-{color}-{shade}: Background color
hover:: Effect on mouse hover

Example

<button class="bg-blue-600 text-white font-bold py-2 px-6 rounded
               hover:bg-blue-400 hover:text-black transition-all">
  Hover me
</button>

Color Reference

Common Colors
Shades

gray, slate, zinc, neutral, stone
red, orange, amber, yellow, lime
green, emerald, teal, cyan, sky
blue, indigo, violet, purple, fuchsia
pink, rose

Each color comes in shades from 50 (lightest) to 950 (darkest):50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

<div class="bg-blue-500">Default blue</div>
<div class="bg-blue-900">Dark blue</div>
<div class="bg-blue-100">Light blue</div>

Spacing & Dimensions

Spacing
Dimensions

Margin

m-{size}: Margin all sides
mt-, mr-, mb-, ml-: Top, Right, Bottom, Left
mx-{size}: Horizontal (left + right)
my-{size}: Vertical (top + bottom)

<div class="m-4">Margin 1rem all sides</div>
<div class="mx-auto">Centered horizontally</div>

Padding

p-{size}: Padding all sides
pt-, pr-, pb-, pl-: Top, Right, Bottom, Left
px-{size}: Horizontal (left + right)
py-{size}: Vertical (top + bottom)

<div class="p-4">Padding 1rem all sides</div>
<button class="px-6 py-2">Button with padding</button>

Width

w-full: 100% width
w-1/2, w-1/3, w-2/3: Fractional widths
w-screen: 100vw (full viewport width)
w-[100px]: Arbitrary value

Height

h-full: 100% height
h-screen: 100vh (full viewport height)
h-{size}: Fixed heights (h-10, h-20, etc.)
h-[200px]: Arbitrary value

<div class="w-full h-screen">Full width and height</div>
<div class="w-1/2 h-[300px]">Half width, 300px height</div>

Spacing Scale

Class	Value	Pixels
`0`	0	0px
`1`	0.25rem	4px
`2`	0.5rem	8px
`4`	1rem	16px
`6`	1.5rem	24px
`8`	2rem	32px
`12`	3rem	48px
`16`	4rem	64px

Borders & Rounding

<div class="border border-gray-300">Default border</div>
<div class="border-2 border-blue-500">Thick blue border</div>
<div class="border-t border-b">Top and bottom only</div>

Layout (Flex & Grid)

Flexbox
Grid

Basic Flex

<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Alignment

justify-start, justify-center, justify-end, justify-between
items-start, items-center, items-end
flex-col: Stack vertically
flex-row: Stack horizontally (default)

<div class="flex justify-between items-center">
  <div>Left</div>
  <div>Right</div>
</div>

Basic Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="col-span-3">Spans all columns</div>
</div>

Grid Columns

grid-cols-1 through grid-cols-12: Number of columns
col-span-{n}: Span across N columns
gap-{size}: Space between grid items

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

Use gap-{size} instead of margins between flex/grid items for cleaner code.

Responsive Design (Breakpoints)

Tailwind uses a mobile-first approach. Base classes apply to all screen sizes, then override with breakpoint prefixes.

Prefix	Min Width	Device
(Base)	0px	Mobile (Default)
`sm:`	640px	Mobile Landscape
`md:`	768px	Tablets / iPads
`lg:`	1024px	Laptops
`xl:`	1280px	Desktops
`2xl:`	1536px	Large Screens

Responsive Example

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- 1 column on mobile, 2 on tablet, 4 on desktop -->
</div>

<h1 class="text-2xl md:text-4xl lg:text-6xl">
  <!-- Larger text on bigger screens -->
</h1>

<div class="hidden md:block">
  <!-- Hidden on mobile, visible on tablet+ -->
</div>

Breakpoints stack: md:text-xl applies to medium screens and larger (unless overridden by lg:, xl:, etc.).

Common Patterns

Centered Container

<div class="max-w-7xl mx-auto px-4">
  <!-- Content -->
</div>

Card Component

<div class="bg-white rounded-lg shadow-lg p-6 border border-gray-200">
  <h2 class="text-xl font-bold mb-4">Card Title</h2>
  <p class="text-gray-600">Card content goes here...</p>
</div>

Button Variants

<!-- Primary -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Primary
</button>

<!-- Secondary -->
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded">
  Secondary
</button>

<!-- Outline -->
<button class="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-bold py-2 px-4 rounded">
  Outline
</button>

Form Input

<input 
  type="text" 
  placeholder="Enter your name..."
  class="w-full px-4 py-2 border border-gray-300 rounded-lg 
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>

Utility Classes Reference

Typography
Display & Visibility
Shadows & Effects

Class	Description
`font-bold`	Font weight bold
`italic`	Italic text
`uppercase`	UPPERCASE TEXT
`lowercase`	lowercase text
`capitalize`	Capitalize First Letter
`underline`	Underlined text
`line-through`	~~Strikethrough~~

Class	Description
`block`	Display block
`inline-block`	Display inline-block
`hidden`	Display none
`invisible`	Visibility hidden (takes space)
`opacity-0` through `opacity-100`	Opacity

Class	Description
`shadow-sm`	Small shadow
`shadow`	Default shadow
`shadow-lg`	Large shadow
`shadow-xl`	Extra large shadow
`hover:shadow-2xl`	Shadow on hover
`transition-all`	Smooth transitions
`duration-300`	Transition duration

Arbitrary Values

When you need a specific value not in the default scale, use square brackets:

<div class="w-[137px] h-[23px] bg-[#1da1f2] text-[15px]">
  Custom values
</div>

Use arbitrary values sparingly. Stick to the default scale when possible for consistency.

Fundamentals

Frameworks & Libraries

Styling

Visual Styling (Text & Colors)

Syntax

Example

Color Reference

Spacing & Dimensions

Width

Height

Spacing Scale

Borders & Rounding

Layout (Flex & Grid)

Basic Flex

Alignment

Basic Grid

Grid Columns

Responsive Design (Breakpoints)

Responsive Example

Common Patterns

Utility Classes Reference

Arbitrary Values

Build docs developers (and LLMs) love

Fundamentals

Frameworks & Libraries

Styling

​Visual Styling (Text & Colors)

Syntax

Example

​Color Reference

​Spacing & Dimensions

​Width

​Height

​Spacing Scale

​Borders & Rounding

​Layout (Flex & Grid)

​Basic Flex

​Alignment

​Basic Grid

​Grid Columns

​Responsive Design (Breakpoints)

​Responsive Example

​Common Patterns

​Utility Classes Reference

​Arbitrary Values

Build docs developers (and LLMs) love

Visual Styling (Text & Colors)

Color Reference

Spacing & Dimensions

Width

Height

Spacing Scale

Borders & Rounding

Layout (Flex & Grid)

Basic Flex

Alignment

Basic Grid

Grid Columns

Responsive Design (Breakpoints)

Responsive Example

Common Patterns

Utility Classes Reference

Arbitrary Values