Styling

Tailwind CSS

Utility-first CSS framework:

<div class="flex items-center gap-4 p-4 bg-white rounded-lg">
  <h2 class="text-2xl font-bold">Title</h2>
</div>

Design System

Colors:

• Primary: Red (red-500, red-600)
• Secondary: Purple (purple-500)
• Success: Green (green-500)

Spacing:

• Base unit: 4px
• Use Tailwind scale: p-4, m-4, gap-4

Typography:

• Headings: text-xl, text-2xl
• Body: text-base, text-sm

Component Classes

• btn-base - Button base styles
• card-base - Card base styles
• form-input-base - Form input styles

Related Guides

• Components
• Composables