673760f9da
- Set up Vite 7 + React 19 + TypeScript 5 + Tailwind CSS 4 - Configure path aliases (@/ -> src/) - Create Layout with Header and Footer components - Create HomePage with hero section and feature highlights - Set up cursor rules for agent-driven development - Create PLAN.md and LESSONS.md for progress tracking Co-authored-by: Cursor <cursoragent@cursor.com>
32 lines
822 B
Plaintext
32 lines
822 B
Plaintext
---
|
|
description: Tailwind CSS styling conventions
|
|
globs: "**/*.tsx"
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Tailwind CSS Styling
|
|
|
|
## Approach
|
|
- Utility-first: use Tailwind classes directly in JSX
|
|
- Use `clsx` for conditional classes
|
|
- Extract repeated patterns into components, not CSS classes
|
|
- Dark mode via `dark:` variant (class strategy)
|
|
|
|
## Layout
|
|
- Mobile-first: default styles for mobile, `sm:` / `md:` / `lg:` for larger
|
|
- Use `container mx-auto px-4` for page-level wrappers
|
|
- Flexbox and Grid via Tailwind utilities
|
|
|
|
## Colors
|
|
- Use semantic color names from theme (primary, secondary, accent)
|
|
- Never hardcode hex colors in className
|
|
|
|
## Example
|
|
```tsx
|
|
<article className={clsx(
|
|
"rounded-2xl border p-6 transition-shadow hover:shadow-lg",
|
|
"bg-white dark:bg-gray-800",
|
|
isBookmarked && "ring-2 ring-primary-500"
|
|
)}>
|
|
```
|