---
name: styling
description: Tailwind v4 theming and global styles
metadata:
  tags: styling, tailwind, globals
---

# Styling Guidelines

## Goals

- Mirror the source palette and typography
- Keep Tailwind utilities as the primary styling method
- Centralize shared styles in `globals.css`

## `globals.css` Structure

```css
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));

@theme {
  --color-background: #f5f3ed;
  --color-foreground: #111111;
  --font-sans: "Inter", system-ui, sans-serif;
}

@layer base {
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
}
```

## Utility Classes

- Add reusable helpers under `@layer base`
- Create structural helpers like `.container` or `.polaroid`
- Keep class names short and descriptive

## Animation Guidance

- Prefer Tailwind `@keyframes` in `globals.css`
- Inline styles only when values are non-standard