refactor(spx-gui): migrate XBuilder frontend styling to Tailwind CSS#3002
Merged
nighca merged 29 commits intogoplus:devfrom Apr 10, 2026
Merged
refactor(spx-gui): migrate XBuilder frontend styling to Tailwind CSS#3002nighca merged 29 commits intogoplus:devfrom
nighca merged 29 commits intogoplus:devfrom
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces Tailwind CSS to the spx-gui project, implementing a hybrid styling architecture that bridges existing design tokens to Tailwind utility classes. The changes include the removal of several SCSS helper files and the migration of numerous components from scoped SCSS to utility classes. Feedback identifies a conflict between custom line-height variables and Tailwind's default syntax, and recommends promoting hardcoded colors to design tokens. Further suggestions include moving base styles to global.css for architectural consistency and replacing fragile CSS filters or arbitrary descendant selectors with more maintainable styling contracts.
spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates spx-gui frontend styling from component-scoped SCSS utilities/mixins to Tailwind CSS (v4), wiring Tailwind into the Vite build and refactoring many Vue components to use Tailwind utility classes while bridging existing --ui-* design tokens into Tailwind theme tokens.
Changes:
- Add Tailwind v4 integration (Vite plugin + deps) and introduce
src/app.cssas the global Tailwind/token bridge entrypoint. - Replace many component-scoped SCSS blocks with Tailwind utility classes; remove legacy SCSS mixins/utilities (
utils.scss,responsive.scss,global.scss,link.scss). - Rename several internal UI “size-*” classes to
ui-*-size-*to avoid conflicts with Tailwind utility namespaces; adjust Vercel output plugin hook timing.
Reviewed changes
Copilot reviewed 278 out of 279 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| spx-gui/vite.config.ts | Adds @tailwindcss/vite plugin to enable Tailwind processing in Vite. |
| spx-gui/vercel-output-plugin.ts | Switches build hook to writeBundle for output artifact generation. |
| spx-gui/src/utils/utils.scss | Removes legacy SCSS mixin(s) previously used for text ellipsis. |
| spx-gui/src/pages/tutorials/index.vue | Converts page layout styles from scoped SCSS to Tailwind classes. |
| spx-gui/src/pages/tutorials/course-start.vue | Converts centered loading/error layout to Tailwind classes. |
| spx-gui/src/pages/sign-in/token.vue | Replaces form/page SCSS with Tailwind utility layout. |
| spx-gui/src/pages/sign-in/callback.vue | Converts callback page centering styles to Tailwind. |
| spx-gui/src/pages/editor/index.vue | Migrates editor home layout/background styles to Tailwind utilities. |
| spx-gui/src/pages/community/user/projects.vue | Converts list/grid/pagination wrapper styles to Tailwind. |
| spx-gui/src/pages/community/user/overview.vue | Migrates overview layout/card padding to Tailwind. |
| spx-gui/src/pages/community/user/likes.vue | Converts likes grid/pagination styles to Tailwind. |
| spx-gui/src/pages/community/user/index.vue | Replaces main user page layout/error styling with Tailwind classes. |
| spx-gui/src/pages/community/user/following.vue | Converts pagination spacing/alignment to Tailwind. |
| spx-gui/src/pages/community/user/followers.vue | Converts pagination spacing/alignment to Tailwind. |
| spx-gui/src/pages/community/search.vue | Migrates search page layout/grid/pagination wrapper to Tailwind. |
| spx-gui/src/pages/community/index.vue | Converts community shell wrapper styles to Tailwind. |
| spx-gui/src/pages/community/home.vue | Migrates home spacing/guest banner margins to Tailwind. |
| spx-gui/src/pages/community/explore.vue | Replaces explore layout/list SCSS with Tailwind utilities. |
| spx-gui/src/pages/404/index.vue | Migrates 404 page layout/typography/button sizing to Tailwind. |
| spx-gui/src/main.ts | Imports new global app.css entrypoint. |
| spx-gui/src/components/ui/UITextInput.vue | Renames size classes to ui-input-size-* to avoid Tailwind conflicts. |
| spx-gui/src/components/ui/UITag.vue | Renames size classes to ui-tag-size-* to avoid Tailwind conflicts. |
| spx-gui/src/components/ui/UILink.vue | Inlines link variant styles (removes SCSS mixin dependency). |
| spx-gui/src/components/ui/UIDivider.vue | Renames divider class to ui-divider for consistency. |
| spx-gui/src/components/ui/UIConfigProvider.vue | Wraps base element styles in @layer base to align with Tailwind layering. |
| spx-gui/src/components/ui/UIButton.vue | Renames size classes to ui-button-size-* to avoid Tailwind conflicts. |
| spx-gui/src/components/ui/responsive.ts | Updates comment to reference breakpoints defined in @/app.css. |
| spx-gui/src/components/ui/responsive.scss | Removes legacy responsive SCSS mixin file. |
| spx-gui/src/components/ui/modal/UISearchableModal.vue | Renames container class to avoid generic collisions. |
| spx-gui/src/components/ui/modal/UIModalClose.vue | Renames size classes to ui-modal-close-size-*. |
| spx-gui/src/components/ui/modal/UIModal.vue | Renames container/size classes to ui-modal-* namespace. |
| spx-gui/src/components/ui/modal/UIFullScreenModal.vue | Renames generic container class to component-specific name. |
| spx-gui/src/components/ui/modal/UIFormModal.vue | Renames generic container class to component-specific name. |
| spx-gui/src/components/ui/link.scss | Removes link mixin SCSS file (replaced by CSS / app-level classes). |
| spx-gui/src/components/ui/global.scss | Removes legacy global SCSS entry. |
| spx-gui/src/components/ui/global.css | Adds layered global base CSS (reset + base box sizing/button font + font-face). |
| spx-gui/src/components/ui/empty/UIEmpty.vue | Renames size classes to ui-empty-size-*. |
| spx-gui/src/components/ui/dialog/UIDialog.vue | Renames dialog container class to avoid generic collisions. |
| spx-gui/src/components/tutorials/TutorialStateIndicator.vue | Migrates indicator styling from SCSS to Tailwind utilities. |
| spx-gui/src/components/tutorials/TutorialsBanner.vue | Converts banner layout/text positioning to Tailwind and computed class binding. |
| spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue | Migrates modal content layout/actions to Tailwind utilities. |
| spx-gui/src/components/tutorials/CourseItem.vue | Converts course card hover/overlay title styling to Tailwind. |
| spx-gui/src/components/project/ProjectSharingLinkModal.vue | Replaces modal spacing/layout SCSS with Tailwind classes. |
| spx-gui/src/components/project/ProjectPublishedModal.vue | Replaces modal spacing/layout SCSS with Tailwind classes. |
| spx-gui/src/components/project/ProjectOpenModal.vue | Converts project list layout/pagination spacing to Tailwind. |
| spx-gui/src/components/project/ProjectModifyNameModal.vue | Migrates footer layout/spacing to Tailwind. |
| spx-gui/src/components/project/ProjectCreateModal.vue | Migrates alert/footer layout to Tailwind. |
| spx-gui/src/components/navbar/NavbarTutorials.vue | Converts navbar item hover/spacing to Tailwind and inline icon sizing. |
| spx-gui/src/components/navbar/NavbarLogo.vue | Moves most styling to Tailwind; keeps ::after rule in plain scoped CSS. |
| spx-gui/src/components/navbar/NavbarLang.vue | Converts language switcher styling to Tailwind. |
| spx-gui/src/components/navbar/NavbarDropdown.vue | Converts dropdown trigger styling to Tailwind and inline icon sizing. |
| spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue | Migrates waveform container/cursor styling to Tailwind positioning utilities. |
| spx-gui/src/components/editor/stage/sound/waveform/WaveformRangeControl.vue | Drops SCSS nesting; converts to plain CSS selectors. |
| spx-gui/src/components/editor/stage/sound/VolumeSlider.vue | Migrates volume slider layout/icon styling to Tailwind. |
| spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue | Converts selector layout/typography from SCSS to Tailwind. |
| spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue | Migrates backdrop preview layout/styling to Tailwind. |
| spx-gui/src/components/editor/sprite/SpriteList.vue | Converts list layout to Tailwind; flattens nested SCSS into plain CSS. |
| spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue | Removes SCSS and uses inline height style for editor content. |
| spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue | Migrates editor wrapper/background positioning to Tailwind utilities. |
| spx-gui/src/components/editor/sprite/CostumeDetail.vue | Converts costume preview wrapper/background to Tailwind utilities. |
| spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue | Replaces checkbox/action layout SCSS with Tailwind. |
| spx-gui/src/components/editor/sprite/AnimationEditor.vue | Removes unused SCSS background rules. |
| spx-gui/src/components/editor/sprite/AnimationDetail.vue | Migrates player sizing class usage to Tailwind. |
| spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue | Converts mute button styling from SCSS to Tailwind. |
| spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue | Migrates player layout/positioning to Tailwind. |
| spx-gui/src/components/editor/ProjectEditor.vue | Migrates main/sider layout to Tailwind utilities and removes SCSS. |
| spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue | Converts panel container layout to Tailwind. |
| spx-gui/src/components/editor/panels/EditorPanels.vue | Migrates panel layout classes to Tailwind; removes SCSS. |
| spx-gui/src/components/editor/panels/common/PanelFooter.vue | Converts footer layout/shadow to Tailwind + inline boxShadow style. |
| spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue | Converts SCSS nesting to plain CSS rules under <style scoped>. |
| spx-gui/src/components/editor/map-editor/SpritesPanel.vue | Migrates card/list/footer expansion styling to Tailwind. |
| spx-gui/src/components/editor/map-editor/MapSizeInput.vue | Converts input row layout from SCSS to Tailwind. |
| spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/editor/map-editor/MapBasicConfig.vue | Migrates config item layout to Tailwind utilities. |
| spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue | Uses imported SVG for background and Tailwind background utilities. |
| spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue | Converts wrapper layout to Tailwind. |
| spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/editor/common/viewer/quick-config/sprite/RotationConfigPanel.vue | Migrates layout and width/padding helpers to Tailwind utilities. |
| spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue | Converts wrapper layout to Tailwind. |
| spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue | Replaces absolute/padding SCSS with Tailwind spacing. |
| spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigDropdown.vue | Converts menu item sizing/nowrap to Tailwind. |
| spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue | Migrates wrapper/input sizing to Tailwind utilities. |
| spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue | Migrates wrapper/input sizing to Tailwind utilities. |
| spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue | Replaces SCSS with Tailwind border/radius/shadow utilities. |
| spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue | Migrates hover/active styles to Tailwind group/variant utilities. |
| spx-gui/src/components/editor/common/viewer/PositionIndicator.vue | Converts indicator styling/visibility to Tailwind utilities. |
| spx-gui/src/components/editor/common/EditorItemDetail.vue | Migrates detail panel layout/typography to Tailwind. |
| spx-gui/src/components/editor/common/EditorHeader.vue | Converts header layout/border styles to Tailwind. |
| spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue | Converts config row layout to Tailwind. |
| spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue | Converts nowrap styling to Tailwind utility. |
| spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue | Migrates config row/picker container layout to Tailwind. |
| spx-gui/src/components/editor/common/AnglePicker.vue | Replaces directional grid positioning SCSS with conditional Tailwind classes. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue | Migrates wrapper to Tailwind; uses @apply for button styles. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/MonacoEditor.vue | Removes SCSS-only comment syntax; switches to plain CSS. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue | Converts layout/text color to Tailwind utilities. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/CodeBlock.vue | Adjusts padding/overflow styling and simplifies CSS. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue | Converts items layout and add button styling to Tailwind. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/IntegerInput.vue | Uses Tailwind self-stretch instead of inline style. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelperUI.vue | Converts SCSS nesting to plain CSS selectors. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue | Migrates layout and styling to Tailwind utilities. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/DecimalInput.vue | Uses Tailwind self-stretch instead of inline style. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue | Converts layout to Tailwind; keeps checked-border rule in CSS. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/inlay-hint/InlayHintUI.vue | Switches style block to plain CSS. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverUI.vue | Replaces SCSS comment with CSS comment; keeps hover decoration styles. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCardContent.vue | Replaces SCSS padding with Tailwind classes. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue | Migrates layout/scrolling/footer styling to Tailwind classes. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/ActionButton.vue | Converts content layout to Tailwind utilities. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/drop-indicator/DropIndicatorUI.vue | Converts SCSS nesting to plain CSS selectors. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue | Migrates active/inactive tab styling to Tailwind utilities. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue | Switches style block to plain CSS. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue | Moves typography styling to Tailwind + minimal scoped CSS for CodeView reset. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionItem.vue | Replaces sibling spacing SCSS with Tailwind selector utility. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionIcon.vue | Replaces SCSS sizing with Tailwind + deep SVG sizing utilities. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetailWrapper.vue | Replaces margin SCSS with Tailwind class. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetail.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenu.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionUI.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue | Migrates completion item layout/active state styling to Tailwind. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue | Migrates card layout/list/detail pane styling to Tailwind utilities. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/command/CommandIcon.vue | Replaces SCSS sizing with Tailwind + deep SVG sizing utilities. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorUI.vue | Converts some SCSS nesting to plain CSS selectors. |
| spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue | Replaces SCSS with Tailwind + inline box-shadow style. |
| spx-gui/src/components/editor/code-editor/spx-code-editor/ui/resource/SpxResourceItem.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue | Converts layout/text styles to Tailwind. |
| spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirectionInput.vue | Migrates layout and keeps deep padding correction in plain CSS. |
| spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-effect-input/SpxEffectKindInput.vue | Converts item list layout to Tailwind utilities. |
| spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/ColorSlider.vue | Converts SCSS to plain CSS and normalizes box-shadow formatting. |
| spx-gui/src/components/editor/code-editor/spx-code-editor/CodeLink.vue | Switches to global .link-boring class and removes SCSS mixin import. |
| spx-gui/src/components/course/management/ThumbnailUploader.vue | Migrates uploader styling to Tailwind utilities. |
| spx-gui/src/components/course/management/SelectedCoursesList.vue | Converts list layout, drag handle/remove icon styles to Tailwind. |
| spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue | Migrates corner menu styling to Tailwind. |
| spx-gui/src/components/course/management/CourseSelector.vue | Migrates search/list styling to Tailwind and group-hover icon tint. |
| spx-gui/src/components/course/management/CourseItemMini.vue | Converts mini item layout/hover/highlight styles to Tailwind. |
| spx-gui/src/components/course/management/CourseItemCornerMenu.vue | Migrates corner menu styling to Tailwind. |
| spx-gui/src/components/copilot/UserMessage.vue | Migrates message layout/bubble styling to Tailwind utilities. |
| spx-gui/src/components/copilot/feedback/BaseFailed.vue | Converts error color styling to Tailwind. |
| spx-gui/src/components/copilot/feedback/BaseCancelled.vue | Converts warning color styling to Tailwind. |
| spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue | Migrates spacing/typography to Tailwind. |
| spx-gui/src/components/copilot/feedback/api-exception/QuotaExceeded.vue | Converts warning color styling to Tailwind. |
| spx-gui/src/components/copilot/custom-elements/HighlightLink.vue | Migrates button styling to Tailwind. |
| spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue | Migrates wrapper border/radius/bg to Tailwind. |
| spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue | Migrates footer layout/border/bg to Tailwind. |
| spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue | Migrates action button styling to Tailwind. |
| spx-gui/src/components/copilot/custom-elements/CodeChange.vue | Migrates layout/overflow/empty state styling to Tailwind. |
| spx-gui/src/components/copilot/custom-elements/CodeBlock.vue | Migrates code block padding/overflow styling to Tailwind. |
| spx-gui/src/components/copilot/CopilotRound.vue | Simplifies layout and uses Tailwind utility alignment. |
| spx-gui/src/components/community/user/UserJoinedAt.vue | Migrates text styling to Tailwind utilities. |
| spx-gui/src/components/community/user/UserItem.vue | Migrates item layout and link/description styling to Tailwind. |
| spx-gui/src/components/community/user/UserAvatar.vue | Migrates avatar styling to Tailwind utilities and conditional sizing. |
| spx-gui/src/components/community/user/sidebar/UserSidebar.vue | Replaces responsive SCSS mixin usage with Tailwind responsive classes. |
| spx-gui/src/components/community/user/ModifyUsernameModal.vue | Migrates footer layout to Tailwind. |
| spx-gui/src/components/community/user/FollowButton.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/community/user/EditAvatarModal.vue | Migrates cropper/slider/footer layout to Tailwind + plain CSS for disabled state/deep cropper canvas. |
| spx-gui/src/components/community/user/content/UserContent.vue | Migrates content header layout/typography to Tailwind. |
| spx-gui/src/components/community/TextView.vue | Migrates text view layout to Tailwind utilities. |
| spx-gui/src/components/community/project/ReleaseHistory.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/community/project/OwnerInfo.vue | Migrates owner link/avatar styling to Tailwind and .link-boring. |
| spx-gui/src/components/community/MyProjectsEmpty.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/community/home/banner/GuestBanner.vue | Migrates banner layout/background-image handling to Tailwind with imported SVG. |
| spx-gui/src/components/community/footer/CommunityFooter.vue | Migrates footer layout/icon sizing/link underline behavior to Tailwind. |
| spx-gui/src/components/community/CommunityNavbar.vue | Migrates search container styling and plus icon sizing to Tailwind. |
| spx-gui/src/components/community/CommunityHeader.vue | Migrates header layout/typography/truncation to Tailwind. |
| spx-gui/src/components/community/CommunityCard.vue | Converts to plain scoped CSS and adds TODO note for shadow token. |
| spx-gui/src/components/community/CenteredWrapper.vue | Replaces SCSS + responsive mixin with computed Tailwind width classes. |
| spx-gui/src/components/common/RouterUILink.vue | Switches to global .link-primary / .link-boring classes via computed class. |
| spx-gui/src/components/common/RenameModal.vue | Migrates warning/footer layout to Tailwind. |
| spx-gui/src/components/common/CostumesPlayer.vue | Switches to plain scoped CSS. |
| spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue | Converts number input sizing to Tailwind and removes SCSS. |
| spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue | Migrates item layout/active/applied presentation to Tailwind utilities. |
| spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue | Migrates layout/header/main styling to Tailwind utilities. |
| spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue | Migrates preview layout and uses imported SVG for background via inline style. |
| spx-gui/src/components/asset/library/SoundPreview.vue | Migrates centering wrapper to Tailwind utilities. |
| spx-gui/src/components/asset/library/management/VisibilityIcon.vue | Migrates icon positioning/sizing to Tailwind utilities. |
| spx-gui/src/components/asset/library/management/AssetEditModal.vue | Migrates modal main/footer layout and preview sizing to Tailwind. |
| spx-gui/src/components/asset/library/AssetSaveModal.vue | Migrates modal main/footer layout and preview sizing to Tailwind. |
| spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue | Migrates layout and footer styling to Tailwind; fixes min-height for suggestion area. |
| spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue | Migrates modal header/body sizing to Tailwind. |
| spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/asset/gen/sprite/SpriteGen.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue | Migrates preview positioning/image sizing to Tailwind utilities. |
| spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue | Migrates preview sizing and default highlight styling to Tailwind. |
| spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue | Migrates checkerboard preview wrapper to Tailwind utilities. |
| spx-gui/src/components/asset/gen/common/ListItemWrapper.vue | Migrates list/header/add button styling to Tailwind utilities. |
| spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue | Migrates container/main panel layout to Tailwind utilities. |
| spx-gui/src/components/asset/gen/common/ImageSelector.vue | Migrates selector list/tip styling to Tailwind utilities. |
| spx-gui/src/components/asset/gen/common/ImagePreview.vue | Migrates preview wrapper/background positioning to Tailwind. |
| spx-gui/src/components/asset/gen/common/GenPreview.vue | Migrates preview layout/header/ops positioning to Tailwind. |
| spx-gui/src/components/asset/gen/common/GenPanel.vue | Migrates panel split layout/borders/padding to Tailwind utilities. |
| spx-gui/src/components/asset/gen/common/AssetSuggestions.vue | Migrates list/tip layouts to Tailwind utilities. |
| spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue | Migrates modal header/body sizing to Tailwind. |
| spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue | Migrates layout and footer styling to Tailwind utilities. |
| spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue | Removes empty scoped SCSS block. |
| spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue | Migrates preview positioning/detail background styling to Tailwind. |
| spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue | Migrates preview sizing to Tailwind utilities. |
| spx-gui/src/components/asset/AssetName.vue | Replaces SCSS truncation styling with Tailwind utilities. |
| spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue | Migrates notification banner and wrapper layout to Tailwind utilities. |
| spx-gui/src/components/app/device-check/MobileReminder.vue | Migrates reminder layout/typography/image sizing to Tailwind utilities. |
| spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue | Migrates footer layout/spacing to Tailwind. |
| spx-gui/src/App.vue | Removes legacy global SCSS import (global styles now come from app.css). |
| spx-gui/package.json | Adds tailwindcss and @tailwindcss/vite dependencies. |
| spx-gui/.vscode/extensions.json | Updates extension recommendations and adds Tailwind CSS IntelliSense. |
Files not reviewed (1)
- spx-gui/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![xgopilot[bot]](https://avatars.githubusercontent.com/in/1924301?s=60&v=4){kind=small}
Contributor
|
Solid migration work — the theme bridge design in |
Contributor
|
The intended value is almost certainly |
cn0809
commented
Apr 10, 2026
| --radius-full: 9999px; | ||
| --radius-sm: var(--ui-border-radius-1, 8px); | ||
| --radius-md: var(--ui-border-radius-2, 12px); | ||
| --radius-lg: var(--ui-border-radius-3, 20px); |
Collaborator
Author
There was a problem hiding this comment.
这里改成了 tailwind 标准 token (rounded-2 -> rounded-md)，方便 twMerge 识别所属 namespace 以免合并出错。如果新风格稿定义的圆角比较多，可以扩充 -xs -xl ..，见 https://tailwindcss.com/docs/border-radius
cn0809
commented
Apr 10, 2026
cn0809
commented
Apr 10, 2026
spx-gui/src/app.css
Outdated
Comment on lines
+255
to
+262
| /* Numeric `text-<number>` utilities and the shared `text-body` alias are recognized as font sizes by the shared `cn()` twMerge config. */ | ||
| /* TODO: If additional semantic `text-*` size names such as `text-button` / `text-heading` are introduced later, extend `tailwind-merge` first so they do not collide with color utilities like `text-title`. */ | ||
| --text-body: var(--ui-font-size-text, 14px); | ||
| --text-body--line-height: 1.57143; | ||
| --text-10: 10px; | ||
| --text-10--line-height: 1.5; | ||
| --text-12: 12px; | ||
| --text-12--line-height: 1.5; |
Collaborator
Author
There was a problem hiding this comment.
目前这里 text-* 风格不统一，后面建议统一下，比如：
- 全部用 tailwind 标准 token: text-sm text-base text-lg .. 好处是不需要 extend twMerge，合并问题少
text-<number>改成语义化的，比如 text-body text-heading .. 不过可能会跟 text-title 这种定义 color 的 token 长得太像容易混淆- 全部用
text-<number>，统一 直观，也容易跟 color token 区分, twMerge extend 规则也相对简单，缺点就是缺少语义化
cn0809
commented
Apr 10, 2026
spx-gui/AGENTS.md
Outdated
Comment on lines
+120
to
+123
| * For root-class overrides and utility conflicts: | ||
| - For business components, external root `class` overrides are allowed by default. If utility conflicts need an explicit winner, prefer adding Tailwind's important modifier at the usage site (for example `rounded-md!`, `w-32!`) instead of expanding the component API. This keeps intent explicit, usage concise, and matches the fact that business components rarely need nested override chains. | ||
| - For most UI components, `twMerge` and `@layer components` are set up so external utilities or custom classes can override root classes in the common case without special handling, though edge cases can still exist. | ||
| - For the Naive UI-root components listed in `src/components/ui/README.md`, avoid relying on external `class` for styling-critical overrides when possible; the final result is often hard to predict. |
Collaborator
Author
There was a problem hiding this comment.
root class 覆盖规则更新到这里了
nighca
reviewed
Apr 10, 2026
nighca
approved these changes
Apr 10, 2026
| } | ||
|
|
||
| .slider:deep(.thumb) { | ||
| .slider:deep(.ui-slider-thumb) { |
Collaborator
There was a problem hiding this comment.
Nit: 这个是适合改造成 <UISlider :thumb-class="..."> 的 case 吗？
| 'w-full flex items-center gap-2 px-1.5 text-center text-title', | ||
| props.size === 'large' ? 'h-8 text-13/5' : 'text-10/[1.6]', | ||
| attrs.class as ClassValue | ||
| props.class ?? null |
Collaborator
There was a problem hiding this comment.
Nit: 可以考虑 ClassValue 支持一下 undefined，就能省掉一堆 ?? null 了
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
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.
close: #2981