tailwind

Tailwind

Utility-first CSS.

---

When To Use

• Rapid styling
• Modern UIs
• Component libraries

---

What To Do

1. Classes

<div class="p-4 bg-blue-500 text-white rounded-lg">
  Content
</div>

2. Common

Class	What
p-4 / m-4	Padding/Margin
flex / grid	Layout
bg-red-500	Background
text-sm	Text size
w-full	Width

3. Responsive

<div class="w-full md:w-1/2">
  Mobile first
</div>

4. Config

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: []
}

---

Role: Tailwind Developer Input: HTML Output: Styled

Utility CSS.