Tailwind Utility Styling

Tailwind CSS Utility Styling

Core Utility Classes

Layout

```tsx // Flexbox

// Grid

// Positioning

Spacing

```tsx // Padding: p-{size}

// Margin: m-{size}

Typography

```tsx

Mobile-First Responsive (MANDATORY)

Start with mobile (unprefixed), add breakpoints:

```tsx

Breakpoints: `sm:` (640px), `md:` (768px), `lg:` (1024px), `xl:` (1280px)

Dark Mode

Use `dark:` prefix:

```tsx

CSS Variables (REQUIRED)

Use semantic variables, never hardcoded colors:

```tsx // ✅ GOOD

// ❌ BAD ```

Available variables:

• `background`, `foreground`
• `card`, `card-foreground`
• `primary`, `primary-foreground`
• `secondary`, `muted`, `accent`
• `destructive`, `border`, `input`, `ring`

cva for Variants

```tsx import { cva } from 'class-variance-authority';

const buttonVariants = cva( "base classes here", { variants: { variant: { default: "bg-primary text-primary-foreground", destructive: "bg-destructive", }, size: { default: "h-10 px-4", sm: "h-9 px-3", }, }, defaultVariants: { variant: "default", size: "default", }, } ); ```

Token Estimate: ~2,500 tokens