Tailwind CSS Complete Guide 🎨

Utility Classes + UI Examples

1. Introduction

Tailwind CSS is a utility-first CSS framework used to build modern UI quickly. 

<h1 class="text-3xl text-blue-500">Hello</h1>

2. Colors

<div class="bg-blue-500 text-white p-4">
  Box
</div>
Live Example

3. Spacing

<div class="m-4 p-4 bg-green-500">Box</div>
Spacing Example

4. Flexbox

<div class="flex justify-center items-center">
  <div>Center</div>
</div>
Centered Content

5. Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
</div>
1
2
3

6. Buttons

<button class="bg-blue-500 px-4 py-2 rounded">
Click
</button>

7. Cards

<div class="bg-white text-black p-4 rounded">
Card
</div>
Tailwind Card Example

8. Responsive

<div class="text-sm md:text-xl">
Responsive Text
</div>
Resize screen to see change

9. Hover Effects

<div class="hover:scale-110 transition">
Hover Me
</div>
Hover Me

10. Dark Mode

<div class="dark:bg-black">Dark Mode</div>