Desktop App Tailwind 4 by ItsEeleeya · Pull Request #1771 · CapSoftware/Cap

ItsEeleeya · 2026-04-29T07:46:40Z

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.

Also fix accidental renames inside strings Update tailwind-scrollbar Update Kobalte Use Tailwind 3's default border color selection Remove Kobalte's tailwind plugin as it's no longer needed with Tailwind 4

richiemcilroy · 2026-05-04T23:21:00Z

please review the pr @greptileai

greptile-apps · 2026-05-04T23:25:44Z

@@ -759,7 +759,7 @@ export function ExportPage() {
 									/>
 									<Show when={previewLoading()}>
 										<div class="absolute inset-0 z-50 overflow-hidden pointer-events-none">
-											<div class="absolute inset-y-0 w-full animate-shimmer bg-gradient-to-r from-transparent from-30% via-white/60 via-50% to-transparent to-70%" />
+											<div class="absolute inset-y-0 w-full animate-shimmer bg-linear-to-r from-transparent from-30% via-white/60 via-50% to-transparent to-70%" />


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.

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/desktop/src/routes/editor/ExportPage.tsx Line: 747-762 Comment: **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. How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2026-05-04T23:25:45Z

@@ -503,7 +503,7 @@ export const CameraPreviewWindow = ({
 									setSize((s) => (s === "sm" ? "lg" : "sm"));
 								}}
 								className={clsx(
-									"p-2 rounded-lg ui-pressed:bg-gray-3 ui-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
+									"p-2 rounded-lg data-pressed:bg-gray-3 data-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
 									size === "lg" && "bg-gray-3 text-gray-12",
 								)}
 							>
@@ -522,7 +522,7 @@ export const CameraPreviewWindow = ({
 									);
 								}}
 								className={clsx(
-									"p-2 rounded-lg ui-pressed:bg-gray-3 ui-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
+									"p-2 rounded-lg data-pressed:bg-gray-3 data-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
 									shape !== "round" && "bg-gray-3 text-gray-12",
 								)}
 							>
@@ -539,7 +539,7 @@ export const CameraPreviewWindow = ({
 									setMirrored((m) => !m);
 								}}
 								className={clsx(
-									"p-2 rounded-lg ui-pressed:bg-gray-3 ui-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
+									"p-2 rounded-lg data-pressed:bg-gray-3 data-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
 									mirrored && "bg-gray-3 text-gray-12",
 								)}
 							>
@@ -553,7 +553,7 @@ export const CameraPreviewWindow = ({
 										handleTogglePictureInPicture();
 									}}
 									className={clsx(
-										"p-2 rounded-lg ui-pressed:bg-gray-3 ui-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
+										"p-2 rounded-lg data-pressed:bg-gray-3 data-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",


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.

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/CameraPreviewWindow.tsx Line: 495-556 Comment: **`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. How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2026-05-04T23:25:46Z


 const toggleControlStyles = cva(
-	"rounded-full bg-gray-6 ui-disabled:bg-gray-3 ui-checked:bg-blue-500 transition-colors outline-2 outline-offset-2 outline-blue-300",
+	"rounded-full bg-gray-6 data-disabled:bg-gray-3 data-checked:bg-blue-500 transition-colors",
 	{


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.

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/desktop/src/components/Toggle.tsx Line: 4-7 Comment: **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. How can I resolve this? If you propose a fix, please make it concise.

brin-security-scanner · 2026-05-05T00:08:16Z

⚠️ Contributor Trust Check — Review Recommended

This contributor's profile shows patterns that may warrant additional review. This is based on their GitHub activity, not the contents of this PR.

ItsEeleeya · Score: 68/100

Dimension breakdown

Dimension	Score	What it measures
Identity	30	Account age, contribution history, GPG keys, org memberships
Behavior	80	PR patterns, unsolicited contribution ratio, activity cadence
Content	100	PR body substance, issue linkage, contribution quality
Graph	30	Cross-repo trust, co-contributor relationships

_{Analyzed by Brin · Full profile}

ItsEeleeya added 5 commits April 28, 2026 11:44

Auto migrate with @tailwindcss/upgrade

21f023d

Upgrade desktop app to Tailwind 4 + Format

0e1cfbf

Use data- attributes instead of ui-

552bc43

Also fix accidental renames inside strings Update tailwind-scrollbar Update Kobalte Use Tailwind 3's default border color selection Remove Kobalte's tailwind plugin as it's no longer needed with Tailwind 4

Use antialiased font smoothing

f8838e2

Update ConfigSidebar.tsx

3ab5cda

ItsEeleeya mentioned this pull request Apr 29, 2026

Desktop app Tailwind 4 #1438

Closed

ItsEeleeya added 3 commits May 1, 2026 12:50

Merge branch 'main' into desktop-tailwind-v4

4b86478

Fix for remaining ui- classes to data-

da9ce12

format

542216f

greptile-apps Bot reviewed May 4, 2026

View reviewed changes

Merge branch 'main' into desktop-tailwind-v4

7e1f217

brin-security-scanner Bot added the contributor:flagged Contributor flagged for review by trust analysis. label May 5, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Desktop App Tailwind 4#1771

Desktop App Tailwind 4#1771
ItsEeleeya wants to merge 9 commits intoCapSoftware:mainfrom
ItsEeleeya:desktop-tailwind-v4

ItsEeleeya commented Apr 29, 2026 •

edited by greptile-apps Bot

Loading

Uh oh!

richiemcilroy commented May 4, 2026

Uh oh!

greptile-apps Bot May 4, 2026

Uh oh!

greptile-apps Bot May 4, 2026

Uh oh!

greptile-apps Bot May 4, 2026

Uh oh!

brin-security-scanner Bot commented May 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ItsEeleeya commented Apr 29, 2026 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Uh oh!

richiemcilroy commented May 4, 2026

Uh oh!

greptile-apps Bot May 4, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot May 4, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot May 4, 2026

Choose a reason for hiding this comment

Uh oh!

brin-security-scanner Bot commented May 5, 2026

⚠️ Contributor Trust Check — Review Recommended

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ItsEeleeya commented Apr 29, 2026 •

edited by greptile-apps Bot

Loading