fix: migrate globals.css to Tailwind CSS v4 syntax

[alx-xo]

Summary

• Replace @tailwind base/components/utilities with @import "tailwindcss" (Tailwind v4)
• Move Google Fonts @import statements to top of file (CSS spec requires @import before other rules)
• Replace @apply border-border, @apply bg-background text-foreground with direct hsl(var(...)) CSS — Tailwind v4 doesn't generate utilities from CSS variable-based
  theme values, so @apply on custom color classes fails at build time
• Ran pnpm oxfmt which detected the v4 setup and applied v4's canonical class order, which differs slightly from v3's

Test plan

• pnpm oxfmt passes without errors
• Dashboard renders correctly in pnpm dev — spot-check borders, background, and text colors in light and dark mode

Notes

The class sorting changed because oxfmt uses Prettier with the prettier-plugin-tailwindcss plugin, which sorts classes according to Tailwind's recommended order. That order is derived from the Tailwind config — specifically the theme and plugin definitions.

When you switched from Tailwind v3 (@tailwind directives) to v4 (@import "tailwindcss"). The Tailwind Prettier plugin detected the v4 setup and applied v4's canonical class order, which differs slightly from v3's. The plugin re-sorted all 225 files to match the new order in one pass.

It's a one-time churn — now that the codebase is on v4's order, future runs of oxfmt won't re-sort anything unless new classes are added.

You can verify this with a script

# Save the full diff to a temp file
git diff HEAD~1 -- '*.tsx' '*.ts' '*.jsx' > /tmp/oxfmt.diff

# Extract class tokens from removed lines, sort them
grep '^-[^-]' /tmp/oxfmt.diff | grep -oE 'className="[^"]*"' | sed 's/className="//;s/"//' | tr ' ' '\n' | sort > /tmp/removed_tokens.txt

# Extract class tokens from added lines, sort them
grep '^+[^+]' /tmp/oxfmt.diff | grep -oE 'className="[^"]*"' | sed 's/className="//;s/"//' | tr ' ' '\n' | sort > /tmp/added_tokens.txt

# Compare — no output means only order changed, nothing added or removed
diff /tmp/removed_tokens.txt /tmp/added_tokens.txt

---

Note

Low Risk
Low risk styling-only change, but it can cause visual regressions (border/background/text colors) if the new CSS variable HSL mappings or Tailwind v4 import behavior differ from prior builds.

Overview
Migrates the dashboard globals.css to Tailwind CSS v4 by switching from @tailwind base/components/utilities to @import "tailwindcss" and reordering @import statements.

Replaces a few @apply usages for theme-driven colors with explicit hsl(var(--...)) CSS to avoid Tailwind v4 build-time failures, and updates .oxfmtrc.json to stop ignoring globals.css so it can be formatted/sorted. Adds a patch changeset for the dashboard package.

^{Reviewed by Cursor Bugbot for commit 5ee3d69. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
gram-docs-redirect	Ready	Preview, Comment	Apr 13, 2026 9:12pm

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

[changeset-bot]

🦋 Changeset detected

Latest commit: f76ac74

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
dashboard	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[speakeasybot]

🚀 Preview Environment (PR #2179)

Preview URL: https://pr-2179.dev.getgram.ai

Component	Status	Details	Updated (UTC)
✅ Database	Ready	Existing database reused	2026-04-13 21:17:55.
✅ Images	Available	Container images ready	2026-04-13 21:17:38.

_{Gram Preview Bot}

[adaam2]

I did a quick spot check, and everything looks as it was 👍🏻