---
paths:
  - "**/*.css"
  - "**/tailwind.config.*"
  - "**/postcss.config.*"
---
# Frontend CSS Gotchas

## Tailwind v4: cursor: pointer Missing on Interactive Elements

**Problem**: Tailwind v4's preflight does NOT set `cursor: pointer` on `<button>` elements. Browsers default to `cursor: default` for buttons, so every clickable thing on the page looks non-interactive on desktop.

**Rule**: When starting any new project with Tailwind v4, add cursor: pointer base styles immediately - before writing any components.

### Pattern (put this in a shared CSS file imported by all apps)

```css
/* packages/ui/src/theme/base.css or equivalent */
@layer base {
  button,
  [role="button"],
  [type="button"],
  [type="reset"],
  [type="submit"],
  a[href],
  label[for],
  select,
  summary {
    cursor: pointer;
  }

  [disabled],
  [aria-disabled="true"] {
    cursor: not-allowed;
  }
}
```

### Where to put it

- **Monorepo with shared UI package**: Add to `packages/ui/src/theme/base.css`, import in each app's CSS entry point after `@import 'tailwindcss'`
- **Single app**: Add directly to `src/index.css` or `src/globals.css` after `@import 'tailwindcss'`
- **Next.js**: Add to `app/globals.css` or `styles/globals.css`

### Import order matters

```css
@import 'tailwindcss';
@import './base.css';   /* cursor: pointer and other base resets */
@import './tokens.css'; /* design tokens */
```

The base import must come after `tailwindcss` so `@layer base` is available, but before component styles.

### Why this happens

Tailwind v4 changed their preflight philosophy - they removed the `cursor: pointer` override that existed in v3. The browser's native stylesheet sets `cursor: default` on `<button>`, which takes precedence unless explicitly overridden. This affects:
- All `<button>` elements (form submits, icon buttons, toggles)
- Custom interactive divs without a `cursor-pointer` class
- Select dropdowns, file inputs, etc.