refactor(ui): Tailwind v4 conventions + fix command palette escape#9
Merged
Conversation
- swap arbitrary classes for v4 idioms: text-[var(--x)] -> text-(--x), [&_[cmdk-group-heading]] -> **:[[cmdk-group-heading]], outline-none -> outline-hidden - drop custom px font sizes, snap to native scale (text-xs / text-sm); pl-[14px] -> pl-3.5, h-[2px] -> h-0.5 - fix command palette not closing on Escape: react-hotkeys-hook ignores form-tag-originating keys by default and Command.Input is autofocused, so add enableOnFormTags: true - add tailwindcss skill docs Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
devbox | c9978ec | Commit Preview URL Branch Preview URL |
Jun 02 2026, 09:38 AM |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR adds a full Tailwind CSS v4 skill guide with resource pages and updates UI components to modern Tailwind v4 syntax (semantic text sizing, outline-hidden, and unbracketed arbitrary value classes). ChangesTailwind CSS v4 Skill Documentation
UI Component Tailwind Modernization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.claude/skills/tailwindcss/resources/configuration.md:
- Line 11: The file uses Tailwind v3 terminology: change the heading "Opacity
modifiers" to refer to v4's slash-based color opacity (e.g., "Color opacity
(slash notation)"), replace "Template paths for purging" with "Content paths for
scanning" or "Content paths (built‑in scanning)" and remove any mention of
"PurgeCSS configuration" replacing it with "Built‑in content scanning / content
configuration"; update any explanatory sentences that describe purging to
instead describe Tailwind v4's content scanning behavior so the doc matches v4
terminology and behavior.
In @.claude/skills/tailwindcss/SKILL.md:
- Line 119: Replace the deprecated focus:outline-none usages with the Tailwind
v4 replacement focus:outline-hidden in the className strings; locate the literal
"focus:outline-none" occurrences (e.g., the button element with className
containing "px-4 py-2 ... focus:outline-none focus:ring-2 ...") and update them
to "focus:outline-hidden" at the three spots mentioned (lines around the button
at 119 and the other occurrences referenced at 151 and 224) while preserving the
surrounding focus:ring and disabled classes.
- Line 358: Remove the outdated v3 "purge" guidance by editing the sentence
"Ensure purge is configured correctly" in .claude/skills/tailwindcss/SKILL.md
(the line that currently reads “Ensure purge is configured correctly”) and
replace it with v4-appropriate guidance or delete it; ensure the Tailwind v4
section explicitly mentions that automatic content detection replaces the old
purge/content configuration so the doc no longer references "purge" as a
required step.
- Line 29: The sidebar example uses the deprecated Tailwind v4 utility
"flex-shrink-0"; update the className to the new utility "shrink-0" in the
element that currently reads className="flex-shrink-0" (the Sidebar div) so the
example matches Tailwind v4 naming.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f863f553-ab9a-4ce7-8a71-5c834e3ca04d
📒 Files selected for processing (10)
.claude/skills/tailwindcss/SKILL.md.claude/skills/tailwindcss/resources/component-library.md.claude/skills/tailwindcss/resources/configuration.md.claude/skills/tailwindcss/resources/utility-patterns.mdsrc/app/shell/app-shell.tsxsrc/app/shell/command-palette.tsxsrc/app/shell/shortcuts-cheatsheet.tsxsrc/modules/base64/ui/base64-tool.tsxsrc/routes/index.tsxsrc/routes/tool.$toolId.tsx
Address CodeRabbit review on PR #9: - flex-shrink-0 -> shrink-0 (v4 rename) - focus:outline-none -> focus:outline-hidden (v4 a11y focus reset) - replace purge / PurgeCSS / "Template paths for purging" with v4 automatic content detection + @source guidance - "Opacity modifiers" -> color opacity slash syntax Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Browser-verified UI cleanup + bug fix.
Tailwind v4 conventions
text-[var(--x)]→text-(--x)(v4 CSS-var shorthand)[&_[cmdk-group-heading]]:…→**:[[cmdk-group-heading]]:…(all-descendants variant)outline-none→outline-hidden(v4 a11y-preserving focus reset)Drop custom pixels → native scale
text-[length:10px]/text-[10px]/text-[11px]/text-[13px]→text-xs/text-smpl-[14px]→pl-3.5,h-[2px]→h-0.5pt-[15vh],data-[…]variants,shadow-2xlFix: command palette won't close on Escape
react-hotkeys-hookignores keys originating from form tags by default.Command.Inputis autofocused, so Escape was suppressed andonClosenever fired. AddedenableOnFormTags: true.Verification
vp lint0/0,tsc -bclean:15036: group-heading styling renders; Escape now closes the palette (was stuck open before)🤖 Generated with Claude Code
Summary by CodeRabbit
Documentation
Style
Enhancement