Tailwind CSS – Complete Layout & Responsive Cheat Sheet

1️⃣ Basic Page Layout Utilities

Use these classes to design basic structure and alignment.

• Container: container mx-auto px-4
• Flexbox: flex, flex-col, flex-row, justify-*, items-*
• Grid: grid grid-cols-2/3/4 gap-4
• Spacing: p-*, m-*, px-*, py-*
• Borders: border, rounded-lg, border-gray-300
• Shadow: shadow, shadow-lg, shadow-xl

📌 Example Layout Box:

2️⃣ Flex Layout Classes

• flex → enables Flexbox
• flex-row, flex-col
• justify-center, justify-between, justify-evenly
• items-center, items-start, items-end
• gap-2, gap-4, gap-8

Responsive Flex Example:

3️⃣ Grid Layout Classes

• grid grid-cols-2
• grid-cols-3, grid-cols-4
• gap-4, gap-6
• md:grid-cols-3, lg:grid-cols-4

Responsive Grid Example:

4️⃣ Height & Width Classes (All Screens)

📌 Width Classes:

• w-10 (40px)
• w-1/2
• w-1/3
• w-full
• w-screen

📌 Height Classes:

• h-10 (40px)
• h-20, h-40, h-60
• h-full
• h-screen → full screen height

📌 Responsive Example (Height Changes):

5️⃣ Responsive Breakpoints

• sm → ≥ 640px
• md → ≥ 768px
• lg → ≥ 1024px
• xl → ≥ 1280px
• 2xl → ≥ 1536px

📌 Responsive Text Example:

I grow with screen size!

6️⃣ Buttons + Layout Example