---

name: tailwind-patterns description: Tailwind CSS principles. Responsive design, dark mode, utility patterns.

Tailwind Patterns

Utility-first CSS principles.

---

1. Core Philosophy

Principle	Meaning
Utility-first	Use utilities, not custom CSS
Composition	Combine utilities for components
Responsive	Mobile-first breakpoints
Consistency	Design system via config

---

2. Responsive Design

Breakpoint System

Prefix	Min Width	Target
(none)	0px	Mobile
sm:	640px	Small tablet
md:	768px	Tablet
lg:	1024px	Laptop
xl:	1280px	Desktop
2xl:	1536px	Large desktop

Mobile-First Pattern

• Start with mobile styles
• Add breakpoints for larger screens
• Example: w-full md:w-1/2 lg:w-1/3

---

3. Dark Mode

Approaches

Method	Use
class	Manual toggle
media	System preference

Pattern

• Add dark: prefix for dark variants
• Example: bg-white dark:bg-gray-900

---

4. Common Patterns

Layout

Pattern	Classes
Center	flex items-center justify-center
Stack	flex flex-col gap-4
Row	flex flex-row gap-4
Grid	grid grid-cols-1 md:grid-cols-3 gap-4 (Not: Asimetrik/Bento tercih edin!)

Spacing

Pattern	Approach
Padding	p-{size} or px-, py-
Margin	m-{size} or mx-, my-
Gap	gap-{size}

---

5. Component Patterns

Button Principles

State	Apply
Base	Padding, rounded, font
Hover	Background change
Focus	Ring for accessibility
Disabled	Opacity, cursor

Card Principles

Element	Apply
Container	Background, rounded, shadow
Hover	Shadow increase, subtle scale
Padding	Consistent internal spacing

---

6. Tailwind v4 Changes (2025)

Key Differences

v3	v4
tailwind.config.js	CSS-based @theme
Plugin system	Native CSS features
postcss	Oxide engine (faster)

New Features

• CSS-first configuration
• Native nesting support
• Modern CSS variables
• Faster build times

---

7. Best Practices

Practice	Why
Consistent spacing scale	Visual rhythm
Extract components	Reusability
Use design tokens	Maintainability
Mobile-first	Better CSS cascade

---

8. Anti-Patterns

❌ Don't	✅ Do
Arbitrary values everywhere	Use design system
Inline styles	Use utilities
!important	Fix specificity
Duplicate class groups	Extract component

---

Remember: Tailwind is a design system in code. Respect the constraints.