Desktop App Tailwind 4

[ItsEeleeya]

This was mostly handled with Tailwind's auto upgrade utility.
It fixes one issue where the cursor-default wasn't respected.
Now using antialiased font smoothing for better visual clarity.

Updated related packages:

• Tailwind
• PostCSS
• tailwind-scrollbar
• @tailwindcss/typography

Removed tailwind-animate in favor of tw-animate-css due to lacking v4 support.

Greptile Summary

This PR migrates the desktop app from Tailwind CSS v3 to v4, replacing tailwind.config.js with CSS-native @theme tokens, switching from @kobalte/tailwindcss ui-* variants to standard data-* variants, and swapping tailwindcss-animate for tw-animate-css. The auto-upgrade tool handled most of the mechanical conversion.

• P1 – broken shimmer animation: The shimmer keyframe was only defined in the deleted apps/desktop/tailwind.config.js. animate-shimmer is still used in ExportPage.tsx (lines 747, 762) with no replacement @keyframes block in main.css or theme.css.
• P1 – data-pressed: invalid in Tailwind v3 (web app): CameraPreviewWindow.tsx was updated to use data-pressed:bg-gray-3 / data-pressed:text-gray-12, but apps/web still runs Tailwind v3, which requires bracket syntax (data-[pressed]:). All five toolbar buttons will silently lose their pressed-state highlight.
• P2 – focus ring removed from Toggle: outline-2 outline-offset-2 outline-blue-300 were dropped from the base toggle control styles without a focus-visible: replacement.

Confidence Score: 3/5

Not safe to merge as-is — two P1 regressions affect visible user-facing behavior.

Two P1 bugs are present: the shimmer loading animation is broken in the export page, and pressed-state toolbar button styles are silently dropped in the web app due to a Tailwind v3/v4 version mismatch. The rest of the migration looks mechanically correct.

apps/desktop/src/routes/editor/ExportPage.tsx (missing shimmer keyframe) and apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/CameraPreviewWindow.tsx (data-pressed: incompatible with Tailwind v3).

Important Files Changed

Filename	Overview
apps/desktop/src/routes/editor/ExportPage.tsx	Uses animate-shimmer on loading skeleton overlays, but the shimmer keyframe definition was removed with the deleted tailwind config — animation will be broken.
apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/CameraPreviewWindow.tsx	Changed ui-pressed: to data-pressed: on toolbar buttons, but the web app uses Tailwind v3 which requires bracket syntax (data-[pressed]:); pressed-state styles will be silently omitted.
apps/desktop/tailwind.config.js	Deleted as part of v4 migration; previously defined custom keyframes (gentleBounce, shimmer, float, floatSlow, pulse3d, spin3d, gradientShift, dash). The shimmer keyframe is still referenced in ExportPage.tsx with no replacement definition.
packages/ui-solid/src/main.css	Core Tailwind v4 migration: replaces @tailwind base/components/utilities with @import "tailwindcss", migrates all color/shadow tokens to CSS custom properties in @theme, replaces tailwindcss-animate with tw-animate-css, and adds @apply antialiased on :root.
apps/desktop/src/styles/theme.css	Imports @cap/ui-solid/main.css, registers @tailwindcss/typography and tailwind-scrollbar as @plugin, and adds a @layer base override to preserve Tailwind v3's default border color.
apps/desktop/src/components/Toggle.tsx	Updates ui-* variants to data-* and simplifies spacing to Tailwind tokens; removes the focus ring outline classes from the base toggle styles.
packages/ui/style/tailwind.config.js	Removes @kobalte/tailwindcss plugin from the shared web config; still uses Tailwind v3, so any remaining ui-* variant usage in web code should have been updated.
apps/desktop/src/routes/editor/ui.tsx	Systematic migration of ui-* Kobalte variants to data-* Tailwind v4 variants and arbitrary value classes to named tokens across all shared UI primitives.
apps/desktop/postcss.config.cjs	Replaces shared @cap/ui/postcss config with an inline @tailwindcss/postcss + autoprefixer config appropriate for Tailwind v4.
packages/ui-solid/package.json	Bumps to tailwindcss@^4.2.2, replaces tailwindcss-animate with tw-animate-css, upgrades tailwind-scrollbar to ^4.0.2, and removes @kobalte/tailwindcss and tailwindcss from peer deps.

Prompt To Fix All With AI

Fix the following 3 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 3
apps/desktop/src/routes/editor/ExportPage.tsx:747-762
**Missing `shimmer` keyframe definition**

`animate-shimmer` is still used here, but the `shimmer` keyframe was only defined in `apps/desktop/tailwind.config.js`, which was deleted as part of this migration. No replacement definition was added to `packages/ui-solid/src/main.css` or `apps/desktop/src/styles/theme.css`. The loading skeleton shimmer effect on the export preview will be a no-op — the element will have the animation class but no matching `@keyframes` block, so nothing will animate.

### Issue 2 of 3
apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/CameraPreviewWindow.tsx:495-556
**`data-pressed:` variant not supported in Tailwind v3**

The web app (`apps/web`) uses Tailwind v3 (declared as `"tailwindcss": "^3"` in its `package.json`). Tailwind v3 requires bracket syntax for arbitrary data-attribute variants: `data-[pressed]:bg-gray-3`, not `data-pressed:bg-gray-3`. The shorthand `data-pressed:` without brackets is a Tailwind v4-only feature. Since the old `ui-pressed:` variant (from `@kobalte/tailwindcss`, which was also removed from `packages/ui/style/tailwind.config.js`) has been replaced with the v4 syntax, these five toolbar buttons will never show their pressed/active state background highlight.

### Issue 3 of 3
apps/desktop/src/components/Toggle.tsx:4-7
**Focus ring styles removed from Toggle**

The `outline-2 outline-offset-2 outline-blue-300` classes were dropped from the base `toggleControlStyles`. These set the shape, width, and color of the focus indicator used by keyboard and assistive-technology users. Verify that an equivalent `focus-visible:outline-*` ring is applied via another mechanism; otherwise toggling elements will lose their focus state entirely.

_{Reviews (1): Last reviewed commit: "format" | Re-trigger Greptile}

Greptile also left 3 inline comments on this PR.

[richiemcilroy]

please review the pr @greptileai

[brin-security-scanner]

Brin PR Security Scan

This PR has findings that should be reviewed.

• Score: 49/100
• Verdict: suspicious

_{Analyzed by Brin}

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​kobalte/​core@​0.13.11

View full report