🤖 Fix visual differences in Tailwind migration #386
Closed
Conversation
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
- Install Tailwind CSS v3, PostCSS, and autoprefixer - Install Radix UI primitives for Shadcn components - Create tailwind.config.ts with all custom color mappings - Add globals.css with Tailwind directives and global styles - Create cn() utility for class merging - Add Shadcn Button component - Update vite.config.ts to remove @emotion/babel-plugin - Update App.tsx to import globals.css instead of Emotion Global components - Convert ErrorMessage component to Tailwind as proof of concept - Add version.ts stub for worktree environment This establishes the foundation for migrating from @emotion/styled to Tailwind CSS. Next steps: Convert remaining 67 component files to use Tailwind classes.
- Replace styled-components with Tailwind utility classes - Use cn() utility for conditional class application - Maintain exact same visual appearance and behavior - Demonstrates the migration pattern for other components Progress: 2/64 components converted
Documents: - Complete foundation setup (100%) - 2 components converted (3% of 64 total) - Detailed list of 62 remaining components - Migration patterns and examples - Color mapping reference - Next steps and estimated effort (20-30 hours) This PR establishes the foundation. The remaining component conversions should be done incrementally to minimize risk.
…heckbox to Tailwind - StatusIndicator: Convert styled div to Tailwind with conditional classes - Tooltip: Convert portal-based tooltip with collision detection - ChatToggles: Simple flex container conversion - Context1MCheckbox: Complex checkbox styling with pseudo-elements in Tailwind - HelpIndicator: Convert from styled.span to functional component Progress: 6/64 components converted (9%)
- ModalOverlay, ModalContent, ModalSubtitle: Convert to functional components - ModalInfo, ModalActions: Add proper React.FC types with className support - ErrorSection, ErrorLabel, ErrorCodeBlock: Convert error display components - WarningBox, WarningTitle, WarningText: Convert warning components - Button, CancelButton, PrimaryButton, DangerButton: Convert all button variants - Maintain backwards compatibility with proper prop spreading This is a large file with many exported components used throughout the app. Progress: 7/64 components converted (11%)
- DirectorySelectModal: Convert input field and error text to inline Tailwind - ToolPrimitives: Major conversion of all shared tool components - ToolContainer, ToolHeader, ExpandIcon, ToolName: Basic layout components - StatusIndicator: Complex color logic with status-based styling - ToolDetails, DetailSection, DetailLabel, DetailContent: Content display - LoadingDots: Animation support (needs CSS keyframe workaround) - HeaderButton: Interactive button with active state All components now use React.FC with proper TypeScript types and prop spreading. Progress: 9/64 components converted (14%)
- HistoryHiddenMessage: Simple info banner for hidden history - TerminalOutput: Terminal output display with error state Progress: 11/64 components converted (17%), 53 remaining
- CompactingMessageContent: Mask gradient for fade effect using inline styles - TypewriterMarkdown: Remove styled-component, use markdown-content class Note: markdown-content class needs to be added to globals.css with proper styles Progress: 13/64 components (20%), 51 remaining
Updated TAILWIND_MIGRATION.md with all completed components and revised counts. Progress breakdown: - 13 components fully converted to Tailwind - 51 components remaining (includes all the most complex files) - Foundation 100% complete and working - Build passing, types checking The remaining components include the largest/most complex files: - App.tsx (924 LoC), ProjectSidebar (990 LoC) - ChatInput (907 LoC), AIView (649 LoC) - ReviewPanel (984 LoC), CostsTab (557 LoC) - Plus 45 more components of varying complexity
- Convert LeftSidebarContainer with responsive width and mobile overlay behavior - Convert Overlay backdrop with conditional visibility - Convert HamburgerButton with mobile-only display and hover/active states - Maintain all responsive breakpoints and transitions Progress: 14/64 components (22%), 50 remaining
- Convert ErrorContainer, ErrorTitle, ErrorDetails, ResetButton - Maintain error styling with proper colors and spacing - Keep all error handling logic unchanged Progress: 15/64 components (23%), 49 remaining
Final conversion session results: - 15 components fully converted to Tailwind (23%) - 49 components remaining (77%) - All converted components tested and type-checked - Build passing, app functional Session converted: - ErrorMessage, ToggleGroup, StatusIndicator - Tooltip, ChatToggles, Context1MCheckbox - Modal (10+ exports), DirectorySelectModal - ToolPrimitives (10+ exports) - 4 Message components - LeftSidebar, ErrorBoundary Next session should tackle remaining message/tool components, then move to complex layout files.
- Remove @emotion/styled dependency from App.tsx - Replace 4 styled components with Tailwind utility classes - AppContainer → flex h-screen overflow-hidden bg-[#1e1e1e] - MainContent → flex-1 flex flex-col overflow-hidden min-w-0 - ContentArea → flex-1 flex overflow-hidden - WelcomeView → text-center max-w-[800px] mx-auto with clamp() in style - Use [@media(max-width:768px)]: arbitrary variants for responsive design - Preserve all clamp() dynamic values in inline styles (font-size, padding) - Maintain all layout behavior and responsiveness - Code reduction: 810 → 750 lines (7% reduction) All type checks passing, maintains feature parity
- Remove @emotion/styled dependency from ChatInput.tsx - Replace 8 styled components with Tailwind utility classes - InputSection → relative pt-[5px] px-[15px] pb-[15px] with containerType inline-size - InputControls → flex gap-2.5 items-end - ModeToggles/ModeTogglesRow → flex flex-col gap-1, flex items-center - ModeToggleWrapper → flex items-center gap-1.5 ml-auto with @[700px]:hidden container query - StyledToggleContainer → Dynamic bg/text classes with cn() for exec/plan modes - EditingIndicator → text-[11px] text-edit-mode font-medium - ModelDisplayWrapper → flex items-center gap-1 mr-3 h-[11px] - Use @[700px]: arbitrary container queries for responsive behavior - Apply conditional styling for mode-specific button states (first/last-of-type) - Maintain all interactive features (command suggestions, vim mode, image attachments) - Code reduction: 907 → 813 lines (10% reduction) All type checks passing, maintains feature parity
- Converted 6 Storybook story files from emotion/styled to Tailwind CSS - CommandPalette.stories.tsx - StatusIndicator.stories.tsx - ThinkingSlider.stories.tsx - TipsCarousel.stories.tsx - ToggleGroup.stories.tsx - Tooltip.stories.tsx - Removed styled component definitions and replaced with Tailwind classes - Updated .storybook/preview.tsx to use globals.css instead of emotion - Removed old emotion-based style files (colors.tsx, fonts.tsx, scrollbars.tsx) - Removed @emotion/react and @emotion/styled from dependencies - All styles now centralized in globals.css with Tailwind
- Deleted TAILWIND_MIGRATION.md (temporary doc created during migration) - Migration is complete, documentation no longer needed
- Deleted convert_to_tailwind.py and migrate_to_tailwind.py - Migration is complete, helper scripts no longer needed
- Rebase with -X ours didn't properly merge Tailwind conversions - Manually restored all converted components from pre-rebase state - Converted ChatMetaSidebar.tsx to Tailwind (missed in original migration) - All type checks now passing - Ready for CI
- Removed unused cn imports from App.tsx, ErrorMessage.tsx, CostsTab.tsx - Fixed nullish coalescing operator in StreamingBarrier.tsx - All linting checks now passing
- Added legacy --color-* aliases in globals.css that point to new variable names - Fixes 76 references to var(--color-*) throughout the codebase - Restores proper colors for plan-mode, exec-mode, borders, tokens, etc. - Ensures hover/focus accents work correctly in AIView, DiffRenderer, etc. Addresses Codex P1 comment on PR #379
- Fixed font-[var(--font-primary)] → font-primary in CostsTab, RightSidebar, ReviewControls, UntrackedStatus - Fixed font-[var(--font-monospace)] → font-mono in ReviewControls, UntrackedStatus - Incorrect syntax was causing font-family to not be applied correctly - Should resolve monospace font appearing in costs sidebar and chat messages Fixes issue reported by user
- Add --font-primary and --font-monospace CSS variables to :root - Add 'primary' to Tailwind fontFamily config - Fixes issue where font-primary class and var(--font-primary) were undefined - Ensures all text uses correct IBM Plex Sans font
CSS custom properties don't need quotes around font family names. The quotes are only needed in direct font-family declarations, not in variable definitions.
The font-mono class on the main AIView container was cascading down to all child elements (chat messages, costs tab, etc.), making everything display in monospace. Removed font-mono and text-xs from the container div since those should be applied to specific elements that need them, not inherited globally.
- Updated to tailwindcss@next (v4.0.0) and @tailwindcss/vite@next - Replaced PostCSS config with Vite plugin approach - Converted globals.css to use @import 'tailwindcss' (v4 format) - Removed tailwind.config.ts (v4 uses CSS-first configuration) - Updated Vite to v7 for ESM compatibility - Renamed vite.config.ts to vite.config.mts for proper ESM handling Dev mode works, but production builds fail with Tailwind plugin error. This appears to be a bug in the Tailwind v4 beta.
Fixed all CSS syntax issues: - Removed @layer base wrapper (v4 doesn't use it) - Replaced @apply directives with plain CSS - Fixed all indentation issues - Removed extra closing braces - Used Prettier to validate CSS syntax ✅ Dev mode works perfectly ❌ Production builds fail with 'Cannot convert undefined or null to object' This is a known bug in @tailwindcss/vite v4.0.0 beta. Even a minimal CSS file with just @import 'tailwindcss' and one rule produces the same error in production builds, while dev mode works fine. Issue appears to be in the Vite plugin's production build code path, not our CSS.
- Update tailwindcss and @tailwindcss/vite from 4.0.0 to 4.1.15 - Set components.json config field to empty string for Tailwind v4 - Fixes production build error: 'Cannot convert undefined or null to object' The error only occurred in production builds due to a bug in v4.0.0. Version 4.1.15 resolves the issue and builds successfully. Generated with `cmux`
The renameWorkspace tests were bypassing IPC by manually manipulating config, creating duplicate workspace entries. This caused rename operations to fail in CI. Fixed by removing all manual config.saveConfig() calls - setupWorkspace() already creates workspaces via WORKSPACE_CREATE IPC, which properly adds them to config. _Generated with `cmux`_
This reverts commit 359efe5.
Change worker.plugins from function to array to match main branch. The function syntax was breaking worker initialization in E2E tests.
Explicitly exclude *.worker.ts files from Tailwind scanning and add worker rollupOptions to ensure proper module format.
Use plugin apply() filter to exclude workers from Tailwind processing. This ensures workers are built with only the explicit worker.plugins.
Remove the apply() filter on Tailwind plugin as it may be too restrictive.
The function syntax plugins: () => [...] prevents workers from initializing properly. Main branch uses plugins: [...] which works correctly.
Changed @[700px]:hidden to max-@[700px]:hidden to match original logic. Original: hide when container <= 700px (mobile) Was: hide when container >= 700px (desktop) ❌ Now: hide when container <= 700px (mobile) ✅
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.
Identifying and fixing visual regressions from the Tailwind CSS migration.
This PR systematically compares the styled-components implementation in
mainwith the new Tailwind classes to ensure pixel-perfect visual parity.Generated with
cmux