BMAD-METHOD/.claude/rules/web-app-optimization-cursor.../tailwind-css-and-shadcn-ui-...

18 lines
746 B
Plaintext

---
description: Defines UI and styling conventions using Tailwind CSS and Shadcn components, emphasizing utility-first styling and reusable UI elements.
globs: **/*.svelte
---
- Use Tailwind CSS for utility-first styling approach.
- Leverage Shadcn components for pre-built, customizable UI elements.
- Import Shadcn components from `$lib/components/ui`.
- Organize Tailwind classes using the `cn()` utility from `$lib/utils`.
- Use Svelte's built-in transition and animation features.
- Shadcn Color Conventions:
- Use `background` and `foreground` convention for colors.
- Define CSS variables without color space function:
css
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
- Usage example:
svelte