From 13b072adf36574dbff0feabc5911dfee68d040ee Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 31 Mar 2026 11:10:33 +0800
Subject: [PATCH 01/29] sv

---
 docs/develop/tailwind-css-migration.md        | 509 ++++++++++++++++++
 spx-gui/.vscode/extensions.json               |   5 +-
 spx-gui/AGENTS.md                             |  26 +
 spx-gui/package-lock.json                     | 394 +++++++++++++-
 spx-gui/package.json                          |   2 +
 spx-gui/src/App.vue                           |   4 -
 spx-gui/src/app.css                           | 243 +++++++++
 .../src/components/common/RouterUILink.vue    |  18 +-
 .../components/community/CenteredWrapper.vue  |  40 +-
 .../components/community/CommunityCard.vue    |   3 +-
 .../components/community/CommunityHeader.vue  |  37 +-
 .../components/community/ProjectsSection.vue  |  83 +--
 .../community/user/sidebar/UserSidebar.vue    |  21 +-
 .../user/sidebar/UserSidebarItem.vue          |  73 +--
 .../code-editor/spx-code-editor/CodeLink.vue  |  10 +-
 .../ui/completion/CompletionItem.vue          |  47 +-
 .../editor/map-editor/MapEditor.vue           |  69 +--
 .../src/components/navbar/NavbarWrapper.vue   |  68 +--
 .../src/components/project/ProjectItem.vue    | 192 +------
 .../components/tutorials/CourseSeriesItem.vue |  54 +-
 .../components/tutorials/TutorialsBanner.vue  |  67 +--
 spx-gui/src/components/ui/UILink.vue          |  26 +-
 spx-gui/src/components/ui/global.css          |  18 +
 spx-gui/src/components/ui/global.scss         |  16 -
 spx-gui/src/components/ui/link.scss           |  24 -
 spx-gui/src/components/ui/responsive.scss     |  22 -
 spx-gui/src/components/ui/responsive.ts       |   2 +-
 spx-gui/src/main.ts                           |   1 +
 spx-gui/src/pages/404/index.vue               |  44 +-
 spx-gui/src/pages/community/explore.vue       |  21 +-
 spx-gui/src/pages/community/home.vue          |  14 +-
 spx-gui/src/pages/community/index.vue         |  13 +-
 spx-gui/src/pages/sign-in/callback.vue        |  10 +-
 spx-gui/src/pages/sign-in/token.vue           |  43 +-
 spx-gui/src/pages/tutorials/course-start.vue  |  12 +-
 spx-gui/src/pages/tutorials/index.vue         |  38 +-
 spx-gui/src/utils/utils.scss                  |   5 -
 spx-gui/vercel-output-plugin.ts               |   2 +-
 spx-gui/vite.config.ts                        |   2 +
 39 files changed, 1389 insertions(+), 889 deletions(-)
 create mode 100644 docs/develop/tailwind-css-migration.md
 create mode 100644 spx-gui/src/app.css
 create mode 100644 spx-gui/src/components/ui/global.css
 delete mode 100644 spx-gui/src/components/ui/global.scss
 delete mode 100644 spx-gui/src/components/ui/link.scss
 delete mode 100644 spx-gui/src/components/ui/responsive.scss
 delete mode 100644 spx-gui/src/utils/utils.scss

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
new file mode 100644
index 000000000..464e56a03
--- /dev/null
+++ b/docs/develop/tailwind-css-migration.md
@@ -0,0 +1,509 @@
+# Tailwind CSS Migration Assessment for spx-gui
+
+This document investigates whether XBuilder frontend styling in `spx-gui` should migrate to Tailwind CSS.
+
+Issue: `goplus/builder#2981`
+
+## Conclusion
+
+Tailwind CSS is technically feasible in `spx-gui`, but a full migration is not a good near-term tradeoff.
+
+The current frontend already has a working design-token layer, a custom UI component library, and deep integration with Naive UI theme overrides. Because of that, Tailwind would mainly change the authoring model for layout and simple component styling. It would not replace major parts of the existing styling system unless the project also commits to a broader UI-layer refactor.
+
+The recommended direction is an incremental hybrid approach:
+
+- keep the existing `--ui-*` design tokens and Naive UI theme layer
+- add Tailwind only as an optional utility layer
+- validate it on a small set of low-risk pages or self-contained components first
+- only expand usage if the pilot materially improves development speed and code review quality
+
+## Current Target
+
+The current target is not "remove all SCSS from the repo".
+
+The near-term goal is more specific:
+
+- in business code outside `src/components/ui/`, use Tailwind as the default styling tool for local layout and surface styling
+- if business code still needs local authored styles, prefer plain CSS over SCSS
+- remove business-code imports of SCSS helpers from `src/components/ui/`
+- remove remaining SCSS files outside `src/components/ui/` as part of this phase
+- keep the existing design-system layer in `src/components/ui/` as the source of truth for tokens and Naive UI integration
+- allow `src/components/ui/` to keep local SCSS for now when that remains the clearest implementation
+
+This means the project is pursuing two related but different directions:
+
+- business code should move toward Tailwind-first plus plain CSS fallback, with SCSS being removed from that layer in this phase
+- the component-library layer should move more cautiously, with looser short-term requirements on SCSS removal
+
+## Current Styling Architecture
+
+The current frontend styling model is centered around Vue SFC local styles plus shared CSS variables, with Tailwind now added as an optional utility layer.
+
+- `spx-gui` uses Vite + Vue 3, includes both Tailwind and Sass tooling in [spx-gui/package.json](../../spx-gui/package.json)
+- the app loads global styling through [spx-gui/src/main.ts](../../spx-gui/src/main.ts) and [spx-gui/src/app.css](../../spx-gui/src/app.css), which imports [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css)
+- design tokens are defined in TypeScript under [spx-gui/src/components/ui/tokens/index.ts](../../spx-gui/src/components/ui/tokens/index.ts) and related files
+- the token objects are converted into `--ui-*` CSS variables and injected globally by [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue)
+- Naive UI theme overrides are also defined in [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue), so the token system serves both custom CSS and third-party components
+- most component styles live inside local `<style scoped lang="scss">` blocks, for example [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue) and [spx-gui/src/components/editor/navbar/EditorNavbar.vue](../../spx-gui/src/components/editor/navbar/EditorNavbar.vue)
+
+Measured footprint in `spx-gui/src`:
+
+- 411 Vue files total
+- 325 Vue files contain a `<style>` block
+- 322 Vue files use SCSS in the SFC
+- 115 `:deep(...)` usages override descendants or third-party internals
+- 22 direct imports from `naive-ui`
+- 5 standalone stylesheet files under `src`, with most styling still embedded in Vue SFCs
+
+Representative styling patterns:
+
+- token-driven custom components: [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue)
+- app-wide token and theme bridge: [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue)
+- responsive breakpoint logic: [spx-gui/src/components/ui/responsive.ts](../../spx-gui/src/components/ui/responsive.ts) and [spx-gui/src/components/community/CenteredWrapper.vue](../../spx-gui/src/components/community/CenteredWrapper.vue)
+- complex page-level nested styling: [spx-gui/src/pages/community/project.vue](../../spx-gui/src/pages/community/project.vue)
+- content-renderer deep selectors: [spx-gui/src/components/copilot/MarkdownView.vue](../../spx-gui/src/components/copilot/MarkdownView.vue)
+
+## Tailwind Fit Assessment
+
+Tailwind fits part of the project well, but not all of it.
+
+Good fit:
+
+- layout-heavy pages using flex, grid, spacing, width, and alignment utilities
+- simple presentational components with limited state combinations
+- new pages or isolated features where templates are already the main source of UI structure
+- responsive layout rules, because the current breakpoint usage is limited and can be mapped into a custom Tailwind config
+
+Weak fit:
+
+- components with many styling states encoded through local CSS variables and nested selectors
+- custom wrappers around Naive UI that rely on theme overrides plus `:deep(...)` selectors
+- content renderers and editor surfaces that style generated DOM, not just authored template nodes
+- components with runtime geometry or inline styles, such as sliders, image previews, waveform editors, or draggable/resizable panes
+
+Poor or no fit:
+
+- Monaco editor integration and other third-party DOM that already depends on custom CSS
+- Konva or canvas-rendered surfaces where styling is not driven by CSS utility classes
+
+## Migration Cost Estimate
+
+Estimated cost if the goal is only to introduce Tailwind as an optional utility layer:
+
+- setup and token mapping: 1 to 2 engineer-days
+- pilot migration for 1 small feature area: 2 to 5 engineer-days
+- documentation and team conventions: 1 engineer-day
+
+Estimated cost for a meaningful incremental rollout across layout-heavy areas:
+
+- 2 to 4 engineer-weeks
+- includes Tailwind setup, token mapping, conventions, 10 to 20 component/page migrations, and cleanup of duplicated styling patterns
+
+Estimated cost for a broad migration that tries to make Tailwind the dominant styling approach in `spx-gui`:
+
+- 6 to 10 engineer-weeks at minimum
+- likely more if the scope includes reworking Naive UI wrappers, complex editor surfaces, and duplicated `:deep(...)` customizations
+
+Estimated cost for a true full migration away from the current SCSS-plus-token approach:
+
+- high risk and not currently justified
+- would effectively become a UI architecture refactor, not just a styling migration
+
+## Major Risks And Constraints
+
+### 1. Existing token system already solves part of the problem
+
+The project already has a centralized token system and shared CSS variables. Tailwind would not replace that cleanly unless the team rewrites token consumption across both custom components and Naive UI overrides.
+
+### 2. Tailwind does not remove the Naive UI dependency
+
+Naive UI is embedded in the app theme model via [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue). Even after adding Tailwind, the project would still need to maintain Naive UI theming and style overrides.
+
+### 3. Scoped SCSS is currently aligned with component boundaries
+
+A large share of the codebase keeps style logic close to each Vue component. Tailwind can improve speed for simple cases, but moving every component to class-heavy templates would be noisy and produce uneven code style if done inconsistently.
+
+### 4. `:deep(...)` usage is a real migration brake
+
+There are 115 `:deep(...)` usages. These target generated content, child internals, or third-party component markup. Tailwind utilities do not eliminate that category of styling work.
+
+### 5. Complex editor UI gets limited value from utility classes
+
+Several editor surfaces rely on runtime positions, inline CSS variables, drag behavior, SVG, or canvas-like rendering. Those areas already need custom CSS or programmatic styling, so Tailwind adds little leverage there.
+
+### 6. Design consistency can regress during mixed migration
+
+If the team starts using raw Tailwind classes without a token bridge and a small set of conventions, the result will drift away from the existing `--ui-*` design language.
+
+### 7. Maintenance cost can increase before it decreases
+
+During the transition, the project would have to maintain:
+
+- scoped SCSS
+- CSS variables
+- Naive UI theme overrides
+- Tailwind config and utilities
+
+That is acceptable only if the migration remains intentionally narrow at first.
+
+## Strategy Comparison
+
+### Full Migration
+
+Pros:
+
+- one dominant styling model after the migration finishes
+- potentially faster AI-assisted markup styling in the long run
+
+Cons:
+
+- high rewrite cost
+- high risk of regressions in editor surfaces and custom UI components
+- still does not remove the need for custom CSS in several critical areas
+- poor short-term return on effort
+
+Assessment: not recommended.
+
+### Incremental Migration
+
+Pros:
+
+- low risk
+- easy to stop if the benefits are smaller than expected
+- preserves current design tokens and Naive UI integration
+- lets the team learn where Tailwind actually helps
+
+Cons:
+
+- mixed styling models for some time
+- requires discipline to avoid ad hoc utility usage
+
+Assessment: viable.
+
+### Hybrid Approach With Guardrails
+
+This means Tailwind is introduced first where it improves business-code authoring, while the design-system layer keeps its current implementation patterns unless there is a clear payoff in changing them.
+
+Recommended usage boundaries:
+
+- use Tailwind for business-code page layout, spacing, simple cards, and simple wrappers
+- in business code, prefer plain CSS over SCSS when Tailwind is not the right expression
+- remove business-code dependencies on shared SCSS helper files from `src/components/ui/`
+- remove remaining SCSS files outside `src/components/ui/` instead of carrying them forward as a second-tier target
+- keep the existing token system as the source of truth
+- allow `src/components/ui/` to keep local SCSS in the short term, especially where it wraps Naive UI, exposes component variants, or relies on local stateful styling
+- keep CSS or SCSS for complex stateful widgets, `:deep(...)` overrides, editor internals, animation-heavy UI, and third-party DOM styling
+
+Assessment: best option.
+
+## Recommended Plan
+
+### Phase 1: Proof Of Fit
+
+- add Tailwind to `spx-gui` without changing existing styling
+- map Tailwind theme values to the current `--ui-*` tokens where practical
+- define custom breakpoints that match current responsive behavior
+- document when Tailwind is allowed and when local SCSS should remain the default
+
+Success criteria:
+
+- build works cleanly with Vite
+- no conflicts with current global styles or Naive UI theme overrides
+- a pilot page can use Tailwind without introducing duplicated design values
+
+### Phase 2: Pilot Migration
+
+Choose one small, layout-oriented area first. Good candidates are community or tutorial pages, not the editor core.
+
+Suggested pilot targets:
+
+- [spx-gui/src/components/community/CenteredWrapper.vue](../../spx-gui/src/components/community/CenteredWrapper.vue)
+- community listing or detail sections with mostly layout styling
+- simple UI wrappers that do not depend heavily on `:deep(...)`
+
+Avoid as first pilots:
+
+- editor navbar and editor panels
+- Monaco-related UI
+- waveform, drag-and-drop, or resize-heavy components
+- components that mainly customize Naive UI internals
+
+Success criteria:
+
+- the converted code is shorter or clearer than the current SCSS
+- design stays visually identical
+- AI-assisted edits become easier in practice, not just in theory
+
+### Phase 3: Decide Whether To Expand
+
+After the pilot, compare:
+
+- implementation speed
+- readability in code review
+- consistency with existing design tokens
+- regression rate
+- amount of residual SCSS still required
+
+If the pilot does not show a clear gain, stop and keep the current styling model.
+
+If the pilot is successful, expand only into other layout-heavy areas.
+
+## SCSS Migration Backlog
+
+The current SCSS usage in `spx-gui` should not be treated as a single migration bucket.
+
+The practical migration unit is not "all SCSS files" but "SCSS by responsibility":
+
+- layout-heavy page and card styling is a good Tailwind candidate
+- global foundation styling should remain, even if it later moves from SCSS to plain CSS
+- deep overrides, generated content styling, and editor surfaces should remain in CSS or SCSS
+- small SCSS helper layers should be phased out only after their consumers are migrated
+
+### Priority 1: Good Tailwind Candidates
+
+These files are strong candidates for early migration because they are business-code surfaces whose styling is mostly local layout, spacing, sizing, and simple visual presentation on authored template nodes.
+
+Recommended first batch:
+
+- [spx-gui/src/pages/community/explore.vue](../../spx-gui/src/pages/community/explore.vue)
+- [spx-gui/src/pages/community/home.vue](../../spx-gui/src/pages/community/home.vue)
+- [spx-gui/src/components/community/user/sidebar/UserSidebar.vue](../../spx-gui/src/components/community/user/sidebar/UserSidebar.vue)
+- [spx-gui/src/pages/tutorials/course-series.vue](../../spx-gui/src/pages/tutorials/course-series.vue)
+
+Recommended second batch:
+
+- [spx-gui/src/components/navbar/NavbarWrapper.vue](../../spx-gui/src/components/navbar/NavbarWrapper.vue)
+- [spx-gui/src/components/project/ProjectItem.vue](../../spx-gui/src/components/project/ProjectItem.vue)
+- user-page wrappers and list pages under `src/pages/community/user/` where the styling is primarily page shell and list layout
+
+Migration rule for this category:
+
+- move layout, spacing, sizing, typography, and simple hover states into Tailwind classes or small project utilities in `src/app.css`
+- if local authored styles still remain, prefer plain CSS over SCSS
+- remove the local `<style scoped lang="scss">` block after the migrated component is visually verified
+
+### Priority 2: Keep CSS Or SCSS Explicitly
+
+These files should remain outside the primary Tailwind migration target because their value comes from deep selectors, third-party DOM overrides, generated content styling, complex runtime layout, or highly stateful design-system behavior.
+
+Representative keep-as-CSS-or-SCSS areas:
+
+- design-system wrappers such as [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue) and [spx-gui/src/components/ui/UITextInput.vue](../../spx-gui/src/components/ui/UITextInput.vue)
+- content renderers such as [spx-gui/src/components/copilot/MarkdownView.vue](../../spx-gui/src/components/copilot/MarkdownView.vue) and [spx-gui/src/components/common/CodeView.vue](../../spx-gui/src/components/common/CodeView.vue)
+- editor and runner surfaces such as [spx-gui/src/components/editor/preview/EditorPreview.vue](../../spx-gui/src/components/editor/preview/EditorPreview.vue), [spx-gui/src/pages/community/project.vue](../../spx-gui/src/pages/community/project.vue), and components under `src/components/project/runner/` and `src/components/editor/`
+
+Migration rule for this category:
+
+- do not migrate these files just to reduce SCSS usage
+- keep local CSS or SCSS where it is the clearest way to express stateful styling, `:deep(...)` overrides, pseudo-elements, counters, container queries, or generated DOM styling
+
+### Priority 2.5: Remove Business-Code Dependencies On Shared SCSS Helpers
+
+Business code should stop depending on shared SCSS helper files even if those helper files still temporarily exist for `src/components/ui/`.
+
+Current remaining helper dependencies include:
+
+- 2 direct imports of `src/components/ui/link.scss`
+
+Migration rule for this category:
+
+- replace `link.scss` usage with local CSS or template classes at the call site
+- do not keep business-code SCSS imports just because the helper file still exists for another area
+
+### Priority 2.6: Remove SCSS Files Outside `src/components/ui/`
+
+This phase should not leave a second bucket of non-UI-library SCSS behind.
+
+Migration rule for this category:
+
+- for files outside `src/components/ui/`, convert remaining `<style lang="scss">` blocks to Tailwind or plain CSS in the same pass
+- if a non-UI-library file still needs authored local styles after migration, keep them as plain CSS rather than SCSS
+- reserve SCSS carryover for `src/components/ui/` only in this phase
+
+### Priority 3: Phase Out Small SCSS Helper Layers
+
+These files are not long-term migration targets themselves. They should be removed only after the remaining consumers are migrated or absorbed into component-local styles.
+
+- [spx-gui/src/components/ui/link.scss](../../spx-gui/src/components/ui/link.scss)
+	This should be folded into link components or replaced by a small Tailwind utility convention before deleting the mixin file.
+- [spx-gui/src/utils/utils.scss](../../spx-gui/src/utils/utils.scss)
+	This should be replaced by direct Tailwind utilities such as truncation helpers or by local component CSS where needed.
+
+### Global Foundation Styling
+
+Global foundation styling should remain even in a Tailwind-based hybrid model.
+
+- [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) should not be deleted as part of Tailwind adoption
+- reset rules, `box-sizing`, and `@font-face` declarations are still needed
+- this file may later be converted from SCSS to plain CSS, but it should remain as a base layer stylesheet
+
+### Recommended Execution Order
+
+1. Finish low-risk page-shell and list-layout migrations in community and tutorials areas.
+2. Migrate simple card components such as project and course list items.
+3. Replace the remaining `link.scss` and `utils.scss` consumers.
+4. Delete helper SCSS files only after they have no remaining imports or mixin usages.
+5. Keep editor, runner, markdown, and Naive UI wrapper styling outside the migration scope unless there is a separate reason to refactor them.
+
+## Pilot Conventions And Preferences
+
+The community and tutorials pilot clarified a few practical conventions that should guide follow-up migrations.
+
+These are not abstract preferences. They reflect patterns that were already implemented and verified in the pilot components and pages.
+
+### 1. Keep Tailwind As A Local Authoring Tool, Not A New Global Dumping Ground
+
+The global entry file [spx-gui/src/app.css](../../spx-gui/src/app.css) should stay narrowly scoped.
+
+It is the right place for:
+
+- Tailwind entry setup such as `@import "tailwindcss"` and `@source`
+- the theme bridge from existing `--ui-*` variables to Tailwind tokens
+- rare project-wide utilities that are truly cross-feature and not page-specific
+
+It is not the right place for:
+
+- tutorials-only utilities
+- page-local dimensions, transforms, or background colors
+- feature-specific card or banner styles
+
+Rule of thumb:
+
+- if a class name would only make sense inside one page or one small feature area, keep it local to that component instead of promoting it into `app.css`
+
+### 2. Bridge Global Tokens, Not Page-Specific Business Styling
+
+The Tailwind theme bridge should cover stable design-system tokens from [spx-gui/src/components/ui/tokens/index.ts](../../spx-gui/src/components/ui/tokens/index.ts).
+
+That includes:
+
+- shared palette tokens
+- semantic tokens such as `primary`, `danger`, `success`, `sprite`, `sound`, and `stage`
+- typography, spacing, radius, and shadow tokens
+
+It should not absorb page-specific visual decisions such as a tutorials-only banner color or one-off sizing tokens.
+
+Rule of thumb:
+
+- bridge values that belong to the whole product design language
+- keep values that exist only for one feature in the feature itself
+
+Theme-reset preference:
+
+- for theme namespaces already covered by the design system, such as color, shadow, font, font-size, radius, and line-height, reset Tailwind's default values and expose only the project-specific values intended for use in this repo
+
+Token usage preference:
+
+- in Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`
+- in local CSS or SCSS rules, prefer using the original `--ui-*` variables directly, because `--ui-*` remains the source of truth and the Tailwind bridge exists primarily for utility-class authoring
+
+### 3. Prefer Tailwind For Straightforward Layout And Surface Styling
+
+The pilot confirmed that Tailwind works well for the following kinds of changes:
+
+- flex and grid layout
+- spacing, width, height, alignment, and overflow
+- simple typography application through bridged tokens
+- simple hover transitions on authored template nodes
+
+Representative examples from the pilot:
+
+- [spx-gui/src/pages/tutorials/index.vue](../../spx-gui/src/pages/tutorials/index.vue)
+- [spx-gui/src/components/tutorials/TutorialsBanner.vue](../../spx-gui/src/components/tutorials/TutorialsBanner.vue)
+- [spx-gui/src/components/tutorials/CourseSeriesItem.vue](../../spx-gui/src/components/tutorials/CourseSeriesItem.vue)
+
+Preferred style in this category:
+
+- write the style directly in the template when the utilities remain readable
+- remove the local style block after the result is verified
+
+Responsive styling preference:
+
+- reset Tailwind's default breakpoint names and use only the project-specific names `tablet`, `desktop`, and `desktop-large`
+- map the project breakpoints into Tailwind once in [spx-gui/src/app.css](../../spx-gui/src/app.css)
+- prefer Tailwind responsive variants for style changes instead of runtime `useResponsive()` checks
+- keep runtime responsive helpers only for non-style logic such as changing counts, queries, or other behavior that CSS cannot express
+
+### 4. Do Not Force Tailwind Where A Small Inline Style Is Clearer
+
+Some values are technically expressible in Tailwind but are not a good fit for utility classes.
+
+Examples from the pilot:
+
+- special color expressions such as `rgb(from var(--ui-color-grey-1000) r g b / 0.2)`
+- asset URLs that are clearer when imported through TypeScript
+- one-off values that would otherwise require long arbitrary-value classes
+
+Preferred style in this category:
+
+- import the asset or compute the value in script when that makes the dependency explicit
+- bind it through `:style` when the inline form is shorter and clearer than a custom utility or arbitrary class
+
+This is the current preferred pattern for one-off backgrounds in migrated components such as [spx-gui/src/components/tutorials/CourseSeriesItem.vue](../../spx-gui/src/components/tutorials/CourseSeriesItem.vue).
+
+### 5. Do Not Introduce Setup Variables For Single-Use Style Values Without A Payoff
+
+During the pilot, a temporary setup variable was introduced for a single background image style and then removed.
+
+Preferred style:
+
+- if a style value is used only once and is still readable inline, bind it directly in the template
+- only lift it into script when it is reused, computed, or meaningfully improves readability
+
+### 6. Prefer Explicit Asset Imports Over Tailwind `url(...)` Classes When Readability Matters
+
+Tailwind arbitrary `url(...)` classes do work correctly through Vite build and asset hashing.
+
+However, the pilot showed that this form can still create review friction because the dependency path is less explicit in the template.
+
+Preferred style:
+
+- for important or non-obvious asset references, prefer `import stageBgUrl from '...'` plus `:style="{ backgroundImage: \`url(${stageBgUrl})\` }"`
+- reserve Tailwind `bg-[url(...)]` for cases where the shorthand is clearly readable and unlikely to cause doubt
+
+### 7. Keep Migration Decisions At The Responsibility Level, Not The File-Extension Level
+
+The pilot reinforced the original migration strategy:
+
+- Tailwind is a good fit for local page-shell and card layout concerns
+- local CSS or SCSS should remain for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets
+- a file does not need to become "100% Tailwind" to count as successfully migrated
+
+The goal is clearer and more maintainable code, not maximizing utility-class usage.
+
+### 8. Keep Exact Local Values Local, With A Visible TODO
+
+Some migrated components still need exact local visual values that are not part of the current token system.
+
+Preferred style:
+
+- keep those values local instead of forcing them into the global theme bridge
+- add a nearby comment such as `TODO: review this ... value` so later cleanup can decide whether the value should remain local or become a token
+
+## Recommendation
+
+Tailwind CSS is worth evaluating in `spx-gui`, but only as a constrained utility layer.
+
+It is not worth pursuing as a near-term full migration target because the project already has:
+
+- a functioning token system
+- a custom UI component layer
+- Naive UI theme integration
+- many component-local scoped SCSS blocks
+- a meaningful number of deep selectors and complex editor surfaces
+
+The practical recommendation for issue `#2981` is:
+
+- conclude that Tailwind is feasible
+- reject full migration for now
+- recommend a hybrid incremental pilot
+- make the pilot target a simple community or tutorial area before touching editor internals
+
+## Suggested Next Step
+
+If the team wants to continue after this assessment, the next task should be a small proof-of-concept PR that:
+
+- installs Tailwind in `spx-gui`
+- defines the minimal theme bridge to current tokens
+- converts one low-risk page or wrapper component
+- records what became simpler and what still required SCSS
\ No newline at end of file
diff --git a/spx-gui/.vscode/extensions.json b/spx-gui/.vscode/extensions.json
index 93ea3e783..48993148e 100644
--- a/spx-gui/.vscode/extensions.json
+++ b/spx-gui/.vscode/extensions.json
@@ -1,7 +1,8 @@
 {
   "recommendations": [
-    "Vue.volar",
+    "vue.volar",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
   ]
 }
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 11ad9facd..2fe4852b9 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -80,6 +80,32 @@ When working with backend unique string identifiers such as `username`, project
 
 * Generate accessibility info for interactive elements using `v-radar` directive.
 
+## Styling Preferences
+
+* For business code outside `src/components/ui/`, prefer Tailwind as the default way to implement local layout and surface styling.
+* If business code still needs local authored styles, prefer plain CSS over SCSS.
+* Do not add or keep business-code imports of SCSS helpers from `src/components/ui/`.
+* For `src/components/ui/`, the long-term direction is the same, but this phase still allows local SCSS where it remains the clearest implementation.
+* Keep [src/app.css](src/app.css) limited to Tailwind entry setup, the theme bridge, and rare project-wide utilities.
+* Do not move page-local or feature-local styles into `src/app.css` just because they are written with Tailwind.
+* Keep page-specific dimensions, transforms, colors, and card/banner styling local to the relevant page or component.
+* Keep the existing `--ui-*` design token system as the source of truth.
+* In Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`.
+* In local CSS or SCSS rules, prefer using the original `--ui-*` variables directly instead of routing those rules back through Tailwind bridge variables.
+* For theme namespaces already covered by the design system, such as color, shadow, font, font-size, radius, and line-height, reset Tailwind's default values in `src/app.css` and expose only the project-specific values intended for use in this repo.
+* Keep the project breakpoint mapping in `src/app.css` aligned with `src/components/ui/responsive.ts`.
+* Reset Tailwind's default breakpoint names in `src/app.css` and use only the project-specific names `tablet`, `desktop`, and `desktop-large` in responsive classes.
+* For responsive styling, prefer Tailwind responsive variants over runtime `useResponsive()` checks.
+* Keep `useResponsive()` for non-style logic only, such as changing fetched counts or other runtime behavior that CSS cannot express.
+* Prefer Tailwind for straightforward layout and surface styling: flex, grid, spacing, sizing, alignment, overflow, simple typography, and simple hover states.
+* When Tailwind classes stay readable, write them directly in the template and remove the local style block after verification.
+* Keep local CSS or SCSS for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets.
+* Do not force a file to become fully Tailwind if a small amount of local CSS or SCSS remains the clearest expression.
+* Use `:style` for one-off values that are clearer inline than as Tailwind arbitrary values or custom utilities.
+* For important or non-obvious background assets, prefer TypeScript imports plus inline `backgroundImage` binding over Tailwind `bg-[url(...)]` classes.
+* Do not introduce setup variables for single-use style values unless they are reused, computed, or materially improve readability.
+* When a non-token visual value needs to remain exact and local, keep it local instead of forcing it into the global token bridge. Add a nearby comment such as `TODO: review this ... value` so it is visible in later design cleanup or tokenization work.
+
 ### Menu Item Text Guidelines
 
 When creating or modifying menu items, follow these UI guidelines for ellipses:
diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index 1503b962b..4df41e105 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -16,6 +16,7 @@
         "@sentry/core": "^9.33.0",
         "@sentry/vue": "^9.33.0",
         "@shikijs/monaco": "^3.2.2",
+        "@tailwindcss/vite": "^4.2.2",
         "@tanstack/vue-query": "^5.36.1",
         "@tsconfig/node24": "^24.0.3",
         "@types/file-saver": "^2.0.7",
@@ -58,6 +59,7 @@
         "scss": "^0.2.4",
         "shiki": "^3.2.2",
         "sortablejs": "^1.15.6",
+        "tailwindcss": "^4.2.2",
         "typescript": "^5.9.3",
         "vite": "^8.0.0",
         "vite-plugin-ejs": "^1.7.0",
@@ -840,6 +842,26 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -853,6 +875,16 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@juggle/resize-observer": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
@@ -2281,6 +2313,321 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.2.tgz",
+      "integrity": "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.19.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.2.tgz",
+      "integrity": "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.2.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.2.2",
+        "@tailwindcss/oxide-darwin-x64": "4.2.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.2.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.2.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.2.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.2.2",
+        "@tailwindcss/oxide-wasm32-wasi": "4.2.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.2.tgz",
+      "integrity": "sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.2.tgz",
+      "integrity": "sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.2.tgz",
+      "integrity": "sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.2.tgz",
+      "integrity": "sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.2.tgz",
+      "integrity": "sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.2.tgz",
+      "integrity": "sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.2.tgz",
+      "integrity": "sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.2.tgz",
+      "integrity": "sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.2.tgz",
+      "integrity": "sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.2.tgz",
+      "integrity": "sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.2.tgz",
+      "integrity": "sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.2.tgz",
+      "integrity": "sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.2.tgz",
+      "integrity": "sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.2.2",
+        "@tailwindcss/oxide": "4.2.2",
+        "tailwindcss": "4.2.2"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
     "node_modules/@tanstack/match-sorter-utils": {
       "version": "8.15.1",
       "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.15.1.tgz",
@@ -4044,6 +4391,19 @@
       "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
       "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg=="
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.20.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
+      "integrity": "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -4651,6 +5011,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -5234,6 +5600,15 @@
         "node": "*"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-base64": {
       "version": "3.7.8",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz",
@@ -7829,12 +8204,25 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
-      "integrity": "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
+      "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
       "license": "MIT",
       "peer": true
     },
+    "node_modules/tapable": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.2.tgz",
+      "integrity": "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index 64a87f3bd..c4497e54e 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -24,6 +24,7 @@
     "@sentry/vue": "^9.33.0",
     "@shikijs/monaco": "^3.2.2",
     "@tanstack/vue-query": "^5.36.1",
+    "@tailwindcss/vite": "^4.2.2",
     "@tsconfig/node24": "^24.0.3",
     "@types/file-saver": "^2.0.7",
     "@types/node": "^24.10.1",
@@ -65,6 +66,7 @@
     "scss": "^0.2.4",
     "shiki": "^3.2.2",
     "sortablejs": "^1.15.6",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
     "vite-plugin-ejs": "^1.7.0",
diff --git a/spx-gui/src/App.vue b/spx-gui/src/App.vue
index d0f0e66c0..6b3cbeb5f 100644
--- a/spx-gui/src/App.vue
+++ b/spx-gui/src/App.vue
@@ -53,7 +53,3 @@ const config = computed<Config>(() => ({
 
 useInstallRouteLoading()
 </script>
-
-<style lang="scss">
-@import '@/components/ui/global.scss';
-</style>
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
new file mode 100644
index 000000000..6cdbf4247
--- /dev/null
+++ b/spx-gui/src/app.css
@@ -0,0 +1,243 @@
+@import "./components/ui/global.css";
+@import "tailwindcss";
+
+@source "./**/*.{vue,ts,tsx,js,jsx,html}";
+
+/*
+ * Shared UILink component variants.
+ *
+ * These classes mirror the public variants used by src/components/ui/UILink.vue.
+ * Keep the interaction states aligned, but do not treat this file as the source of truth
+ * for the component implementation under src/components/ui/.
+ */
+@layer components {
+	.link-primary {
+		transition: color 0.1s;
+		color: var(--ui-color-primary-main);
+		text-decoration: none;
+
+		&:hover {
+			color: var(--ui-color-primary-400);
+		}
+
+		&:active {
+			color: var(--ui-color-primary-600);
+		}
+	}
+
+	.link-boring {
+		transition: color 0.1s;
+		color: inherit;
+
+		&:hover {
+			color: var(--ui-color-primary-main);
+		}
+
+		&:active {
+			color: var(--ui-color-primary-600);
+		}
+	}
+}
+
+/*
+ * Tailwind theme bridge for the existing UI token system.
+ *
+ * Source of truth:
+ * - token definitions live in src/components/ui/tokens/
+ * - UIConfigProvider exposes them as global --ui-* CSS variables
+ *
+ * This file maps those --ui-* variables into Tailwind theme tokens so template
+ * utilities can use semantic classes such as text-text and bg-primary-100.
+ */
+@theme {
+	/* Keep only the project's breakpoint names to avoid a parallel default scale. */
+	--breakpoint-*: initial;
+	--color-*: initial;
+	--shadow-*: initial;
+	--font-*: initial;
+	--text-*: initial;
+	--radius-*: initial;
+	--leading-*: initial;
+
+	/* Mirrors src/components/ui/responsive.ts. */
+	--breakpoint-tablet: 48rem;
+	--breakpoint-desktop: 80rem;
+	--breakpoint-desktop-large: 105rem;
+
+	/* Product palette and semantic color tokens bridged from global --ui-color-* vars. */
+	--color-turquoise-100: var(--ui-color-turquoise-100, #f3fcfd);
+	--color-turquoise-200: var(--ui-color-turquoise-200, #e7f9fa);
+	--color-turquoise-300: var(--ui-color-turquoise-300, #b5ebf0);
+	--color-turquoise-400: var(--ui-color-turquoise-400, #3fcdd9);
+	--color-turquoise-500: var(--ui-color-turquoise-500, #0bc0cf);
+	--color-turquoise-600: var(--ui-color-turquoise-600, #0eafbc);
+	--color-turquoise-700: var(--ui-color-turquoise-700, #0b8893);
+	--color-turquoise-main: var(--ui-color-turquoise-main, #0bc0cf);
+
+	--color-yellow-100: var(--ui-color-yellow-100, #fffaf5);
+	--color-yellow-200: var(--ui-color-yellow-200, #fff6eb);
+	--color-yellow-300: var(--ui-color-yellow-300, #fde2c0);
+	--color-yellow-400: var(--ui-color-yellow-400, #fbb45d);
+	--color-yellow-500: var(--ui-color-yellow-500, #faa135);
+	--color-yellow-600: var(--ui-color-yellow-600, #e49330);
+	--color-yellow-700: var(--ui-color-yellow-700, #b27226);
+	--color-yellow-main: var(--ui-color-yellow-main, #faa135);
+
+	--color-purple-100: var(--ui-color-purple-100, #faf8ff);
+	--color-purple-200: var(--ui-color-purple-200, #f6f1ff);
+	--color-purple-300: var(--ui-color-purple-300, #e2d4ff);
+	--color-purple-400: var(--ui-color-purple-400, #b390ff);
+	--color-purple-500: var(--ui-color-purple-500, #a074ff);
+	--color-purple-600: var(--ui-color-purple-600, #926ae8);
+	--color-purple-700: var(--ui-color-purple-700, #7252b5);
+	--color-purple-main: var(--ui-color-purple-main, #a074ff);
+
+	--color-blue-100: var(--ui-color-blue-100, #f4faff);
+	--color-blue-200: var(--ui-color-blue-200, #e9f5ff);
+	--color-blue-300: var(--ui-color-blue-300, #bae1fe);
+	--color-blue-400: var(--ui-color-blue-400, #4db2fd);
+	--color-blue-500: var(--ui-color-blue-500, #219ffc);
+	--color-blue-600: var(--ui-color-blue-600, #1e91e5);
+	--color-blue-700: var(--ui-color-blue-700, #1771b3);
+	--color-blue-main: var(--ui-color-blue-main, #219ffc);
+
+	--color-red-100: var(--ui-color-red-100, #feefef);
+	--color-red-200: var(--ui-color-red-200, #fdc7c7);
+	--color-red-300: var(--ui-color-red-300, #ff97a0);
+	--color-red-400: var(--ui-color-red-400, #f15d64);
+	--color-red-500: var(--ui-color-red-500, #ef4149);
+	--color-red-600: var(--ui-color-red-600, #bc292e);
+	--color-red-main: var(--ui-color-red-main, #ef4149);
+
+	--color-green-100: var(--ui-color-green-100, #e0f8e3);
+	--color-green-200: var(--ui-color-green-200, #cbf1cd);
+	--color-green-300: var(--ui-color-green-300, #b0ea90);
+	--color-green-400: var(--ui-color-green-400, #90e05a);
+	--color-green-500: var(--ui-color-green-500, #63ce29);
+	--color-green-600: var(--ui-color-green-600, #3ca80c);
+	--color-green-main: var(--ui-color-green-main, #63ce29);
+
+	--color-grey-100: var(--ui-color-grey-100, #ffffff);
+	--color-grey-200: var(--ui-color-grey-200, #fbfcfd);
+	--color-grey-300: var(--ui-color-grey-300, #f6f8fa);
+	--color-grey-400: var(--ui-color-grey-400, #eaeff3);
+	--color-grey-500: var(--ui-color-grey-500, #d9dfe5);
+	--color-grey-600: var(--ui-color-grey-600, #cbd2d8);
+	--color-grey-700: var(--ui-color-grey-700, #a7b1bb);
+	--color-grey-800: var(--ui-color-grey-800, #6e7781);
+	--color-grey-900: var(--ui-color-grey-900, #57606a);
+	--color-grey-1000: var(--ui-color-grey-1000, #24292f);
+
+	--color-primary-100: var(--ui-color-primary-100, #f3fcfd);
+	--color-primary-200: var(--ui-color-primary-200, #e7f9fa);
+	--color-primary-300: var(--ui-color-primary-300, #b5ebf0);
+	--color-primary-400: var(--ui-color-primary-400, #3fcdd9);
+	--color-primary-500: var(--ui-color-primary-500, #0bc0cf);
+	--color-primary-600: var(--ui-color-primary-600, #0eafbc);
+	--color-primary-700: var(--ui-color-primary-700, #0b8893);
+	--color-primary-main: var(--ui-color-primary-main, #0bc0cf);
+
+	--color-sprite-100: var(--ui-color-sprite-100, #fffaf5);
+	--color-sprite-200: var(--ui-color-sprite-200, #fff6eb);
+	--color-sprite-300: var(--ui-color-sprite-300, #fde2c0);
+	--color-sprite-400: var(--ui-color-sprite-400, #fbb45d);
+	--color-sprite-500: var(--ui-color-sprite-500, #faa135);
+	--color-sprite-600: var(--ui-color-sprite-600, #e49330);
+	--color-sprite-700: var(--ui-color-sprite-700, #b27226);
+	--color-sprite-main: var(--ui-color-sprite-main, #faa135);
+	--color-sprite-bg-selected: var(--ui-color-sprite-bg-selected, #fff6eb);
+
+	--color-sound-100: var(--ui-color-sound-100, #f4faff);
+	--color-sound-200: var(--ui-color-sound-200, #e9f5ff);
+	--color-sound-300: var(--ui-color-sound-300, #bae1fe);
+	--color-sound-400: var(--ui-color-sound-400, #4db2fd);
+	--color-sound-500: var(--ui-color-sound-500, #219ffc);
+	--color-sound-600: var(--ui-color-sound-600, #1e91e5);
+	--color-sound-700: var(--ui-color-sound-700, #1771b3);
+	--color-sound-main: var(--ui-color-sound-main, #219ffc);
+	--color-sound-bg-selected: var(--ui-color-sound-bg-selected, #e9f5ff);
+
+	--color-stage-100: var(--ui-color-stage-100, #f4faff);
+	--color-stage-200: var(--ui-color-stage-200, #e9f5ff);
+	--color-stage-300: var(--ui-color-stage-300, #bae1fe);
+	--color-stage-400: var(--ui-color-stage-400, #4db2fd);
+	--color-stage-500: var(--ui-color-stage-500, #219ffc);
+	--color-stage-600: var(--ui-color-stage-600, #1e91e5);
+	--color-stage-700: var(--ui-color-stage-700, #1771b3);
+	--color-stage-main: var(--ui-color-stage-main, #219ffc);
+	--color-stage-bg-selected: var(--ui-color-stage-bg-selected, #e9f5ff);
+
+	--color-danger-100: var(--ui-color-danger-100, #feefef);
+	--color-danger-200: var(--ui-color-danger-200, #fdc7c7);
+	--color-danger-300: var(--ui-color-danger-300, #ff97a0);
+	--color-danger-400: var(--ui-color-danger-400, #f15d64);
+	--color-danger-500: var(--ui-color-danger-500, #ef4149);
+	--color-danger-600: var(--ui-color-danger-600, #bc292e);
+	--color-danger-main: var(--ui-color-danger-main, #ef4149);
+
+	--color-success-100: var(--ui-color-success-100, #e0f8e3);
+	--color-success-200: var(--ui-color-success-200, #cbf1cd);
+	--color-success-300: var(--ui-color-success-300, #b0ea90);
+	--color-success-400: var(--ui-color-success-400, #90e05a);
+	--color-success-500: var(--ui-color-success-500, #63ce29);
+	--color-success-600: var(--ui-color-success-600, #3ca80c);
+	--color-success-main: var(--ui-color-success-main, #63ce29);
+
+	--color-disabled-bg: var(--ui-color-disabled-bg, #f6f8fa);
+	--color-disabled-text: var(--ui-color-disabled-text, #cbd2d8);
+	--color-title: var(--ui-color-title, #24292f);
+	--color-text: var(--ui-color-text, #57606a);
+	--color-hint-1: var(--ui-color-hint-1, #6e7781);
+	--color-hint-2: var(--ui-color-hint-2, #a7b1bb);
+	--color-dividing-line-1: var(--ui-color-dividing-line-1, #d9dfe5);
+	--color-dividing-line-2: var(--ui-color-dividing-line-2, #eaeff3);
+	--color-border: var(--ui-color-border, #cbd2d8);
+
+	/* Typography tokens bridged from the UI token layer. */
+	--font-sans: var(
+		--ui-font-family-main,
+		AlibabaHealthB,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		'Helvetica Neue',
+		Arial,
+		'Noto Sans',
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji',
+		'Segoe UI Symbol',
+		'Noto Color Emoji'
+	);
+	--font-mono: var(--ui-font-family-code, Menlo, Monaco, 'Courier New', monospace);
+	--font-main: var(--font-sans);
+	--font-code: var(--font-mono);
+
+	/* Radius and shadow tokens bridged from the UI token layer. */
+	--radius-none: 0px;
+	--radius-full: 9999px;
+	--radius-1: var(--ui-border-radius-1, 8px);
+	--radius-2: var(--ui-border-radius-2, 12px);
+	--radius-3: var(--ui-border-radius-3, 20px);
+
+	--shadow-none: 0 0 #0000;
+	--shadow-small: var(--ui-box-shadow-small, 0px 2px 8px 0px rgba(51, 51, 51, 0.08));
+	--shadow-big: var(--ui-box-shadow-big, 0px 4px 24px 0px rgba(36, 41, 47, 0.08));
+	--shadow-diffusion: var(--ui-box-shadow-diffusion, 0px 4px 12px 0px #d0f2f8);
+
+	/* Shared spacing and text-size helpers bridged for utility-class authoring. */
+	--leading-1: var(--ui-line-height-1, 26px);
+	--leading-2: var(--ui-line-height-2, 32px);
+	--leading-3: var(--ui-line-height-3, 40px);
+
+	--spacing-middle: var(--ui-gap-middle, 16px);
+	--spacing-large: var(--ui-gap-large, 24px);
+
+	--text-body: var(--ui-font-size-text, 14px);
+	--text-body--line-height: 1.57143;
+	--text-15: 15px;
+	--text-15--line-height: 1.5;
+	--text-20: 20px;
+	--text-20--line-height: 1.5;
+}
diff --git a/spx-gui/src/components/common/RouterUILink.vue b/spx-gui/src/components/common/RouterUILink.vue
index d8d653a1b..d1800f025 100644
--- a/spx-gui/src/components/common/RouterUILink.vue
+++ b/spx-gui/src/components/common/RouterUILink.vue
@@ -1,6 +1,7 @@
 <!-- RouterLink + UILink -->
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { RouterLink, type RouterLinkProps } from 'vue-router'
 
 const props = withDefaults(
@@ -13,23 +14,12 @@ const props = withDefaults(
     type: 'primary'
   }
 )
+
+const linkClass = computed(() => (props.type === 'primary' ? 'link-primary' : 'link-boring'))
 </script>
 
 <template>
-  <RouterLink v-bind="props" class="router-ui-link" :class="`type-${type}`">
+  <RouterLink v-bind="props" :class="linkClass">
     <slot />
   </RouterLink>
 </template>
-
-<style lang="scss" scoped>
-@import '@/components/ui/link.scss';
-
-.router-ui-link {
-  &.type-primary {
-    @include link(primary);
-  }
-  &.type-boring {
-    @include link(boring);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/community/CenteredWrapper.vue b/spx-gui/src/components/community/CenteredWrapper.vue
index 1e3418da7..fb48854b9 100644
--- a/spx-gui/src/components/community/CenteredWrapper.vue
+++ b/spx-gui/src/components/community/CenteredWrapper.vue
@@ -1,14 +1,10 @@
-<template>
-  <section class="centered" :class="`size-${size}`">
-    <slot></slot>
-  </section>
-</template>
-
 <script setup lang="ts">
+import { computed } from 'vue'
+
 // different size of centered-content for different pages
 type Size = 'medium' | 'large'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     size?: Size
   }>(),
@@ -16,28 +12,12 @@ withDefaults(
     size: 'medium'
   }
 )
-</script>
-
-<style scoped lang="scss">
-@import '@/components/ui/responsive';
 
-.centered {
-  position: relative;
-  margin-left: auto;
-  margin-right: auto;
-
-  &.size-medium {
-    width: 988px;
-    @include responsive(desktop-large) {
-      width: 1240px;
-    }
-  }
+const widthClass = computed(() => (props.size === 'large' ? 'w-310 desktop-large:w-373' : 'w-247 desktop-large:w-310'))
+</script>
 
-  &.size-large {
-    width: 1240px;
-    @include responsive(desktop-large) {
-      width: 1492px;
-    }
-  }
-}
-</style>
+<template>
+  <section class="relative mx-auto self-center" :class="widthClass">
+    <slot></slot>
+  </section>
+</template>
diff --git a/spx-gui/src/components/community/CommunityCard.vue b/spx-gui/src/components/community/CommunityCard.vue
index f6b8b9ffc..254043f02 100644
--- a/spx-gui/src/components/community/CommunityCard.vue
+++ b/spx-gui/src/components/community/CommunityCard.vue
@@ -10,8 +10,9 @@
 import { UICard } from '@/components/ui'
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .community-card {
+  /* TODO: review this shadow value before promoting it into a shared token. */
   box-shadow: 0px 2px 4px 0px rgba(36, 41, 47, 0.05);
 }
 </style>
diff --git a/spx-gui/src/components/community/CommunityHeader.vue b/spx-gui/src/components/community/CommunityHeader.vue
index ad56bed8d..3eadb3a0d 100644
--- a/spx-gui/src/components/community/CommunityHeader.vue
+++ b/spx-gui/src/components/community/CommunityHeader.vue
@@ -1,12 +1,12 @@
 <!-- Simple header component for pages like search & explore -->
 
 <template>
-  <section class="header">
-    <CenteredWrapper class="header-content">
-      <h1 class="title">
+  <section class="flex-none bg-grey-100">
+    <CenteredWrapper class="flex h-16 items-center justify-between gap-5">
+      <h1 class="min-w-0 flex-1 truncate text-body leading-1 text-title">
         <slot></slot>
       </h1>
-      <label class="options">
+      <label class="shrink-0">
         <slot name="options"></slot>
       </label>
     </CenteredWrapper>
@@ -16,32 +16,3 @@
 <script setup lang="ts">
 import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
 </script>
-
-<style lang="scss" scoped>
-@import '@/utils/utils';
-
-.header {
-  flex: 0 0 auto;
-  background-color: var(--ui-color-grey-100);
-}
-
-.header-content {
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-
-  .title {
-    flex: 1 1 0;
-    @include text-ellipsis;
-    line-height: 26px;
-    font-size: 16px;
-    color: var(--ui-color-title);
-  }
-
-  .options {
-    flex: 0 0 auto;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
index f1cd948eb..363043644 100644
--- a/spx-gui/src/components/community/ProjectsSection.vue
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -1,27 +1,30 @@
 <!-- Project list as a section -->
 
 <template>
-  <section :class="`context-${context}`" :style="{ '--project-num-in-row': numInRow }">
-    <header class="header">
-      <h2 class="title">
+  <section :style="{ '--project-num-in-row': numInRow }">
+    <header class="flex items-center justify-between" :class="isUserContext ? 'h-15 pt-5 pb-2' : 'h-13'">
+      <h2 class="text-title" :class="isUserContext ? 'text-body leading-1' : 'text-20 leading-7'">
         <slot name="title"></slot>
       </h2>
       <RouterUILink
         v-if="linkTo != null"
         v-radar="{ name: 'Link to more', desc: 'Link to more similar projects' }"
-        class="link"
+        class="flex items-center text-15"
         :to="linkTo"
       >
         <slot name="link"></slot>
-        <UIIcon class="link-icon" type="arrowRightSmall" />
+        <UIIcon class="ml-2 h-5 w-5" type="arrowRightSmall" />
       </RouterUILink>
     </header>
-    <div class="projects-wrapper">
+    <div class="projects-wrapper relative mt-2" :class="isUserContext ? 'mb-4' : 'mb-8'">
       <ListResultWrapper content-type="project" :query-ret="queryRet" :height="254">
         <template v-if="!!slots.empty" #empty="emptyProps">
           <slot name="empty" v-bind="emptyProps"></slot>
         </template>
-        <ul class="projects">
+        <ul
+          class="grid grid-cols-[repeat(var(--project-num-in-row),minmax(0,1fr))]"
+          :class="isUserContext ? 'gap-4' : 'gap-5'"
+        >
           <slot></slot>
         </ul>
       </ListResultWrapper>
@@ -30,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 import type { QueryRet } from '@/utils/query'
 import { UIIcon } from '@/components/ui'
 import ListResultWrapper from '../common/ListResultWrapper.vue'
@@ -44,7 +47,7 @@ import RouterUILink from '../common/RouterUILink.vue'
  */
 type Context = 'home' | 'user' | 'project'
 
-defineProps<{
+const props = defineProps<{
   linkTo?: string | null
   queryRet: QueryRet<unknown[] | null>
   context: Context
@@ -52,64 +55,12 @@ defineProps<{
 }>()
 
 const slots = useSlots()
+const isUserContext = computed(() => props.context === 'user')
 </script>
 
-<style lang="scss" scoped>
-.header {
-  height: 52px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .title {
-    line-height: 28px;
-    font-size: 20px;
-    color: var(--ui-color-title);
-  }
-
-  .link {
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-  }
-
-  .link-icon {
-    margin-left: 8px;
-    width: 20px;
-    height: 20px;
-  }
-}
-
-.projects-wrapper {
-  margin: 8px 0 32px;
-  position: relative;
-
-  &:not(:has(.projects)) {
-    background-color: var(--ui-color-grey-100);
-    border-radius: var(--ui-border-radius-2);
-  }
-}
-
-.projects {
-  display: grid;
-  grid-template-columns: repeat(var(--project-num-in-row), 1fr);
-  gap: 20px;
-}
-
-.context-user {
-  .header {
-    height: 60px;
-    padding: 20px 0 8px;
-  }
-  .title {
-    font-size: 16px;
-    line-height: 26px;
-  }
-  .projects-wrapper {
-    margin: 8px 0 16px;
-  }
-  .projects {
-    gap: 16px;
-  }
+<style scoped>
+.projects-wrapper:not(:has(.projects)) {
+  background-color: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
 }
 </style>
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebar.vue b/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
index 79955c977..0fa56060a 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
@@ -9,7 +9,10 @@ defineProps<{
 </script>
 
 <template>
-  <CommunityCard v-radar="{ name: 'User sidebar', desc: 'Sidebar navigation for user pages' }" class="user-sidebar">
+  <CommunityCard
+    v-radar="{ name: 'User sidebar', desc: 'Sidebar navigation for user pages' }"
+    class="flex w-53 flex-col gap-1 p-2 desktop-large:w-54"
+  >
     <!-- TODO: check text here -->
     <UserSidebarItem
       v-radar="{ name: 'Overview link', desc: 'Click to navigate to user overview' }"
@@ -94,19 +97,3 @@ defineProps<{
     </UserSidebarItem>
   </CommunityCard>
 </template>
-
-<style lang="scss" scoped>
-@import '@/components/ui/responsive';
-
-.user-sidebar {
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  width: 212px;
-  @include responsive(desktop-large) {
-    width: 216px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
index e0392026a..3239fc7ef 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
@@ -7,71 +7,36 @@ defineProps<{
 </script>
 
 <template>
-  <RouterLink class="user-sidebar-item" exact-active-class="active" :to="to">
-    <i class="icon-bg" />
-    <span class="content">
+  <RouterLink
+    class="user-sidebar-item relative flex items-center rounded-2 p-3 no-underline transition-all duration-100"
+    exact-active-class="active"
+    :to="to"
+  >
+    <i class="icon-bg absolute left-3 top-3.5 h-4.25 w-4.25 rounded-full transition-all duration-100" />
+    <span
+      class="relative flex-1 pl-6.5 text-[13px] leading-5 [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-1/2 [&_svg]:z-1 [&_svg]:-translate-y-1/2"
+    >
       <slot></slot>
     </span>
-    <UIIcon class="arrow" type="arrowAlt" />
+    <UIIcon class="h-3 w-3 flex-none rotate-90 text-grey-800" type="arrowAlt" />
   </RouterLink>
 </template>
 
-<style lang="scss" scoped>
-@import '@/utils/utils';
-
+<style scoped>
 .user-sidebar-item {
-  padding: 12px;
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  border-radius: 12px;
   color: var(--ui-color-text);
-  text-decoration: none;
-  transition: 0.1s;
-
-  .icon-bg {
-    position: absolute;
-    left: 12px;
-    top: 14px;
-    width: 17px;
-    height: 17px;
-    border-radius: 50%;
-    background: var(--ui-color-grey-500);
-    transition: 0.1s;
-  }
-
-  &.active {
-    color: var(--ui-color-primary-main);
-    background: var(--ui-color-primary-100);
-
-    .icon-bg {
-      background: var(--ui-color-primary-300);
-    }
-  }
 }
 
-.content {
-  position: relative;
-  padding-left: 26px;
-  flex: 1 1 0;
-  font-size: 13px;
-  line-height: 20px;
+.icon-bg {
+  background: var(--ui-color-grey-500);
+}
 
-  :deep(svg) {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-  }
+.user-sidebar-item.active {
+  color: var(--ui-color-primary-main);
+  background: var(--ui-color-primary-100);
 }
 
-.arrow {
-  flex: 0 0 auto;
-  width: 12px;
-  height: 12px;
-  transform: rotate(90deg);
-  color: var(--ui-color-grey-800);
+.user-sidebar-item.active .icon-bg {
+  background: var(--ui-color-primary-300);
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/CodeLink.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/CodeLink.vue
index fd19ba463..0cfcc0dd4 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/CodeLink.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/CodeLink.vue
@@ -73,7 +73,7 @@ const handleClick = useMessageHandle(
 </script>
 
 <template>
-  <a class="code-link" href="javascript:;" @click.prevent="handleClick">
+  <a class="link-boring" href="javascript:;" @click.prevent="handleClick">
     <template v-if="!!slots.default">
       <slot></slot>
     </template>
@@ -82,11 +82,3 @@ const handleClick = useMessageHandle(
     </template>
   </a>
 </template>
-
-<style lang="scss" scoped>
-@import '@/components/ui/link.scss';
-
-.code-link {
-  @include link(boring);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
index 419bb5bb0..9d5c4fbea 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
@@ -40,45 +40,14 @@ watchEffect(() => {
 </script>
 
 <template>
-  <li ref="wrapperRef" class="completion-item" :class="{ active }" :title="item.label">
-    <code class="code"
-      ><span v-for="(part, i) in parts" :key="i" :class="{ matched: part.isMatched }">{{ part.content }}</span></code
+  <li
+    ref="wrapperRef"
+    class="flex min-w-24 max-w-42 cursor-pointer items-center rounded-1 p-1.75 text-xs text-grey-1000 hover:bg-grey-300"
+    :class="active ? 'bg-grey-400' : ''"
+    :title="item.label"
+  >
+    <code class="min-w-0 flex-1 truncate font-code"
+      ><span v-for="(part, i) in parts" :key="i" :class="part.isMatched ? 'text-primary-main' : ''">{{ part.content }}</span></code
     >
   </li>
 </template>
-
-<style lang="scss" scoped>
-@import '@/utils/utils';
-
-.completion-item {
-  min-width: 8em;
-  max-width: 14em;
-  display: flex;
-  align-items: center;
-  padding: 7px;
-  border-radius: var(--ui-border-radius-1);
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--ui-color-grey-1000);
-  &:hover {
-    background: var(--ui-color-grey-300);
-  }
-  &.active {
-    background: var(--ui-color-grey-400);
-  }
-}
-
-.icon {
-  margin-right: 8px;
-}
-
-.code {
-  flex: 1 1 0;
-  font-family: var(--ui-font-family-code);
-  @include text-ellipsis;
-}
-
-.matched {
-  color: var(--ui-color-primary-main);
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/MapEditor.vue b/spx-gui/src/components/editor/map-editor/MapEditor.vue
index 6626ccc93..98f8fedfc 100644
--- a/spx-gui/src/components/editor/map-editor/MapEditor.vue
+++ b/spx-gui/src/components/editor/map-editor/MapEditor.vue
@@ -26,14 +26,14 @@ function handleSpriteSelect(sprite: Sprite | null) {
 </script>
 
 <template>
-  <div class="body">
-    <div class="main">
+  <div class="flex flex-1 flex-row gap-middle">
+    <div class="flex w-0 min-w-0 flex-1 items-center justify-center">
       <MapViewer :project="project" :selected-sprite="selectedSprite" @update:selected-sprite="handleSpriteSelect" />
     </div>
-    <div class="sider">
+    <div class="flex basis-100 grow-0 shrink-0 flex-col gap-middle desktop-large:basis-124">
       <UICard>
         <UICardHeader>
-          <div class="collapse-header">
+          <div class="flex w-full items-center justify-between">
             {{
               $t({
                 en: 'Global Config',
@@ -43,8 +43,8 @@ function handleSpriteSelect(sprite: Sprite | null) {
             <UITooltip>
               <template #trigger>
                 <UIIcon
-                  class="collapse-icon"
-                  :class="{ collapsed }"
+                  class="ml-2 cursor-pointer transition-transform duration-300"
+                  :class="collapsed ? '-rotate-180' : ''"
                   type="doubleArrowDown"
                   @click="collapsed = !collapsed"
                 />
@@ -53,10 +53,10 @@ function handleSpriteSelect(sprite: Sprite | null) {
             </UITooltip>
           </div>
         </UICardHeader>
-        <MapBasicConfig v-if="!collapsed" class="map-config" :project="project" />
+        <MapBasicConfig v-if="!collapsed" class="p-4" :project="project" />
       </UICard>
       <SpritesPanel
-        class="sprite-list"
+        class="min-h-0 flex-1 basis-0"
         :project="project"
         :selected-sprite="selectedSprite"
         @update:selected-sprite="handleSpriteSelect"
@@ -64,56 +64,3 @@ function handleSpriteSelect(sprite: Sprite | null) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-@import '@/components/ui/responsive';
-
-.body {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: row;
-  gap: var(--ui-gap-middle);
-}
-.main {
-  flex: 1;
-  width: 0;
-  min-width: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.sider {
-  flex: 0 0 400px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-gap-middle);
-
-  @include responsive(desktop-large) {
-    flex-basis: 496px;
-  }
-
-  .collapse-header {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .collapse-icon {
-    transition: transform 0.3s;
-    margin-left: 8px;
-    cursor: pointer;
-
-    &.collapsed {
-      transform: rotate(-180deg);
-    }
-  }
-
-  .map-config {
-    padding: 16px;
-  }
-}
-.sprite-list {
-  flex: 1 1 0;
-}
-</style>
diff --git a/spx-gui/src/components/navbar/NavbarWrapper.vue b/spx-gui/src/components/navbar/NavbarWrapper.vue
index 5da57b48b..8b53de72e 100644
--- a/spx-gui/src/components/navbar/NavbarWrapper.vue
+++ b/spx-gui/src/components/navbar/NavbarWrapper.vue
@@ -1,14 +1,21 @@
 <template>
-  <nav v-radar="{ name: 'Navbar', desc: 'Top navigation bar' }" class="top-nav">
-    <div class="content" :class="{ centered }">
-      <div class="left">
+  <nav
+    v-radar="{ name: 'Navbar', desc: 'Top navigation bar' }"
+    class="flex w-full justify-center bg-primary-main bg-center bg-repeat text-grey-100 shadow-diffusion"
+    :style="{ backgroundImage: `url(${bgUrl})` }"
+  >
+    <div
+      class="flex h-12.5 w-full items-stretch justify-between gap-3"
+      :class="centered ? 'w-305 desktop-large:w-370' : 'w-full'"
+    >
+      <div class="flex basis-[30%]">
         <NavbarLogo />
         <slot name="left"></slot>
       </div>
-      <div class="center">
+      <div class="flex basis-[40%] items-center justify-center overflow-hidden">
         <slot name="center"></slot>
       </div>
-      <div class="right">
+      <div class="flex basis-[30%] justify-end">
         <slot name="right"></slot>
         <NavbarProfile />
       </div>
@@ -17,6 +24,7 @@
 </template>
 
 <script setup lang="ts">
+import bgUrl from './bg.svg'
 import NavbarLogo from './NavbarLogo.vue'
 import NavbarProfile from './NavbarProfile.vue'
 
@@ -34,53 +42,3 @@ withDefaults(
   }
 )
 </script>
-
-<style lang="scss" scoped>
-@import '@/components/ui/responsive';
-
-.top-nav {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  color: var(--ui-color-grey-100);
-  background-color: var(--ui-color-primary-main);
-  background-position: center;
-  background-repeat: repeat;
-  background-image: url(./bg.svg);
-  box-shadow: var(--ui-box-shadow-diffusion);
-}
-
-.content {
-  width: 100%;
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  gap: 12px;
-  height: 50px;
-
-  &.centered {
-    width: 1220px;
-    @include responsive(desktop-large) {
-      width: 1480px;
-    }
-  }
-}
-
-.left,
-.right {
-  flex-basis: 30%;
-  display: flex;
-}
-
-.center {
-  flex-basis: 40%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.right {
-  justify-content: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index a65d0ca5f..53037bde3 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -4,11 +4,14 @@
       name: `Project item \u0022${project.owner}/${project.name}\u0022`,
       desc: `Click to ${props.context === 'edit' ? 'edit' : 'view'} the project${operatable ? ', hover for more operations' : ''}`
     }"
-    class="project-item"
+    class="group w-58 flex-none overflow-hidden rounded-2 border border-grey-400 bg-grey-100 transition-all duration-100 hover:shadow-[0px_4px_12px_0px_rgba(36,41,47,0.08)]"
   >
-    <RouterLink class="link" :to="to" @click="emit('selected')">
-      <div class="thumbnail-wrapper">
-        <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
+    <RouterLink class="flex flex-col no-underline" :to="to" @click="emit('selected')">
+      <div
+        class="relative h-43 w-full bg-center bg-contain"
+        :style="{ backgroundImage: `url(${stageBgUrl})` }"
+      >
+        <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
         <UIDropdown v-if="operatable" trigger="click" placement="bottom-end">
           <template #trigger>
             <div
@@ -16,10 +19,10 @@
                 name: 'Project item operations',
                 desc: 'More operations (edit, remove) for project item, click to open the menu'
               }"
-              class="options"
+              class="invisible absolute top-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-grey-100 text-grey-800 opacity-0 transition-all duration-100 group-hover:visible group-hover:opacity-100 hover:bg-primary-main hover:text-grey-100"
               @click.stop.prevent
             >
-              <UIIcon class="icon" type="more" />
+              <UIIcon class="h-5.25 w-5.25" type="more" />
             </div>
           </template>
           <UIMenu>
@@ -31,9 +34,9 @@
             </UIMenuItem>
           </UIMenu>
         </UIDropdown>
-        <div v-if="context === 'public'" class="owner-avatar-wrapper">
+        <div v-if="context === 'public'" class="absolute -bottom-2.25 left-0 h-3.25 w-full bg-grey-100">
           <svg
-            class="avatar-bg"
+            class="absolute bottom-0 left-0"
             xmlns="http://www.w3.org/2000/svg"
             width="67"
             height="31"
@@ -47,17 +50,23 @@
           </svg>
           <UserAvatar
             v-radar="{ name: 'Project owner avatar', desc: 'Click to view profile of project owner' }"
-            class="owner-avatar"
+            class="absolute -bottom-0.5 left-3.5"
             size="small"
             :user="project.owner"
           />
         </div>
       </div>
-      <div class="info">
-        <div class="header">
-          <h5 class="display-name" :title="project.displayName">{{ project.displayName }}</h5>
+      <div class="p-middle">
+        <div class="flex items-center gap-1">
+          <h5 class="min-w-0 shrink truncate text-15 leading-6 text-title" :title="project.displayName">
+            {{ project.displayName }}
+          </h5>
           <template v-if="context !== 'public' && isOwner">
-            <i v-if="project.visibility === Visibility.Public" class="icon" :title="$t({ en: 'Public', zh: '公开' })">
+            <i
+              v-if="project.visibility === Visibility.Public"
+              class="h-4 w-4 flex-none"
+              :title="$t({ en: 'Public', zh: '公开' })"
+            >
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   fill-rule="evenodd"
@@ -80,7 +89,7 @@
                 </defs>
               </svg>
             </i>
-            <i v-else class="icon" :title="$t({ en: 'Private', zh: '私有' })">
+            <i v-else class="h-4 w-4 flex-none" :title="$t({ en: 'Private', zh: '私有' })">
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   fill-rule="evenodd"
@@ -96,12 +105,12 @@
             </i>
           </template>
         </div>
-        <p class="others">
-          <span class="part" :class="{ liking }" :title="$t(likesTitle)">
-            <UIIcon class="icon" type="heart" />
+        <p class="mt-1 flex h-5 gap-3 text-[13px] leading-5 text-grey-700">
+          <span class="flex flex-none items-center gap-1" :class="{ 'text-red-main': liking }" :title="$t(likesTitle)">
+            <UIIcon class="h-3.5 w-3.5" type="heart" />
             {{ $t(humanizeCount(project.likeCount)) }}
           </span>
-          <span class="part time" :title="$t(timeTitle)">
+          <span class="min-w-0 flex-1 truncate" :title="$t(timeTitle)">
             {{ $t(humanizeTime(project.updatedAt)) }}
           </span>
         </p>
@@ -123,6 +132,7 @@ import {
 } from '@/utils/utils'
 import { getProjectEditorRoute, getProjectPageRoute } from '@/router'
 import { Visibility, type ProjectData } from '@/apis/project'
+import stageBgUrl from '@/assets/images/stage-bg.svg'
 import { createFileWithUniversalUrl, getPublishedContent } from '@/models/common/cloud'
 import { useSignedInUser } from '@/stores/user'
 import { useIsLikingProject } from '@/stores/liking'
@@ -207,149 +217,3 @@ const handleRemove = useMessageHandle(
   { en: 'Failed to remove project', zh: '删除项目失败' }
 ).fn
 </script>
-
-<style lang="scss" scoped>
-@import '@/utils/utils';
-
-.project-item {
-  width: 232px;
-  flex: 0 0 auto;
-  overflow: hidden;
-  border-radius: var(--ui-border-radius-2);
-  border: 1px solid var(--ui-color-grey-400);
-  background-color: var(--ui-color-grey-100);
-  transition: 0.1s;
-}
-
-.link {
-  display: flex;
-  flex-direction: column;
-  text-decoration: none;
-}
-
-.thumbnail-wrapper {
-  position: relative;
-  width: 100%;
-  height: 172px;
-  background-position: center;
-  background-size: contain;
-  background-image: url(@/assets/images/stage-bg.svg);
-
-  .thumbnail {
-    width: 100%;
-    height: 100%;
-  }
-
-  .options {
-    opacity: 0;
-    visibility: hidden;
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    color: var(--ui-color-grey-800);
-    background-color: var(--ui-color-grey-100);
-    cursor: pointer;
-    transition: 0.1s;
-
-    &:hover {
-      color: var(--ui-color-grey-100);
-      background-color: var(--ui-color-primary-main);
-    }
-
-    .icon {
-      width: 21px;
-      height: 21px;
-    }
-  }
-
-  .owner-avatar-wrapper {
-    position: absolute;
-    bottom: -9px;
-    left: 0;
-    width: 100%;
-    height: 13px;
-    background-color: var(--ui-color-grey-100);
-
-    .avatar-bg {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
-
-    .owner-avatar {
-      position: absolute;
-      bottom: -2px;
-      left: 14px;
-    }
-  }
-}
-
-.project-item:hover {
-  box-shadow: 0px 4px 12px 0px rgba(36, 41, 47, 0.08);
-  .options {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
-.info {
-  padding: var(--ui-gap-middle);
-
-  .header {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    .display-name {
-      flex: 0 1 auto;
-      font-size: 15px;
-      line-height: 24px;
-      color: var(--ui-color-title);
-      @include text-ellipsis;
-    }
-
-    .icon {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  .others {
-    margin-top: 4px;
-    display: flex;
-    height: 20px;
-    gap: 12px;
-    font-size: 13px;
-    line-height: 20px;
-    color: var(--ui-color-grey-700);
-
-    .part {
-      flex: 0 0 auto;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-      .icon {
-        width: 14px;
-        height: 14px;
-      }
-
-      &.liking {
-        color: var(--ui-color-red-main);
-      }
-
-      &.time {
-        flex: 1 1 auto;
-        display: block; // text-ellipsis does not work on `display: flex` elements
-        @include text-ellipsis;
-      }
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/tutorials/CourseSeriesItem.vue b/spx-gui/src/components/tutorials/CourseSeriesItem.vue
index e3bcd3fbb..28d5d02aa 100644
--- a/spx-gui/src/components/tutorials/CourseSeriesItem.vue
+++ b/spx-gui/src/components/tutorials/CourseSeriesItem.vue
@@ -3,8 +3,9 @@ export const courseSeriesItemHeight = 214
 </script>
 
 <script lang="ts" setup>
-import { UIImg } from '@/components/ui'
 import type { CourseSeries } from '@/apis/course-series'
+import stageBgUrl from '@/assets/images/stage-bg.svg'
+import { UIImg } from '@/components/ui'
 import { useAsyncComputed } from '@/utils/utils'
 import { createFileWithUniversalUrl } from '@/models/common/cloud'
 
@@ -26,50 +27,17 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
       name: `Course series item \u0022${props.courseSeries.title}\u0022`,
       desc: 'Click to view the course series'
     }"
-    class="course-series-item"
-    :style="{ height: `${courseSeriesItemHeight}px` }"
+    class="relative h-53.5 w-58 overflow-hidden rounded-3 transition-all duration-200 hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
+    :style="{ backgroundImage: `url(${stageBgUrl})` }"
   >
     <RouterLink :to="`/course-series/${props.courseSeries.id}`">
-      <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
-      <div class="title">{{ courseSeries.title }}</div>
+      <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
+      <div
+        class="absolute bottom-0 h-10 w-full overflow-hidden whitespace-nowrap px-4 text-15 leading-10 text-grey-100 text-ellipsis"
+        :style="{ background: 'rgb(from var(--ui-color-grey-1000) r g b / 0.2)' }"
+      >
+        {{ courseSeries.title }}
+      </div>
     </RouterLink>
   </li>
 </template>
-
-<style lang="scss" scoped>
-.course-series-item {
-  position: relative;
-  width: 232px;
-  border-radius: var(--ui-border-radius-3);
-  transition: all 0.2s;
-  overflow: hidden;
-  // TODO: Temporary background, replace with the latest assets
-  background-image: url(@/assets/images/stage-bg.svg);
-
-  &:hover {
-    cursor: pointer;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  }
-
-  .thumbnail {
-    width: 100%;
-    height: 100%;
-  }
-
-  .title {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    font-size: 15px;
-    line-height: 40px;
-    padding: 0 16px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    color: var(--ui-color-grey-100);
-    background: rgb(from var(--ui-color-grey-1000) r g b / 0.2);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/tutorials/TutorialsBanner.vue b/spx-gui/src/components/tutorials/TutorialsBanner.vue
index 306c9c3ed..016643863 100644
--- a/spx-gui/src/components/tutorials/TutorialsBanner.vue
+++ b/spx-gui/src/components/tutorials/TutorialsBanner.vue
@@ -1,63 +1,28 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { useI18n } from '@/utils/i18n'
 
 const i18n = useI18n()
+
+const bannerTextClass = computed(() =>
+  i18n.lang.value === 'zh' ? 'translate-x-[70%] -translate-y-[80%]' : '-translate-y-[80%]'
+)
 </script>
 
 <template>
-  <div class="tutorials-banner-wrapper">
-    <div class="banner">
-      <img src="@/components/tutorials/banner.png" alt="Tutorials Banner" class="banner-image" />
+  <div class="relative flex items-center justify-center">
+    <div class="overflow-hidden">
+      <img
+        src="@/components/tutorials/banner.png"
+        alt="Tutorials Banner"
+        class="h-85 w-full object-cover object-center"
+      />
     </div>
-    <div class="banner-text" :lang="i18n.lang.value">
-      <div class="title">{{ $t({ en: 'Explore the User Tutorial', zh: '探索用户教程' }) }}</div>
-      <div class="des">
-        {{ $t({ en: 'Learn XBuilder and improve programming skills', zh: '学习 XBuilder，提高编程技能' }) }}
+    <div class="absolute left-1/2 top-1/2 whitespace-nowrap text-[#006375]" :class="bannerTextClass">
+      <div class="text-[36px]">{{ $t({ en: 'Explore the User Tutorial', zh: '探索用户教程' }) }}</div>
+      <div class="mt-2 text-[18px]">
+      {{ $t({ en: 'Learn XBuilder and improve programming skills', zh: '学习 XBuilder，提高编程技能' }) }}
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.tutorials-banner-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-
-  .banner {
-    overflow: hidden;
-
-    .banner-image {
-      height: 340px;
-      width: 100%;
-      object-fit: cover;
-      object-position: center;
-    }
-  }
-
-  .banner-text {
-    position: absolute;
-    white-space: nowrap;
-    top: 50%;
-    left: 50%;
-    color: #006375;
-
-    .title {
-      font-size: 36px;
-    }
-
-    .des {
-      font-size: 18px;
-      margin-top: 8px;
-    }
-
-    &[lang='en'] {
-      transform: translate(0%, -80%);
-    }
-    &[lang='zh'] {
-      transform: translate(70%, -80%);
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/UILink.vue b/spx-gui/src/components/ui/UILink.vue
index 41e37ba8a..7cd229300 100644
--- a/spx-gui/src/components/ui/UILink.vue
+++ b/spx-gui/src/components/ui/UILink.vue
@@ -18,14 +18,32 @@ withDefaults(
 </template>
 
 <style lang="scss" scoped>
-@import './link.scss';
-
 .ui-link {
+  transition: color 0.1s;
+
   &.type-primary {
-    @include link(primary);
+    color: var(--ui-color-primary-main);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--ui-color-primary-400);
+    }
+
+    &:active {
+      color: var(--ui-color-primary-600);
+    }
   }
+
   &.type-boring {
-    @include link(boring);
+    color: inherit;
+
+    &:hover {
+      color: var(--ui-color-primary-main);
+    }
+
+    &:active {
+      color: var(--ui-color-primary-600);
+    }
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/global.css b/spx-gui/src/components/ui/global.css
new file mode 100644
index 000000000..34e65297e
--- /dev/null
+++ b/spx-gui/src/components/ui/global.css
@@ -0,0 +1,18 @@
+@import './reset.css' layer(base);
+
+@layer base {
+	*,
+	::before,
+	::after {
+		box-sizing: border-box;
+	}
+
+	button {
+		font-family: inherit;
+	}
+}
+
+@font-face {
+	font-family: 'AlibabaHealthB';
+	src: url('./fonts/AlibabaHealthFont2.0CN-85B.ttf') format('truetype');
+}
\ No newline at end of file
diff --git a/spx-gui/src/components/ui/global.scss b/spx-gui/src/components/ui/global.scss
deleted file mode 100644
index 9d922db14..000000000
--- a/spx-gui/src/components/ui/global.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import './reset.css';
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-button {
-  font-family: inherit;
-}
-
-@font-face {
-  font-family: 'AlibabaHealthB';
-  src: url('./fonts/AlibabaHealthFont2.0CN-85B.ttf') format('truetype');
-}
diff --git a/spx-gui/src/components/ui/link.scss b/spx-gui/src/components/ui/link.scss
deleted file mode 100644
index effea58f0..000000000
--- a/spx-gui/src/components/ui/link.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@mixin link($type) {
-  transition: 0.1s;
-
-  @if $type == primary {
-    color: var(--ui-color-primary-main);
-    text-decoration: none;
-
-    &:hover {
-      color: var(--ui-color-primary-400);
-    }
-    &:active {
-      color: var(--ui-color-primary-600);
-    }
-  } @else if $type == boring {
-    color: inherit;
-
-    &:hover {
-      color: var(--ui-color-primary-main);
-    }
-    &:active {
-      color: var(--ui-color-primary-600);
-    }
-  }
-}
diff --git a/spx-gui/src/components/ui/responsive.scss b/spx-gui/src/components/ui/responsive.scss
deleted file mode 100644
index 5ad45a0e1..000000000
--- a/spx-gui/src/components/ui/responsive.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// definition for responsive mixin
-
-@mixin responsive($size) {
-  // NOTE: remember to keep these values in sync with the breakpoints in ./responsive.ts
-  @if $size == mobile {
-    @media (max-width: 767px) {
-      @content;
-    }
-  } @else if $size == tablet {
-    @media (min-width: 768px) and (max-width: 1279px) {
-      @content;
-    }
-  } @else if $size == desktop {
-    @media (min-width: 1280px) and (max-width: 1679px) {
-      @content;
-    }
-  } @else if $size == desktop-large {
-    @media (min-width: 1680px) {
-      @content;
-    }
-  }
-}
diff --git a/spx-gui/src/components/ui/responsive.ts b/spx-gui/src/components/ui/responsive.ts
index 27624afb9..3596844bd 100644
--- a/spx-gui/src/components/ui/responsive.ts
+++ b/spx-gui/src/components/ui/responsive.ts
@@ -5,7 +5,7 @@ export type ReponsiveSize = 'mobile' | 'tablet' | 'desktop' | 'desktop-large'
 function getQuery(size: ReponsiveSize) {
   let query: string
   switch (size) {
-    // NOTE: remember to keep these values in sync with the breakpoints in ./responsive.scss
+    // NOTE: remember to keep these values in sync with the breakpoints in @/app.css
     case 'mobile':
       query = '(max-width: 767px)'
       break
diff --git a/spx-gui/src/main.ts b/spx-gui/src/main.ts
index a9316e80c..d76881e1c 100644
--- a/spx-gui/src/main.ts
+++ b/spx-gui/src/main.ts
@@ -1,4 +1,5 @@
 import './polyfills'
+import './app.css'
 import { createApp, watchEffect, type App as VueApp } from 'vue'
 import * as Sentry from '@sentry/vue'
 import type { Router } from 'vue-router'
diff --git a/spx-gui/src/pages/404/index.vue b/spx-gui/src/pages/404/index.vue
index 8c5e3fb42..1d2c0c4e2 100644
--- a/spx-gui/src/pages/404/index.vue
+++ b/spx-gui/src/pages/404/index.vue
@@ -10,15 +10,20 @@ const router = useRouter()
 </script>
 
 <template>
-  <div v-radar="{ name: '404 page', desc: 'Displayed when a page is not found' }" class="not-found">
+  <div
+    v-radar="{ name: '404 page', desc: 'Displayed when a page is not found' }"
+    class="bg-grey-200 flex h-full flex-col"
+  >
     <CommunityNavbar />
-    <div class="content">
+    <div class="flex w-full flex-1 flex-col items-center justify-center gap-4">
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div v-html="errorSvg"></div>
-      <p class="tips">{{ $t({ en: 'Page not found', zh: '页面未找到' }) }}</p>
+      <p class="text-20 text-grey-1000 font-semibold">
+        {{ $t({ en: 'Page not found', zh: '页面未找到' }) }}
+      </p>
       <UIButton
         v-radar="{ name: '404 go home button', desc: 'Button to go back to home page' }"
-        class="go-home"
+        class="mt-4 h-9 text-[15px]"
         @click="router.push('/')"
         >{{ $t({ en: 'Return to home page', zh: '回到首页' }) }}</UIButton
       >
@@ -26,34 +31,3 @@ const router = useRouter()
     <CommunityFooter />
   </div>
 </template>
-
-<style scoped lang="scss">
-.not-found {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: var(--ui-color-grey-200);
-}
-
-.content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-}
-
-.tips {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--ui-color-grey-1000);
-}
-
-.go-home {
-  height: 36px;
-  font-size: 15px;
-  margin-top: 16px;
-}
-</style>
diff --git a/spx-gui/src/pages/community/explore.vue b/spx-gui/src/pages/community/explore.vue
index eddb43af2..0a51e5127 100644
--- a/spx-gui/src/pages/community/explore.vue
+++ b/spx-gui/src/pages/community/explore.vue
@@ -15,9 +15,9 @@
       </UIChipRadioGroup>
     </template>
   </CommunityHeader>
-  <CenteredWrapper class="main">
+  <CenteredWrapper class="flex flex-1 flex-col gap-5 py-5">
     <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet">
-      <ul class="projects">
+      <ul class="flex flex-wrap content-start gap-5">
         <ProjectItem v-for="project in slotProps.data" :key="project.id" :project="project" />
       </ul>
     </ListResultWrapper>
@@ -65,20 +65,3 @@ const queryRet = useQuery(
   }
 )
 </script>
-
-<style lang="scss" scoped>
-.main {
-  flex: 1 1 0;
-  padding: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.projects {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 20px;
-}
-</style>
diff --git a/spx-gui/src/pages/community/home.vue b/spx-gui/src/pages/community/home.vue
index cdacea021..4805fcc01 100644
--- a/spx-gui/src/pages/community/home.vue
+++ b/spx-gui/src/pages/community/home.vue
@@ -1,6 +1,6 @@
 <template>
-  <CenteredWrapper class="home-page">
-    <GuestBanner v-if="!isSignedIn()" class="guest-banner" />
+  <CenteredWrapper class="mt-5">
+    <GuestBanner v-if="!isSignedIn()" class="my-3 mb-8" />
     <ProjectsSection
       v-else
       v-radar="{ name: 'Your projects', desc: 'Section showing user\'s own projects' }"
@@ -179,13 +179,3 @@ const followingCreatedProjects = useQuery(
   { en: 'Failed to load projects', zh: '加载失败' }
 )
 </script>
-
-<style lang="scss" scoped>
-.home-page {
-  margin-top: 20px;
-}
-
-.guest-banner {
-  margin: 12px 0 32px;
-}
-</style>
diff --git a/spx-gui/src/pages/community/index.vue b/spx-gui/src/pages/community/index.vue
index 53447fa73..e794ff9d0 100644
--- a/spx-gui/src/pages/community/index.vue
+++ b/spx-gui/src/pages/community/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div class="bg-grey-300 flex h-full w-full flex-col overflow-y-auto">
     <CommunityNavbar />
     <router-view />
     <CommunityFooter />
@@ -10,14 +10,3 @@
 import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
 import CommunityFooter from '@/components/community/footer/CommunityFooter.vue'
 </script>
-
-<style lang="scss" scoped>
-.wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  background-color: var(--ui-color-grey-300);
-}
-</style>
diff --git a/spx-gui/src/pages/sign-in/callback.vue b/spx-gui/src/pages/sign-in/callback.vue
index 123b6ac91..b1272c482 100644
--- a/spx-gui/src/pages/sign-in/callback.vue
+++ b/spx-gui/src/pages/sign-in/callback.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="flex h-screen items-center justify-center">
     <h4>{{ $t(title) }}</h4>
   </div>
 </template>
@@ -23,11 +23,3 @@ try {
   window.location.replace('/')
 }
 </script>
-<style scoped lang="scss">
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-</style>
diff --git a/spx-gui/src/pages/sign-in/token.vue b/spx-gui/src/pages/sign-in/token.vue
index a59351625..dee70301f 100644
--- a/spx-gui/src/pages/sign-in/token.vue
+++ b/spx-gui/src/pages/sign-in/token.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="page">
-    <UIForm class="form" :form="form" @submit="handleSubmit.fn">
-      <h1 class="title">{{ $t(title) }}</h1>
+  <div class="flex h-full w-full items-center justify-center">
+    <UIForm class="flex w-80 flex-col" :form="form" @submit="handleSubmit.fn">
+      <h1 class="mb-4 text-center text-body">{{ $t(title) }}</h1>
       <UIFormItem path="token">
         <UITextInput
           v-model:value="form.value.token"
           v-radar="{ name: 'Token input', desc: 'Input field for authentication token' }"
-          class="input"
+          class="h-40 justify-self-stretch"
           type="textarea"
           :placeholder="$t({ en: 'Paste token here', zh: '在此粘贴 Token' })"
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-4 flex justify-center gap-4">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel token sign-in' }"
           color="boring"
@@ -99,36 +99,3 @@ const handleSubmit = useMessageHandle(
   }
 )
 </script>
-<style scoped lang="scss">
-.page {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.form {
-  width: 320px;
-  display: flex;
-  flex-direction: column;
-}
-
-.title {
-  margin-bottom: 1em;
-  font-size: 16px;
-  text-align: center;
-}
-
-.input {
-  justify-self: stretch;
-  height: 160px;
-}
-
-.footer {
-  margin-top: 1em;
-  display: flex;
-  justify-content: center;
-  gap: 1em;
-}
-</style>
diff --git a/spx-gui/src/pages/tutorials/course-start.vue b/spx-gui/src/pages/tutorials/course-start.vue
index fac7408f2..6bf0d50ea 100644
--- a/spx-gui/src/pages/tutorials/course-start.vue
+++ b/spx-gui/src/pages/tutorials/course-start.vue
@@ -37,7 +37,7 @@ const allQueryRet = useQuery(
 </script>
 
 <template>
-  <section class="course-start-page">
+  <section class="flex h-full w-full items-center justify-center">
     <UIDetailedLoading v-if="allQueryRet.isLoading.value" :percentage="allQueryRet.progress.value.percentage">
       <span>{{ $t(allQueryRet.progress.value.desc ?? { zh: '跳转中...', en: 'Redirecting...' }) }}</span>
     </UIDetailedLoading>
@@ -46,13 +46,3 @@ const allQueryRet = useQuery(
     </UIError>
   </section>
 </template>
-
-<style lang="scss" scoped>
-.course-start-page {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/pages/tutorials/index.vue b/spx-gui/src/pages/tutorials/index.vue
index 53d0141b5..1fdd094fc 100644
--- a/spx-gui/src/pages/tutorials/index.vue
+++ b/spx-gui/src/pages/tutorials/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tutorials-wrapper">
+  <div class="bg-grey-300 flex h-full w-full flex-col overflow-y-auto">
     <!-- TODO: Temporarily import the community component -->
     <CommunityNavbar />
 
@@ -7,7 +7,7 @@
 
     <CenteredWrapper
       v-radar="{ name: 'Course series list', desc: 'Scroll to view the course series' }"
-      class="centered-wrapper"
+      class="my-8 flex flex-1 flex-col items-center"
       :style="{ '--num-in-row': numInRow }"
     >
       <ListResultWrapper :query-ret="courseSeriesQuery" :height="height">
@@ -17,13 +17,13 @@
           </UIEmpty>
         </template>
         <template #default="{ data }">
-          <ul class="course-series-list">
+          <ul class="grid grid-cols-[repeat(var(--num-in-row),minmax(0,1fr))] gap-middle">
             <CourseSeriesItem v-for="courseSeries in data.data" :key="courseSeries.id" :course-series="courseSeries" />
           </ul>
         </template>
       </ListResultWrapper>
 
-      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 self-center" :total="pageTotal" />
     </CenteredWrapper>
 
     <CommunityFooter />
@@ -81,33 +81,3 @@ const courseSeriesQuery = useQuery(
   }
 )
 </script>
-
-<style lang="scss" scoped>
-.tutorials-wrapper {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ui-color-grey-300);
-
-  .centered-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 32px auto;
-    flex: 1;
-
-    .course-series-list {
-      display: grid;
-      grid-template-columns: repeat(var(--num-in-row), 1fr);
-      gap: var(--ui-gap-middle);
-    }
-
-    .pagination {
-      align-self: center;
-      margin-top: 36px;
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/utils/utils.scss b/spx-gui/src/utils/utils.scss
deleted file mode 100644
index ce57a72d2..000000000
--- a/spx-gui/src/utils/utils.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@mixin text-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
diff --git a/spx-gui/vercel-output-plugin.ts b/spx-gui/vercel-output-plugin.ts
index fa48b7c9f..87da003cf 100644
--- a/spx-gui/vercel-output-plugin.ts
+++ b/spx-gui/vercel-output-plugin.ts
@@ -91,7 +91,7 @@ export const createVercelOutputPlugin = ({ outputDir = defaultOutputDir, headers
     configResolved(config) {
       resolvedConfig = config
     },
-    async closeBundle() {
+    async writeBundle() {
       if (resolvedConfig == null || resolvedConfig.build.ssr) {
         return
       }
diff --git a/spx-gui/vite.config.ts b/spx-gui/vite.config.ts
index ed8eb463e..7f9c0d49d 100644
--- a/spx-gui/vite.config.ts
+++ b/spx-gui/vite.config.ts
@@ -3,6 +3,7 @@
 import path from 'node:path'
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
 import { ViteEjsPlugin } from 'vite-plugin-ejs'
 import browserslistToEsbuild from 'browserslist-to-esbuild'
 
@@ -17,6 +18,7 @@ export default defineConfig(({ mode }) => {
   return {
     plugins: [
       vue(),
+      tailwindcss(),
       ViteEjsPlugin(),
       createVercelOutputPlugin({
         headers: [

From 5f1336f548788be06ceb3c442556a9db761b685a Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 31 Mar 2026 11:30:35 +0800
Subject: [PATCH 02/29] disable tailwind preflight

---
 docs/develop/tailwind-css-migration.md | 12 ++++++------
 spx-gui/AGENTS.md                      |  1 +
 spx-gui/src/app.css                    |  5 ++++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
index 464e56a03..e1e78ca09 100644
--- a/docs/develop/tailwind-css-migration.md
+++ b/docs/develop/tailwind-css-migration.md
@@ -40,7 +40,7 @@ This means the project is pursuing two related but different directions:
 The current frontend styling model is centered around Vue SFC local styles plus shared CSS variables, with Tailwind now added as an optional utility layer.
 
 - `spx-gui` uses Vite + Vue 3, includes both Tailwind and Sass tooling in [spx-gui/package.json](../../spx-gui/package.json)
-- the app loads global styling through [spx-gui/src/main.ts](../../spx-gui/src/main.ts) and [spx-gui/src/app.css](../../spx-gui/src/app.css), which imports [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css)
+- the app loads global styling through [spx-gui/src/main.ts](../../spx-gui/src/main.ts) and [spx-gui/src/app.css](../../spx-gui/src/app.css), which keeps [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) as the base layer; Tailwind preflight is intentionally disabled, and the app imports only Tailwind theme and utilities layers
 - design tokens are defined in TypeScript under [spx-gui/src/components/ui/tokens/index.ts](../../spx-gui/src/components/ui/tokens/index.ts) and related files
 - the token objects are converted into `--ui-*` CSS variables and injected globally by [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue)
 - Naive UI theme overrides are also defined in [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue), so the token system serves both custom CSS and third-party components
@@ -333,9 +333,9 @@ These files are not long-term migration targets themselves. They should be remov
 
 Global foundation styling should remain even in a Tailwind-based hybrid model.
 
-- [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) should not be deleted as part of Tailwind adoption
-- reset rules, `box-sizing`, and `@font-face` declarations are still needed
-- this file may later be converted from SCSS to plain CSS, but it should remain as a base layer stylesheet
+- [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) and its imported [spx-gui/src/components/ui/reset.css](../../spx-gui/src/components/ui/reset.css) should not be deleted as part of Tailwind adoption
+- Tailwind preflight is intentionally disabled, so these files remain the project base layer for reset rules, `box-sizing`, button font inheritance, `@font-face`, and other shared foundation styles
+- this base layer may evolve over time, but it should continue to live in project-owned CSS rather than being replaced implicitly by Tailwind preflight
 
 ### Recommended Execution Order
 
@@ -357,7 +357,7 @@ The global entry file [spx-gui/src/app.css](../../spx-gui/src/app.css) should st
 
 It is the right place for:
 
-- Tailwind entry setup such as `@import "tailwindcss"` and `@source`
+- Tailwind entry setup such as importing `tailwindcss/theme.css`, `tailwindcss/utilities.css`, and `@source`
 - the theme bridge from existing `--ui-*` variables to Tailwind tokens
 - rare project-wide utilities that are truly cross-feature and not page-specific
 
@@ -506,4 +506,4 @@ If the team wants to continue after this assessment, the next task should be a s
 - installs Tailwind in `spx-gui`
 - defines the minimal theme bridge to current tokens
 - converts one low-risk page or wrapper component
-- records what became simpler and what still required SCSS
\ No newline at end of file
+- records what became simpler and what still required SCSS
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 2fe4852b9..865832f8b 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -87,6 +87,7 @@ When working with backend unique string identifiers such as `username`, project
 * Do not add or keep business-code imports of SCSS helpers from `src/components/ui/`.
 * For `src/components/ui/`, the long-term direction is the same, but this phase still allows local SCSS where it remains the clearest implementation.
 * Keep [src/app.css](src/app.css) limited to Tailwind entry setup, the theme bridge, and rare project-wide utilities.
+* Tailwind preflight is intentionally disabled in `src/app.css`. Keep [src/components/ui/global.css](src/components/ui/global.css) and [src/components/ui/reset.css](src/components/ui/reset.css) as the project's base layer for reset and foundation styles.
 * Do not move page-local or feature-local styles into `src/app.css` just because they are written with Tailwind.
 * Keep page-specific dimensions, transforms, colors, and card/banner styling local to the relevant page or component.
 * Keep the existing `--ui-*` design token system as the source of truth.
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 6cdbf4247..302f06efb 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -1,5 +1,8 @@
+@layer theme, base, components, utilities;
+
 @import "./components/ui/global.css";
-@import "tailwindcss";
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
 
 @source "./**/*.{vue,ts,tsx,js,jsx,html}";
 

From f4776a4f3e47b81693f006f7c13c0cdc63dfea83 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 31 Mar 2026 18:07:04 +0800
Subject: [PATCH 03/29] fix:  theme leading/text variables & tailwind utilities
 confliction with existing classes

---
 spx-gui/src/app.css                           | 452 +++++++++---------
 .../components/community/CommunityHeader.vue  |   2 +-
 .../components/community/ProjectsSection.vue  |  14 +-
 .../user/sidebar/UserSidebarItem.vue          |   2 +-
 .../ui/completion/CompletionItem.vue          |   8 +-
 .../src/components/project/ProjectItem.vue    |   9 +-
 .../components/tutorials/CourseSeriesItem.vue |   6 +-
 .../components/tutorials/TutorialsBanner.vue  |   6 +-
 spx-gui/src/components/ui/UIButton.vue        |   8 +-
 .../src/components/ui/UIConfigProvider.vue    |  59 +--
 spx-gui/src/components/ui/UITag.vue           |   4 +-
 spx-gui/src/components/ui/UITextInput.vue     |   6 +-
 spx-gui/src/components/ui/empty/UIEmpty.vue   |  10 +-
 spx-gui/src/components/ui/global.css          |  22 +-
 spx-gui/src/components/ui/modal/UIModal.vue   |  10 +-
 .../src/components/ui/modal/UIModalClose.vue  |   9 +-
 spx-gui/src/pages/404/index.vue               |   2 +-
 spx-gui/src/pages/community/project.vue       |   4 +-
 spx-gui/src/pages/sign-in/token.vue           |   2 +-
 19 files changed, 325 insertions(+), 310 deletions(-)

diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 302f06efb..402c6bbd7 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -1,8 +1,8 @@
 @layer theme, base, components, utilities;
 
-@import "./components/ui/global.css";
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
+@import './components/ui/global.css';
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
 
 @source "./**/*.{vue,ts,tsx,js,jsx,html}";
 
@@ -14,32 +14,32 @@
  * for the component implementation under src/components/ui/.
  */
 @layer components {
-	.link-primary {
-		transition: color 0.1s;
-		color: var(--ui-color-primary-main);
-		text-decoration: none;
-
-		&:hover {
-			color: var(--ui-color-primary-400);
-		}
-
-		&:active {
-			color: var(--ui-color-primary-600);
-		}
-	}
-
-	.link-boring {
-		transition: color 0.1s;
-		color: inherit;
-
-		&:hover {
-			color: var(--ui-color-primary-main);
-		}
-
-		&:active {
-			color: var(--ui-color-primary-600);
-		}
-	}
+  .link-primary {
+    transition: color 0.1s;
+    color: var(--ui-color-primary-main);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--ui-color-primary-400);
+    }
+
+    &:active {
+      color: var(--ui-color-primary-600);
+    }
+  }
+
+  .link-boring {
+    transition: color 0.1s;
+    color: inherit;
+
+    &:hover {
+      color: var(--ui-color-primary-main);
+    }
+
+    &:active {
+      color: var(--ui-color-primary-600);
+    }
+  }
 }
 
 /*
@@ -53,194 +53,208 @@
  * utilities can use semantic classes such as text-text and bg-primary-100.
  */
 @theme {
-	/* Keep only the project's breakpoint names to avoid a parallel default scale. */
-	--breakpoint-*: initial;
-	--color-*: initial;
-	--shadow-*: initial;
-	--font-*: initial;
-	--text-*: initial;
-	--radius-*: initial;
-	--leading-*: initial;
-
-	/* Mirrors src/components/ui/responsive.ts. */
-	--breakpoint-tablet: 48rem;
-	--breakpoint-desktop: 80rem;
-	--breakpoint-desktop-large: 105rem;
-
-	/* Product palette and semantic color tokens bridged from global --ui-color-* vars. */
-	--color-turquoise-100: var(--ui-color-turquoise-100, #f3fcfd);
-	--color-turquoise-200: var(--ui-color-turquoise-200, #e7f9fa);
-	--color-turquoise-300: var(--ui-color-turquoise-300, #b5ebf0);
-	--color-turquoise-400: var(--ui-color-turquoise-400, #3fcdd9);
-	--color-turquoise-500: var(--ui-color-turquoise-500, #0bc0cf);
-	--color-turquoise-600: var(--ui-color-turquoise-600, #0eafbc);
-	--color-turquoise-700: var(--ui-color-turquoise-700, #0b8893);
-	--color-turquoise-main: var(--ui-color-turquoise-main, #0bc0cf);
-
-	--color-yellow-100: var(--ui-color-yellow-100, #fffaf5);
-	--color-yellow-200: var(--ui-color-yellow-200, #fff6eb);
-	--color-yellow-300: var(--ui-color-yellow-300, #fde2c0);
-	--color-yellow-400: var(--ui-color-yellow-400, #fbb45d);
-	--color-yellow-500: var(--ui-color-yellow-500, #faa135);
-	--color-yellow-600: var(--ui-color-yellow-600, #e49330);
-	--color-yellow-700: var(--ui-color-yellow-700, #b27226);
-	--color-yellow-main: var(--ui-color-yellow-main, #faa135);
-
-	--color-purple-100: var(--ui-color-purple-100, #faf8ff);
-	--color-purple-200: var(--ui-color-purple-200, #f6f1ff);
-	--color-purple-300: var(--ui-color-purple-300, #e2d4ff);
-	--color-purple-400: var(--ui-color-purple-400, #b390ff);
-	--color-purple-500: var(--ui-color-purple-500, #a074ff);
-	--color-purple-600: var(--ui-color-purple-600, #926ae8);
-	--color-purple-700: var(--ui-color-purple-700, #7252b5);
-	--color-purple-main: var(--ui-color-purple-main, #a074ff);
-
-	--color-blue-100: var(--ui-color-blue-100, #f4faff);
-	--color-blue-200: var(--ui-color-blue-200, #e9f5ff);
-	--color-blue-300: var(--ui-color-blue-300, #bae1fe);
-	--color-blue-400: var(--ui-color-blue-400, #4db2fd);
-	--color-blue-500: var(--ui-color-blue-500, #219ffc);
-	--color-blue-600: var(--ui-color-blue-600, #1e91e5);
-	--color-blue-700: var(--ui-color-blue-700, #1771b3);
-	--color-blue-main: var(--ui-color-blue-main, #219ffc);
-
-	--color-red-100: var(--ui-color-red-100, #feefef);
-	--color-red-200: var(--ui-color-red-200, #fdc7c7);
-	--color-red-300: var(--ui-color-red-300, #ff97a0);
-	--color-red-400: var(--ui-color-red-400, #f15d64);
-	--color-red-500: var(--ui-color-red-500, #ef4149);
-	--color-red-600: var(--ui-color-red-600, #bc292e);
-	--color-red-main: var(--ui-color-red-main, #ef4149);
-
-	--color-green-100: var(--ui-color-green-100, #e0f8e3);
-	--color-green-200: var(--ui-color-green-200, #cbf1cd);
-	--color-green-300: var(--ui-color-green-300, #b0ea90);
-	--color-green-400: var(--ui-color-green-400, #90e05a);
-	--color-green-500: var(--ui-color-green-500, #63ce29);
-	--color-green-600: var(--ui-color-green-600, #3ca80c);
-	--color-green-main: var(--ui-color-green-main, #63ce29);
-
-	--color-grey-100: var(--ui-color-grey-100, #ffffff);
-	--color-grey-200: var(--ui-color-grey-200, #fbfcfd);
-	--color-grey-300: var(--ui-color-grey-300, #f6f8fa);
-	--color-grey-400: var(--ui-color-grey-400, #eaeff3);
-	--color-grey-500: var(--ui-color-grey-500, #d9dfe5);
-	--color-grey-600: var(--ui-color-grey-600, #cbd2d8);
-	--color-grey-700: var(--ui-color-grey-700, #a7b1bb);
-	--color-grey-800: var(--ui-color-grey-800, #6e7781);
-	--color-grey-900: var(--ui-color-grey-900, #57606a);
-	--color-grey-1000: var(--ui-color-grey-1000, #24292f);
-
-	--color-primary-100: var(--ui-color-primary-100, #f3fcfd);
-	--color-primary-200: var(--ui-color-primary-200, #e7f9fa);
-	--color-primary-300: var(--ui-color-primary-300, #b5ebf0);
-	--color-primary-400: var(--ui-color-primary-400, #3fcdd9);
-	--color-primary-500: var(--ui-color-primary-500, #0bc0cf);
-	--color-primary-600: var(--ui-color-primary-600, #0eafbc);
-	--color-primary-700: var(--ui-color-primary-700, #0b8893);
-	--color-primary-main: var(--ui-color-primary-main, #0bc0cf);
-
-	--color-sprite-100: var(--ui-color-sprite-100, #fffaf5);
-	--color-sprite-200: var(--ui-color-sprite-200, #fff6eb);
-	--color-sprite-300: var(--ui-color-sprite-300, #fde2c0);
-	--color-sprite-400: var(--ui-color-sprite-400, #fbb45d);
-	--color-sprite-500: var(--ui-color-sprite-500, #faa135);
-	--color-sprite-600: var(--ui-color-sprite-600, #e49330);
-	--color-sprite-700: var(--ui-color-sprite-700, #b27226);
-	--color-sprite-main: var(--ui-color-sprite-main, #faa135);
-	--color-sprite-bg-selected: var(--ui-color-sprite-bg-selected, #fff6eb);
-
-	--color-sound-100: var(--ui-color-sound-100, #f4faff);
-	--color-sound-200: var(--ui-color-sound-200, #e9f5ff);
-	--color-sound-300: var(--ui-color-sound-300, #bae1fe);
-	--color-sound-400: var(--ui-color-sound-400, #4db2fd);
-	--color-sound-500: var(--ui-color-sound-500, #219ffc);
-	--color-sound-600: var(--ui-color-sound-600, #1e91e5);
-	--color-sound-700: var(--ui-color-sound-700, #1771b3);
-	--color-sound-main: var(--ui-color-sound-main, #219ffc);
-	--color-sound-bg-selected: var(--ui-color-sound-bg-selected, #e9f5ff);
-
-	--color-stage-100: var(--ui-color-stage-100, #f4faff);
-	--color-stage-200: var(--ui-color-stage-200, #e9f5ff);
-	--color-stage-300: var(--ui-color-stage-300, #bae1fe);
-	--color-stage-400: var(--ui-color-stage-400, #4db2fd);
-	--color-stage-500: var(--ui-color-stage-500, #219ffc);
-	--color-stage-600: var(--ui-color-stage-600, #1e91e5);
-	--color-stage-700: var(--ui-color-stage-700, #1771b3);
-	--color-stage-main: var(--ui-color-stage-main, #219ffc);
-	--color-stage-bg-selected: var(--ui-color-stage-bg-selected, #e9f5ff);
-
-	--color-danger-100: var(--ui-color-danger-100, #feefef);
-	--color-danger-200: var(--ui-color-danger-200, #fdc7c7);
-	--color-danger-300: var(--ui-color-danger-300, #ff97a0);
-	--color-danger-400: var(--ui-color-danger-400, #f15d64);
-	--color-danger-500: var(--ui-color-danger-500, #ef4149);
-	--color-danger-600: var(--ui-color-danger-600, #bc292e);
-	--color-danger-main: var(--ui-color-danger-main, #ef4149);
-
-	--color-success-100: var(--ui-color-success-100, #e0f8e3);
-	--color-success-200: var(--ui-color-success-200, #cbf1cd);
-	--color-success-300: var(--ui-color-success-300, #b0ea90);
-	--color-success-400: var(--ui-color-success-400, #90e05a);
-	--color-success-500: var(--ui-color-success-500, #63ce29);
-	--color-success-600: var(--ui-color-success-600, #3ca80c);
-	--color-success-main: var(--ui-color-success-main, #63ce29);
-
-	--color-disabled-bg: var(--ui-color-disabled-bg, #f6f8fa);
-	--color-disabled-text: var(--ui-color-disabled-text, #cbd2d8);
-	--color-title: var(--ui-color-title, #24292f);
-	--color-text: var(--ui-color-text, #57606a);
-	--color-hint-1: var(--ui-color-hint-1, #6e7781);
-	--color-hint-2: var(--ui-color-hint-2, #a7b1bb);
-	--color-dividing-line-1: var(--ui-color-dividing-line-1, #d9dfe5);
-	--color-dividing-line-2: var(--ui-color-dividing-line-2, #eaeff3);
-	--color-border: var(--ui-color-border, #cbd2d8);
-
-	/* Typography tokens bridged from the UI token layer. */
-	--font-sans: var(
-		--ui-font-family-main,
-		AlibabaHealthB,
-		-apple-system,
-		BlinkMacSystemFont,
-		'Segoe UI',
-		Roboto,
-		'Helvetica Neue',
-		Arial,
-		'Noto Sans',
-		sans-serif,
-		'Apple Color Emoji',
-		'Segoe UI Emoji',
-		'Segoe UI Symbol',
-		'Noto Color Emoji'
-	);
-	--font-mono: var(--ui-font-family-code, Menlo, Monaco, 'Courier New', monospace);
-	--font-main: var(--font-sans);
-	--font-code: var(--font-mono);
-
-	/* Radius and shadow tokens bridged from the UI token layer. */
-	--radius-none: 0px;
-	--radius-full: 9999px;
-	--radius-1: var(--ui-border-radius-1, 8px);
-	--radius-2: var(--ui-border-radius-2, 12px);
-	--radius-3: var(--ui-border-radius-3, 20px);
-
-	--shadow-none: 0 0 #0000;
-	--shadow-small: var(--ui-box-shadow-small, 0px 2px 8px 0px rgba(51, 51, 51, 0.08));
-	--shadow-big: var(--ui-box-shadow-big, 0px 4px 24px 0px rgba(36, 41, 47, 0.08));
-	--shadow-diffusion: var(--ui-box-shadow-diffusion, 0px 4px 12px 0px #d0f2f8);
-
-	/* Shared spacing and text-size helpers bridged for utility-class authoring. */
-	--leading-1: var(--ui-line-height-1, 26px);
-	--leading-2: var(--ui-line-height-2, 32px);
-	--leading-3: var(--ui-line-height-3, 40px);
-
-	--spacing-middle: var(--ui-gap-middle, 16px);
-	--spacing-large: var(--ui-gap-large, 24px);
-
-	--text-body: var(--ui-font-size-text, 14px);
-	--text-body--line-height: 1.57143;
-	--text-15: 15px;
-	--text-15--line-height: 1.5;
-	--text-20: 20px;
-	--text-20--line-height: 1.5;
+  /* Keep only the project's breakpoint names to avoid a parallel default scale. */
+  --breakpoint-*: initial;
+  --color-*: initial;
+  --shadow-*: initial;
+  --font-*: initial;
+  --text-*: initial;
+  --radius-*: initial;
+
+  /* Mirrors src/components/ui/responsive.ts. */
+  --breakpoint-tablet: 48rem;
+  --breakpoint-desktop: 80rem;
+  --breakpoint-desktop-large: 105rem;
+
+  /* Product palette and semantic color tokens bridged from global --ui-color-* vars. */
+  --color-turquoise-100: var(--ui-color-turquoise-100, #f3fcfd);
+  --color-turquoise-200: var(--ui-color-turquoise-200, #e7f9fa);
+  --color-turquoise-300: var(--ui-color-turquoise-300, #b5ebf0);
+  --color-turquoise-400: var(--ui-color-turquoise-400, #3fcdd9);
+  --color-turquoise-500: var(--ui-color-turquoise-500, #0bc0cf);
+  --color-turquoise-600: var(--ui-color-turquoise-600, #0eafbc);
+  --color-turquoise-700: var(--ui-color-turquoise-700, #0b8893);
+  --color-turquoise-main: var(--ui-color-turquoise-main, #0bc0cf);
+
+  --color-yellow-100: var(--ui-color-yellow-100, #fffaf5);
+  --color-yellow-200: var(--ui-color-yellow-200, #fff6eb);
+  --color-yellow-300: var(--ui-color-yellow-300, #fde2c0);
+  --color-yellow-400: var(--ui-color-yellow-400, #fbb45d);
+  --color-yellow-500: var(--ui-color-yellow-500, #faa135);
+  --color-yellow-600: var(--ui-color-yellow-600, #e49330);
+  --color-yellow-700: var(--ui-color-yellow-700, #b27226);
+  --color-yellow-main: var(--ui-color-yellow-main, #faa135);
+
+  --color-purple-100: var(--ui-color-purple-100, #faf8ff);
+  --color-purple-200: var(--ui-color-purple-200, #f6f1ff);
+  --color-purple-300: var(--ui-color-purple-300, #e2d4ff);
+  --color-purple-400: var(--ui-color-purple-400, #b390ff);
+  --color-purple-500: var(--ui-color-purple-500, #a074ff);
+  --color-purple-600: var(--ui-color-purple-600, #926ae8);
+  --color-purple-700: var(--ui-color-purple-700, #7252b5);
+  --color-purple-main: var(--ui-color-purple-main, #a074ff);
+
+  --color-blue-100: var(--ui-color-blue-100, #f4faff);
+  --color-blue-200: var(--ui-color-blue-200, #e9f5ff);
+  --color-blue-300: var(--ui-color-blue-300, #bae1fe);
+  --color-blue-400: var(--ui-color-blue-400, #4db2fd);
+  --color-blue-500: var(--ui-color-blue-500, #219ffc);
+  --color-blue-600: var(--ui-color-blue-600, #1e91e5);
+  --color-blue-700: var(--ui-color-blue-700, #1771b3);
+  --color-blue-main: var(--ui-color-blue-main, #219ffc);
+
+  --color-red-100: var(--ui-color-red-100, #feefef);
+  --color-red-200: var(--ui-color-red-200, #fdc7c7);
+  --color-red-300: var(--ui-color-red-300, #ff97a0);
+  --color-red-400: var(--ui-color-red-400, #f15d64);
+  --color-red-500: var(--ui-color-red-500, #ef4149);
+  --color-red-600: var(--ui-color-red-600, #bc292e);
+  --color-red-main: var(--ui-color-red-main, #ef4149);
+
+  --color-green-100: var(--ui-color-green-100, #e0f8e3);
+  --color-green-200: var(--ui-color-green-200, #cbf1cd);
+  --color-green-300: var(--ui-color-green-300, #b0ea90);
+  --color-green-400: var(--ui-color-green-400, #90e05a);
+  --color-green-500: var(--ui-color-green-500, #63ce29);
+  --color-green-600: var(--ui-color-green-600, #3ca80c);
+  --color-green-main: var(--ui-color-green-main, #63ce29);
+
+  --color-grey-100: var(--ui-color-grey-100, #ffffff);
+  --color-grey-200: var(--ui-color-grey-200, #fbfcfd);
+  --color-grey-300: var(--ui-color-grey-300, #f6f8fa);
+  --color-grey-400: var(--ui-color-grey-400, #eaeff3);
+  --color-grey-500: var(--ui-color-grey-500, #d9dfe5);
+  --color-grey-600: var(--ui-color-grey-600, #cbd2d8);
+  --color-grey-700: var(--ui-color-grey-700, #a7b1bb);
+  --color-grey-800: var(--ui-color-grey-800, #6e7781);
+  --color-grey-900: var(--ui-color-grey-900, #57606a);
+  --color-grey-1000: var(--ui-color-grey-1000, #24292f);
+
+  --color-primary-100: var(--ui-color-primary-100, #f3fcfd);
+  --color-primary-200: var(--ui-color-primary-200, #e7f9fa);
+  --color-primary-300: var(--ui-color-primary-300, #b5ebf0);
+  --color-primary-400: var(--ui-color-primary-400, #3fcdd9);
+  --color-primary-500: var(--ui-color-primary-500, #0bc0cf);
+  --color-primary-600: var(--ui-color-primary-600, #0eafbc);
+  --color-primary-700: var(--ui-color-primary-700, #0b8893);
+  --color-primary-main: var(--ui-color-primary-main, #0bc0cf);
+
+  --color-sprite-100: var(--ui-color-sprite-100, #fffaf5);
+  --color-sprite-200: var(--ui-color-sprite-200, #fff6eb);
+  --color-sprite-300: var(--ui-color-sprite-300, #fde2c0);
+  --color-sprite-400: var(--ui-color-sprite-400, #fbb45d);
+  --color-sprite-500: var(--ui-color-sprite-500, #faa135);
+  --color-sprite-600: var(--ui-color-sprite-600, #e49330);
+  --color-sprite-700: var(--ui-color-sprite-700, #b27226);
+  --color-sprite-main: var(--ui-color-sprite-main, #faa135);
+  --color-sprite-bg-selected: var(--ui-color-sprite-bg-selected, #fff6eb);
+
+  --color-sound-100: var(--ui-color-sound-100, #f4faff);
+  --color-sound-200: var(--ui-color-sound-200, #e9f5ff);
+  --color-sound-300: var(--ui-color-sound-300, #bae1fe);
+  --color-sound-400: var(--ui-color-sound-400, #4db2fd);
+  --color-sound-500: var(--ui-color-sound-500, #219ffc);
+  --color-sound-600: var(--ui-color-sound-600, #1e91e5);
+  --color-sound-700: var(--ui-color-sound-700, #1771b3);
+  --color-sound-main: var(--ui-color-sound-main, #219ffc);
+  --color-sound-bg-selected: var(--ui-color-sound-bg-selected, #e9f5ff);
+
+  --color-stage-100: var(--ui-color-stage-100, #f4faff);
+  --color-stage-200: var(--ui-color-stage-200, #e9f5ff);
+  --color-stage-300: var(--ui-color-stage-300, #bae1fe);
+  --color-stage-400: var(--ui-color-stage-400, #4db2fd);
+  --color-stage-500: var(--ui-color-stage-500, #219ffc);
+  --color-stage-600: var(--ui-color-stage-600, #1e91e5);
+  --color-stage-700: var(--ui-color-stage-700, #1771b3);
+  --color-stage-main: var(--ui-color-stage-main, #219ffc);
+  --color-stage-bg-selected: var(--ui-color-stage-bg-selected, #e9f5ff);
+
+  --color-danger-100: var(--ui-color-danger-100, #feefef);
+  --color-danger-200: var(--ui-color-danger-200, #fdc7c7);
+  --color-danger-300: var(--ui-color-danger-300, #ff97a0);
+  --color-danger-400: var(--ui-color-danger-400, #f15d64);
+  --color-danger-500: var(--ui-color-danger-500, #ef4149);
+  --color-danger-600: var(--ui-color-danger-600, #bc292e);
+  --color-danger-main: var(--ui-color-danger-main, #ef4149);
+
+  --color-success-100: var(--ui-color-success-100, #e0f8e3);
+  --color-success-200: var(--ui-color-success-200, #cbf1cd);
+  --color-success-300: var(--ui-color-success-300, #b0ea90);
+  --color-success-400: var(--ui-color-success-400, #90e05a);
+  --color-success-500: var(--ui-color-success-500, #63ce29);
+  --color-success-600: var(--ui-color-success-600, #3ca80c);
+  --color-success-main: var(--ui-color-success-main, #63ce29);
+
+  --color-disabled-bg: var(--ui-color-disabled-bg, #f6f8fa);
+  --color-disabled-text: var(--ui-color-disabled-text, #cbd2d8);
+  --color-title: var(--ui-color-title, #24292f);
+  --color-text: var(--ui-color-text, #57606a);
+  --color-hint-1: var(--ui-color-hint-1, #6e7781);
+  --color-hint-2: var(--ui-color-hint-2, #a7b1bb);
+  --color-dividing-line-1: var(--ui-color-dividing-line-1, #d9dfe5);
+  --color-dividing-line-2: var(--ui-color-dividing-line-2, #eaeff3);
+  --color-border: var(--ui-color-border, #cbd2d8);
+
+  /* Typography tokens bridged from the UI token layer. */
+  --font-sans: var(
+    --ui-font-family-main,
+    AlibabaHealthB,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji'
+  );
+  --font-mono: var(--ui-font-family-code, Menlo, Monaco, 'Courier New', monospace);
+  --font-main: var(--font-sans);
+  --font-code: var(--font-mono);
+
+  /* Radius and shadow tokens bridged from the UI token layer. */
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-1: var(--ui-border-radius-1, 8px);
+  --radius-2: var(--ui-border-radius-2, 12px);
+  --radius-3: var(--ui-border-radius-3, 20px);
+
+  --shadow-none: 0 0 #0000;
+  --shadow-small: var(--ui-box-shadow-small, 0px 2px 8px 0px rgba(51, 51, 51, 0.08));
+  --shadow-big: var(--ui-box-shadow-big, 0px 4px 24px 0px rgba(36, 41, 47, 0.08));
+  --shadow-diffusion: var(--ui-box-shadow-diffusion, 0px 4px 12px 0px #d0f2f8);
+
+  /* Shared spacing and text-size helpers bridged for utility-class authoring. */
+  /* TODO: The `leading-<number>` variables conflict with Tailwind's default syntax. These styles are not very generic either, confirm whether can be removed. */
+  /* --leading-*: initial; */
+  /* --leading-1: var(--ui-line-height-1, 26px); */
+  /* --leading-2: var(--ui-line-height-2, 32px); */
+  /* --leading-3: var(--ui-line-height-3, 40px); */
+
+  /* Shared spacing and text-size helpers bridged for utility-class authoring. */
+  --spacing-middle: var(--ui-gap-middle, 16px);
+  --spacing-large: var(--ui-gap-large, 24px);
+
+  --text-body: var(--ui-font-size-text, 14px);
+  --text-body--line-height: 1.57143;
+  --text-12: 12px;
+  --text-12--line-height: 1.5;
+  --text-13: 13px;
+  --text-13--line-height: 1.5;
+  --text-15: 15px;
+  --text-15--line-height: 1.5;
+  --text-16: 16px;
+  --text-16--line-height: 1.5;
+  --text-18: 18px;
+  --text-18--line-height: 1.5;
+  --text-20: 20px;
+  --text-20--line-height: 1.5;
+  --text-24: 24px;
+  --text-24--line-height: 1.5;
+  --text-36: 36px;
+  --text-36--line-height: 1.5;
 }
diff --git a/spx-gui/src/components/community/CommunityHeader.vue b/spx-gui/src/components/community/CommunityHeader.vue
index 3eadb3a0d..a27db5fa4 100644
--- a/spx-gui/src/components/community/CommunityHeader.vue
+++ b/spx-gui/src/components/community/CommunityHeader.vue
@@ -3,7 +3,7 @@
 <template>
   <section class="flex-none bg-grey-100">
     <CenteredWrapper class="flex h-16 items-center justify-between gap-5">
-      <h1 class="min-w-0 flex-1 truncate text-body leading-1 text-title">
+      <h1 class="min-w-0 flex-1 truncate text-16/6.5 text-title">
         <slot></slot>
       </h1>
       <label class="shrink-0">
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
index 363043644..f02c5cf85 100644
--- a/spx-gui/src/components/community/ProjectsSection.vue
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -3,7 +3,7 @@
 <template>
   <section :style="{ '--project-num-in-row': numInRow }">
     <header class="flex items-center justify-between" :class="isUserContext ? 'h-15 pt-5 pb-2' : 'h-13'">
-      <h2 class="text-title" :class="isUserContext ? 'text-body leading-1' : 'text-20 leading-7'">
+      <h2 class="text-title" :class="isUserContext ? 'text-16/6.5' : 'text-20/7'">
         <slot name="title"></slot>
       </h2>
       <RouterUILink
@@ -16,7 +16,10 @@
         <UIIcon class="ml-2 h-5 w-5" type="arrowRightSmall" />
       </RouterUILink>
     </header>
-    <div class="projects-wrapper relative mt-2" :class="isUserContext ? 'mb-4' : 'mb-8'">
+    <div
+      class="relative mt-2"
+      :class="[isUserContext ? 'mb-4' : 'mb-8', !queryRet.data.value?.length ? 'bg-grey-100 rounded-2' : '']"
+    >
       <ListResultWrapper content-type="project" :query-ret="queryRet" :height="254">
         <template v-if="!!slots.empty" #empty="emptyProps">
           <slot name="empty" v-bind="emptyProps"></slot>
@@ -57,10 +60,3 @@ const props = defineProps<{
 const slots = useSlots()
 const isUserContext = computed(() => props.context === 'user')
 </script>
-
-<style scoped>
-.projects-wrapper:not(:has(.projects)) {
-  background-color: var(--ui-color-grey-100);
-  border-radius: var(--ui-border-radius-2);
-}
-</style>
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
index 3239fc7ef..c990385ab 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
@@ -14,7 +14,7 @@ defineProps<{
   >
     <i class="icon-bg absolute left-3 top-3.5 h-4.25 w-4.25 rounded-full transition-all duration-100" />
     <span
-      class="relative flex-1 pl-6.5 text-[13px] leading-5 [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-1/2 [&_svg]:z-1 [&_svg]:-translate-y-1/2"
+      class="relative flex-1 pl-6.5 text-13/5 [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-1/2 [&_svg]:z-1 [&_svg]:-translate-y-1/2"
     >
       <slot></slot>
     </span>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
index 9d5c4fbea..96f42d4fa 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
@@ -46,8 +46,10 @@ watchEffect(() => {
     :class="active ? 'bg-grey-400' : ''"
     :title="item.label"
   >
-    <code class="min-w-0 flex-1 truncate font-code"
-      ><span v-for="(part, i) in parts" :key="i" :class="part.isMatched ? 'text-primary-main' : ''">{{ part.content }}</span></code
-    >
+    <code class="min-w-0 flex-1 truncate font-code">
+      <span v-for="(part, i) in parts" :key="i" :class="part.isMatched ? 'text-primary-main' : ''">
+        {{ part.content }}
+      </span>
+    </code>
   </li>
 </template>
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index 53037bde3..b3f7db01b 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -7,10 +7,7 @@
     class="group w-58 flex-none overflow-hidden rounded-2 border border-grey-400 bg-grey-100 transition-all duration-100 hover:shadow-[0px_4px_12px_0px_rgba(36,41,47,0.08)]"
   >
     <RouterLink class="flex flex-col no-underline" :to="to" @click="emit('selected')">
-      <div
-        class="relative h-43 w-full bg-center bg-contain"
-        :style="{ backgroundImage: `url(${stageBgUrl})` }"
-      >
+      <div class="relative h-43 w-full bg-center bg-contain" :style="{ backgroundImage: `url(${stageBgUrl})` }">
         <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
         <UIDropdown v-if="operatable" trigger="click" placement="bottom-end">
           <template #trigger>
@@ -58,7 +55,7 @@
       </div>
       <div class="p-middle">
         <div class="flex items-center gap-1">
-          <h5 class="min-w-0 shrink truncate text-15 leading-6 text-title" :title="project.displayName">
+          <h5 class="min-w-0 shrink truncate text-15/6 text-title" :title="project.displayName">
             {{ project.displayName }}
           </h5>
           <template v-if="context !== 'public' && isOwner">
@@ -105,7 +102,7 @@
             </i>
           </template>
         </div>
-        <p class="mt-1 flex h-5 gap-3 text-[13px] leading-5 text-grey-700">
+        <p class="mt-1 flex h-5 gap-3 text-13/5 text-grey-700">
           <span class="flex flex-none items-center gap-1" :class="{ 'text-red-main': liking }" :title="$t(likesTitle)">
             <UIIcon class="h-3.5 w-3.5" type="heart" />
             {{ $t(humanizeCount(project.likeCount)) }}
diff --git a/spx-gui/src/components/tutorials/CourseSeriesItem.vue b/spx-gui/src/components/tutorials/CourseSeriesItem.vue
index 28d5d02aa..23922a632 100644
--- a/spx-gui/src/components/tutorials/CourseSeriesItem.vue
+++ b/spx-gui/src/components/tutorials/CourseSeriesItem.vue
@@ -27,13 +27,13 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
       name: `Course series item \u0022${props.courseSeries.title}\u0022`,
       desc: 'Click to view the course series'
     }"
-    class="relative h-53.5 w-58 overflow-hidden rounded-3 transition-all duration-200 hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
-    :style="{ backgroundImage: `url(${stageBgUrl})` }"
+    class="relative w-58 overflow-hidden rounded-3 transition-all duration-200 hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
+    :style="{ height: `${courseSeriesItemHeight}px`, backgroundImage: `url(${stageBgUrl})` }"
   >
     <RouterLink :to="`/course-series/${props.courseSeries.id}`">
       <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
       <div
-        class="absolute bottom-0 h-10 w-full overflow-hidden whitespace-nowrap px-4 text-15 leading-10 text-grey-100 text-ellipsis"
+        class="absolute bottom-0 h-10 w-full overflow-hidden whitespace-nowrap px-4 text-15/10 text-grey-100 text-ellipsis"
         :style="{ background: 'rgb(from var(--ui-color-grey-1000) r g b / 0.2)' }"
       >
         {{ courseSeries.title }}
diff --git a/spx-gui/src/components/tutorials/TutorialsBanner.vue b/spx-gui/src/components/tutorials/TutorialsBanner.vue
index 016643863..f13863c6c 100644
--- a/spx-gui/src/components/tutorials/TutorialsBanner.vue
+++ b/spx-gui/src/components/tutorials/TutorialsBanner.vue
@@ -19,9 +19,9 @@ const bannerTextClass = computed(() =>
       />
     </div>
     <div class="absolute left-1/2 top-1/2 whitespace-nowrap text-[#006375]" :class="bannerTextClass">
-      <div class="text-[36px]">{{ $t({ en: 'Explore the User Tutorial', zh: '探索用户教程' }) }}</div>
-      <div class="mt-2 text-[18px]">
-      {{ $t({ en: 'Learn XBuilder and improve programming skills', zh: '学习 XBuilder，提高编程技能' }) }}
+      <div class="text-36">{{ $t({ en: 'Explore the User Tutorial', zh: '探索用户教程' }) }}</div>
+      <div class="mt-2 text-18">
+        {{ $t({ en: 'Learn XBuilder and improve programming skills', zh: '学习 XBuilder，提高编程技能' }) }}
       </div>
     </div>
   </div>
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index 61e540753..01fc31167 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -6,7 +6,7 @@
       `variant-${variant}`,
       `shape-${shape}`,
       `color-${color}`,
-      `size-${size}`,
+      `ui-button-size-${size}`,
       loading && 'loading',
       iconOnly && 'icon-only'
     ]"
@@ -259,7 +259,7 @@ defineExpose({
 }
 
 // size
-.size-large {
+.ui-button-size-large {
   --ui-button-height: var(--ui-line-height-3);
   --ui-button-icon-size: 18px;
   --ui-button-content-padding: 0 24px;
@@ -273,7 +273,7 @@ defineExpose({
   }
 }
 
-.size-medium {
+.ui-button-size-medium {
   --ui-button-height: var(--ui-line-height-2);
   --ui-button-icon-size: 14px;
   --ui-button-content-padding: 0 16px;
@@ -287,7 +287,7 @@ defineExpose({
   }
 }
 
-.size-small {
+.ui-button-size-small {
   --ui-button-height: var(--ui-line-height-1);
   --ui-button-icon-size: 13px;
   --ui-button-content-padding: 0 12px;
diff --git a/spx-gui/src/components/ui/UIConfigProvider.vue b/spx-gui/src/components/ui/UIConfigProvider.vue
index 9f5b223eb..4e5e2c328 100644
--- a/spx-gui/src/components/ui/UIConfigProvider.vue
+++ b/spx-gui/src/components/ui/UIConfigProvider.vue
@@ -178,39 +178,42 @@ const cssVariables = getCssVars('--ui-', uiVariables)
 </style>
 
 <style lang="scss">
-/* Special title */
-h1 {
-  font-size: 20px;
-  line-height: 1.4;
-}
+// TODO: should move these styles to global.css ?
+@layer base {
+  /* Special title */
+  h1 {
+    font-size: 20px;
+    line-height: 1.4;
+  }
 
-/* Standard title */
-h2 {
-  font-size: 16px;
-  line-height: 1.5;
-}
+  /* Standard title */
+  h2 {
+    font-size: 16px;
+    line-height: 1.5;
+  }
 
-/* Text in navigation bar */
-h3,
-/* Text */
-h4 {
-  font-size: 14px;
-  line-height: 1.57143;
-}
+  /* Text in navigation bar */
+  h3,
+  /* Text */
+  h4 {
+    font-size: 14px;
+    line-height: 1.57143;
+  }
 
-/* More information */
-h5 {
-  font-size: 12px;
-  line-height: 1.5;
-}
+  /* More information */
+  h5 {
+    font-size: 12px;
+    line-height: 1.5;
+  }
 
-h6 {
-  font-size: 10px;
-  line-height: 1.6;
-}
+  h6 {
+    font-size: 10px;
+    line-height: 1.6;
+  }
 
-button:focus {
-  outline: 2px solid var(--ui-color-primary-700);
+  button:focus {
+    outline: 2px solid var(--ui-color-primary-700);
+  }
 }
 
 // vueuc (dep of naive-ui) uses `pointer-events: all` on children of `v-binder-follower-content`, which wraps `Popover` content in naive-ui.
diff --git a/spx-gui/src/components/ui/UITag.vue b/spx-gui/src/components/ui/UITag.vue
index f3576960c..c6a439f6e 100644
--- a/spx-gui/src/components/ui/UITag.vue
+++ b/spx-gui/src/components/ui/UITag.vue
@@ -41,7 +41,7 @@ const slots = useSlots()
     :class="[
       `variant-${variant}`,
       `color-${color}`,
-      `size-${size}`,
+      `ui-tag-size-${size}`,
       { checkable: !!checkable, checked: checkable ? checkable.checked : false }
     ]"
     :disabled="disabled"
@@ -174,7 +174,7 @@ const slots = useSlots()
 }
 
 // size
-.size-small {
+.ui-tag-size-small {
   --ui-tag-padding: 0 8px;
   --ui-tag-height: 20px;
   --ui-tag-font-size: 12px;
diff --git a/spx-gui/src/components/ui/UITextInput.vue b/spx-gui/src/components/ui/UITextInput.vue
index 069e85943..ab0745b5f 100644
--- a/spx-gui/src/components/ui/UITextInput.vue
+++ b/spx-gui/src/components/ui/UITextInput.vue
@@ -2,7 +2,7 @@
   <NInput
     ref="nInput"
     class="ui-text-input"
-    :class="[`color-${color}`, `size-${size}`]"
+    :class="[`color-${color}`, `ui-input-size-${size}`]"
     :placeholder="placeholder || ''"
     :value="value"
     :type="type"
@@ -105,10 +105,10 @@ onMounted(() => {
 }
 
 // size
-.size-medium {
+.ui-input-size-medium {
   --ui-text-input-height: 32px;
 }
-.size-large {
+.ui-input-size-large {
   --ui-text-input-height: 40px;
 }
 
diff --git a/spx-gui/src/components/ui/empty/UIEmpty.vue b/spx-gui/src/components/ui/empty/UIEmpty.vue
index f6d26fc16..45015e132 100644
--- a/spx-gui/src/components/ui/empty/UIEmpty.vue
+++ b/spx-gui/src/components/ui/empty/UIEmpty.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-empty" :class="[`size-${size}`]">
+  <div class="ui-empty" :class="[`ui-empty-size-${size}`]">
     <template v-if="size === 'large'">
       <img :src="img" />
       <slot></slot>
@@ -84,7 +84,7 @@ const slots = useSlots()
   justify-content: center;
 }
 
-.size-large {
+.ui-empty-size-large {
   width: 100%;
   flex-direction: column;
   gap: 12px;
@@ -94,7 +94,7 @@ const slots = useSlots()
   color: var(--ui-color-grey-1000);
 }
 
-.size-extra-large {
+.ui-empty-size-extra-large {
   flex-direction: column;
 
   .text {
@@ -118,8 +118,8 @@ const slots = useSlots()
   }
 }
 
-.size-small,
-.size-medium {
+.ui-empty-size-small,
+.ui-empty-size-medium {
   color: var(--ui-color-grey-600);
   gap: 8px;
 }
diff --git a/spx-gui/src/components/ui/global.css b/spx-gui/src/components/ui/global.css
index 34e65297e..fe84e1947 100644
--- a/spx-gui/src/components/ui/global.css
+++ b/spx-gui/src/components/ui/global.css
@@ -1,18 +1,18 @@
 @import './reset.css' layer(base);
 
 @layer base {
-	*,
-	::before,
-	::after {
-		box-sizing: border-box;
-	}
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
 
-	button {
-		font-family: inherit;
-	}
+  button {
+    font-family: inherit;
+  }
 }
 
 @font-face {
-	font-family: 'AlibabaHealthB';
-	src: url('./fonts/AlibabaHealthFont2.0CN-85B.ttf') format('truetype');
-}
\ No newline at end of file
+  font-family: 'AlibabaHealthB';
+  src: url('./fonts/AlibabaHealthFont2.0CN-85B.ttf') format('truetype');
+}
diff --git a/spx-gui/src/components/ui/modal/UIModal.vue b/spx-gui/src/components/ui/modal/UIModal.vue
index 6410f9f87..d215bf1fa 100644
--- a/spx-gui/src/components/ui/modal/UIModal.vue
+++ b/spx-gui/src/components/ui/modal/UIModal.vue
@@ -12,7 +12,7 @@
     <div
       ref="containerRef"
       v-radar="radar ?? { name: 'Modal', desc: 'A modal dialog for specific purpose' }"
-      :class="['container', `size-${size || 'medium'}`]"
+      :class="['container', `ui-modal-size-${size || 'medium'}`]"
     >
       <slot></slot>
     </div>
@@ -116,19 +116,19 @@ useModalEsc(
   overflow: hidden;
 }
 
-.size-small {
+.ui-modal-size-small {
   width: 480px;
 }
 
-.size-medium {
+.ui-modal-size-medium {
   width: 640px;
 }
 
-.size-large {
+.ui-modal-size-large {
   width: 960px;
 }
 
-.size-full {
+.ui-modal-size-full {
   width: 100%;
   margin: 16px;
 }
diff --git a/spx-gui/src/components/ui/modal/UIModalClose.vue b/spx-gui/src/components/ui/modal/UIModalClose.vue
index e1a4b05c9..9bbf67361 100644
--- a/spx-gui/src/components/ui/modal/UIModalClose.vue
+++ b/spx-gui/src/components/ui/modal/UIModalClose.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-radar="{ name: 'Close button', desc: 'Click to close the modal' }" :class="['ui-modal-close', `size-${size}`]">
+  <div
+    v-radar="{ name: 'Close button', desc: 'Click to close the modal' }"
+    :class="['ui-modal-close', `ui-modal-close-size-${size}`]"
+  >
     <UIIcon type="close" class="icon" />
   </div>
 </template>
@@ -34,7 +37,7 @@ withDefaults(
     background-color: var(--ui-color-grey-500);
   }
 
-  &.size-medium {
+  &.ui-modal-close-size-medium {
     width: 28px;
     height: 28px;
 
@@ -44,7 +47,7 @@ withDefaults(
     }
   }
 
-  &.size-large {
+  &.ui-modal-close-size-large {
     width: 32px;
     height: 32px;
 
diff --git a/spx-gui/src/pages/404/index.vue b/spx-gui/src/pages/404/index.vue
index 1d2c0c4e2..cfee3c308 100644
--- a/spx-gui/src/pages/404/index.vue
+++ b/spx-gui/src/pages/404/index.vue
@@ -23,7 +23,7 @@ const router = useRouter()
       </p>
       <UIButton
         v-radar="{ name: '404 go home button', desc: 'Button to go back to home page' }"
-        class="mt-4 h-9 text-[15px]"
+        class="mt-4 h-9 text-15"
         @click="router.push('/')"
         >{{ $t({ en: 'Return to home page', zh: '回到首页' }) }}</UIButton
       >
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index 51523a910..2706b4019 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -602,7 +602,7 @@ const remixesRet = useQuery(
               name: 'Project details',
               desc: 'Collapsible sections showing project description, instructions and release history'
             }"
-            class="collapse"
+            class="collapse-container"
             :default-expanded-names="['description', 'instructions', 'releases']"
           >
             <UICollapseItem :title="$t({ en: 'Description', zh: '描述' })" name="description">
@@ -841,7 +841,7 @@ const remixesRet = useQuery(
     margin: 24px 0 16px;
   }
 
-  .collapse {
+  .collapse-container {
     margin-bottom: 8px;
     flex: 1 1 0;
     overflow-y: auto;
diff --git a/spx-gui/src/pages/sign-in/token.vue b/spx-gui/src/pages/sign-in/token.vue
index dee70301f..d45bd4140 100644
--- a/spx-gui/src/pages/sign-in/token.vue
+++ b/spx-gui/src/pages/sign-in/token.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full w-full items-center justify-center">
     <UIForm class="flex w-80 flex-col" :form="form" @submit="handleSubmit.fn">
-      <h1 class="mb-4 text-center text-body">{{ $t(title) }}</h1>
+      <h1 class="mb-4 text-center text-16">{{ $t(title) }}</h1>
       <UIFormItem path="token">
         <UITextInput
           v-model:value="form.value.token"

From a29a8960a40d658eb5ef5c583ad6548dc026acc7 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 31 Mar 2026 21:48:26 +0800
Subject: [PATCH 04/29] batch migration task 1

---
 docs/develop/tailwind-css-migration.md        |  59 +++++++-
 spx-gui/AGENTS.md                             |   5 +
 .../browser-check/BrowserVersionReminder.vue  |  12 +-
 .../app/device-check/MobileReminder.vue       |  51 +------
 .../UpdateNotificationWrapper.vue             |  53 ++-----
 .../asset/gen/animation/AnimationGenItem.vue  |  11 +-
 .../asset/gen/costume/CostumeGenItem.vue      |  15 +-
 .../components/asset/gen/sprite/SpriteGen.vue |   2 -
 .../asset/gen/sprite/SpriteGenItem.vue        |   2 -
 .../asset/gen/sprite/SpriteSettingsInput.vue  |   2 -
 .../components/community/CommunityNavbar.vue  |  13 +-
 .../components/community/MyProjectsEmpty.vue  |   2 -
 .../components/community/ProjectsSection.vue  |   2 +-
 spx-gui/src/components/community/TextView.vue |  10 +-
 .../community/footer/CommunityFooter.vue      |  47 ++----
 .../community/home/banner/GuestBanner.vue     |  47 ++----
 .../community/project/OwnerInfo.vue           |  49 ++----
 .../community/project/ReleaseHistory.vue      |   2 -
 .../community/user/AvatarZoomSlider.vue       |  71 ++-------
 .../community/user/EditAvatarModal.vue        |  49 ++----
 .../community/user/EditProfileModal.vue       |  91 ++----------
 .../community/user/FollowButton.vue           |   2 -
 .../community/user/ModifyUsernameModal.vue    |  12 +-
 .../components/community/user/UserAvatar.vue  |  32 +---
 .../components/community/user/UserHeader.vue  |  87 ++---------
 .../components/community/user/UserItem.vue    |  59 ++------
 .../community/user/UserJoinedAt.vue           |  10 +-
 .../community/user/UserUsernameInline.vue     |  92 ++----------
 .../community/user/content/UserContent.vue    |  41 +----
 .../user/sidebar/UserSidebarItem.vue          |  27 +---
 .../course/management/CourseEditModal.vue     |  56 ++-----
 .../course/management/CourseItem.vue          |  80 +++-------
 .../management/CourseItemCornerMenu.vue       |  32 +---
 .../course/management/CourseItemMini.vue      |  67 ++-------
 .../management/CourseManagementModal.vue      |  61 ++------
 .../course/management/CourseSelector.vue      |  45 +-----
 .../management/CourseSeriesEditModal.vue      | 113 ++++----------
 .../course/management/CourseSeriesItem.vue    | 140 +++++-------------
 .../management/CourseSeriesItemCornerMenu.vue |  32 +---
 .../CourseSeriesManagementModal.vue           |  61 ++------
 .../management/ProjectReferencesInput.vue     |  64 ++------
 .../course/management/SelectedCoursesList.vue |  51 ++-----
 .../course/management/ThumbnailUploader.vue   |  40 +----
 .../ui/completion/CompletionUI.vue            |   2 -
 .../ui/context-menu/ContextMenu.vue           |   2 -
 .../ui/definition/DefinitionDetail.vue        |   2 -
 .../ui/markdown/ResourcePreview.vue           |   2 -
 .../components/editor/common/PlayControl.vue  |   6 +-
 .../components/editor/navbar/EditorNavbar.vue |   2 +-
 .../editor/sprite/CostumeDetail.vue           |  29 +---
 .../editor/stage/backdrop/BackdropDetail.vue  |  20 +--
 .../src/components/navbar/NavbarDropdown.vue  |  27 +---
 spx-gui/src/components/navbar/NavbarLang.vue  |  16 +-
 spx-gui/src/components/navbar/NavbarLogo.vue  |  32 ++--
 .../src/components/navbar/NavbarProfile.vue   |  65 ++------
 .../src/components/navbar/NavbarTutorials.vue |  24 +--
 .../components/project/ProjectCreateModal.vue |  17 +--
 .../src/components/project/ProjectItem.vue    |   4 +-
 .../project/ProjectModifyNameModal.vue        |  12 +-
 .../components/project/ProjectOpenModal.vue   |  17 +--
 .../project/ProjectPublishModal.vue           |  37 +----
 .../project/ProjectPublishedModal.vue         |  23 +--
 .../project/ProjectSharingLinkModal.vue       |  23 +--
 .../src/components/tutorials/CourseItem.vue   |  46 +-----
 .../tutorials/TutorialCourseSuccessModal.vue  |  42 +-----
 .../tutorials/TutorialStateIndicator.vue      |  38 +----
 spx-gui/src/pages/community/search.vue        |  44 +-----
 .../src/pages/community/user/followers.vue    |   9 +-
 .../src/pages/community/user/following.vue    |   9 +-
 spx-gui/src/pages/community/user/index.vue    |  42 +-----
 spx-gui/src/pages/community/user/likes.vue    |  23 +--
 spx-gui/src/pages/community/user/overview.vue |  18 +--
 spx-gui/src/pages/community/user/projects.vue |  31 +---
 spx-gui/src/pages/tutorials/course-series.vue | 106 +++----------
 74 files changed, 494 insertions(+), 2075 deletions(-)

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
index e1e78ca09..754fd38b3 100644
--- a/docs/develop/tailwind-css-migration.md
+++ b/docs/develop/tailwind-css-migration.md
@@ -397,6 +397,12 @@ Token usage preference:
 - in Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`
 - in local CSS or SCSS rules, prefer using the original `--ui-*` variables directly, because `--ui-*` remains the source of truth and the Tailwind bridge exists primarily for utility-class authoring
 
+Bridge naming and text-token preference:
+
+- choose bridge names that do not collide with Tailwind defaults or existing UI-library class names; avoid introducing helpers such as `leading-1` that look like built-in Tailwind utilities but mean something project-specific
+- define text-size tokens in `@theme` before using named utilities such as `text-12`, `text-13`, `text-24`, or `text-36`
+- when a named text utility should carry a default line-height, define it through the paired `--text-*-line-height` token instead of introducing a parallel custom leading scale
+
 ### 3. Prefer Tailwind For Straightforward Layout And Surface Styling
 
 The pilot confirmed that Tailwind works well for the following kinds of changes:
@@ -471,7 +477,58 @@ The pilot reinforced the original migration strategy:
 
 The goal is clearer and more maintainable code, not maximizing utility-class usage.
 
-### 8. Keep Exact Local Values Local, With A Visible TODO
+### 8. Preserve Styling Hook Classes Across Component Boundaries
+
+Recent migrations exposed a failure mode that is easy to miss in review: some business components rely on semantic classes exported by child components as part of a styling contract.
+
+Examples from the pilot:
+
+- `CourseItem.vue` and `CourseSeriesItem.vue` reveal slotted menus through parent `:deep(.corner-menu)` rules
+- `CourseSelector.vue` adjusts a child action icon through selectors that depend on `.course-item-mini` and `.action-icon`
+
+Preferred style:
+
+- treat these semantic classes as styling API surfaces, not incidental markup
+- do not remove them just because the element's own spacing, color, or border styles moved into Tailwind utilities
+- when a parent or sibling component still depends on one of these classes, preserve it and migrate only the visual declarations around it
+
+Rule of thumb:
+
+- if a class name is referenced outside the current component file, keep it unless the dependent selector is removed in the same change
+
+### 9. Keep Cross-Component Descendant Styling In Local CSS
+
+The pilot also showed that Tailwind arbitrary descendant selectors become hard to read once they cross component boundaries, target slot content, or mix with `:deep(...)`.
+
+Examples:
+
+- hover-reveal logic for slotted corner menus
+- parent selectors that style child internals through `:deep(...)`
+- slot-content targeting where the child controls the rendered class names
+
+Preferred style:
+
+- keep authored layout, spacing, and simple surfaces in Tailwind
+- keep cross-component descendant styling in a small local CSS block, preferably plain CSS when SCSS features are not needed
+
+This split is usually clearer than packing selectors such as `[&:hover_.corner-menu]...` into the template.
+
+### 10. Respect Internal Root Styles Of Wrapper Components
+
+Wrapper components in `src/components/ui/` sometimes style their own root elements in ways that external utilities cannot safely replace.
+
+Two concrete cases from the pilot:
+
+- `UIImg` keeps `position: relative` on its root so loading overlays and background-image behavior work correctly
+- `UIIcon` fixes its root width and height, so `h-*` / `w-*` classes on the component instance may not win
+
+Preferred style:
+
+- before applying root-level positioning or sizing utilities to a wrapped UI component, inspect the component implementation
+- if the wrapper already owns the root layout semantics, use an outer wrapper for positioning concerns such as `absolute`, `top`, `left`, and `z-index`
+- for one-off width/height overrides on wrapper roots such as `UIIcon`, prefer inline `style` when that is the shortest and clearest way to win the cascade
+
+### 11. Keep Exact Local Values Local, With A Visible TODO
 
 Some migrated components still need exact local visual values that are not part of the current token system.
 
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 865832f8b..9834d8e22 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -101,11 +101,16 @@ When working with backend unique string identifiers such as `username`, project
 * Prefer Tailwind for straightforward layout and surface styling: flex, grid, spacing, sizing, alignment, overflow, simple typography, and simple hover states.
 * When Tailwind classes stay readable, write them directly in the template and remove the local style block after verification.
 * Keep local CSS or SCSS for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets.
+* Preserve semantic hook classes that are consumed by parent selectors, slot content, or `:deep(...)` rules. Do not remove classes such as `.corner-menu` or `.course-item-mini` just because the element's own visual styles moved to Tailwind.
+* Prefer plain local CSS over Tailwind arbitrary descendant selectors for cross-component styling, slot-content targeting, and `:deep(...)` behavior. Keep Tailwind for the authored layout, but keep these cross-component hooks easy to read and audit.
 * Do not force a file to become fully Tailwind if a small amount of local CSS or SCSS remains the clearest expression.
 * Use `:style` for one-off values that are clearer inline than as Tailwind arbitrary values or custom utilities.
 * For important or non-obvious background assets, prefer TypeScript imports plus inline `backgroundImage` binding over Tailwind `bg-[url(...)]` classes.
+* Before styling `UIImg`, `UIIcon`, or similar wrappers with root-level positioning or sizing utilities, check whether the component already styles its own root element. If those internal root styles conflict, prefer an outer wrapper for layout and inline `style` for one-off width/height overrides.
 * Do not introduce setup variables for single-use style values unless they are reused, computed, or materially improve readability.
 * When a non-token visual value needs to remain exact and local, keep it local instead of forcing it into the global token bridge. Add a nearby comment such as `TODO: review this ... value` so it is visible in later design cleanup or tokenization work.
+* When extending the Tailwind theme bridge in `src/app.css`, choose token names that do not collide with Tailwind defaults or existing UI-library class names. Define text-size tokens before using named utilities like `text-24`, and use `--text-*-line-height` when a named text utility should carry a default line-height.
+* Preserve existing comments and TODOs during style migration when they still explain a real styling constraint or follow-up.
 
 ### Menu Item Text Guidelines
 
diff --git a/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue b/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue
index e8ffa0ae5..be6886cfb 100644
--- a/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue
+++ b/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue
@@ -8,7 +8,8 @@
     @update:visible="visible = $event"
   >
     <div>{{ $t(content) }}</div>
-    <footer class="footer">
+
+    <footer class="mt-6 flex justify-end gap-3">
       <UIButton
         v-radar="{
           name: 'Do not show again button',
@@ -87,12 +88,3 @@ onMounted(() => {
   visible.value = true
 })
 </script>
-
-<style scoped lang="scss">
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-}
-</style>
diff --git a/spx-gui/src/components/app/device-check/MobileReminder.vue b/spx-gui/src/components/app/device-check/MobileReminder.vue
index 7fa1a1129..4a2444d57 100644
--- a/spx-gui/src/components/app/device-check/MobileReminder.vue
+++ b/spx-gui/src/components/app/device-check/MobileReminder.vue
@@ -1,11 +1,13 @@
 <template>
-  <div class="mobile-reminder">
-    <div class="guide-img">
-      <img :src="imgDesktopRequired" alt="Desktop Required Image" />
+  <div class="flex min-h-screen flex-col items-center justify-center px-15 py-10">
+    <div class="mb-12">
+      <img class="h-auto w-60" :src="imgDesktopRequired" alt="Desktop Required Image" />
     </div>
-    <div class="guide-text">
-      <h1>{{ t({ en: 'Please visit on desktop', zh: '请在电脑上访问' }) }}</h1>
-      <p>
+    <div class="mb-10 text-center">
+      <h1 class="mb-3 text-20 font-semibold text-grey-1000">
+        {{ t({ en: 'Please visit on desktop', zh: '请在电脑上访问' }) }}
+      </h1>
+      <p class="text-body text-grey-900">
         {{
           t({
             en: 'XBuilder is designed for desktop devices. Please visit this page on your computer for the full experience.',
@@ -42,40 +44,3 @@ const handleCopy = useMessageHandle(
   { en: 'Copied to clipboard', zh: '已复制到剪贴板' }
 ).fn
 </script>
-
-<style lang="scss" scoped>
-.mobile-reminder {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 60px;
-
-  .guide-img {
-    margin-bottom: 48px;
-    img {
-      width: 240px;
-      height: auto;
-    }
-  }
-
-  .guide-text {
-    margin-bottom: 40px;
-    text-align: center;
-
-    h1 {
-      font-size: 20px;
-      font-weight: 600;
-      color: var(--ui-color-grey-1000);
-      margin-bottom: 12px;
-    }
-
-    p {
-      font-size: 14px;
-      line-height: 22px;
-      color: var(--ui-color-grey-900);
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue b/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
index e0f44a89a..7ded17675 100644
--- a/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
+++ b/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="update-notification-wrapper">
-    <div v-if="visible" class="notification" role="status" aria-live="polite">
-      <div class="message">
-        <DotLottieVue class="icon" autoplay loop :src="notificationIconUrl" />
+  <div class="flex h-full min-h-0 flex-col">
+    <div
+      v-if="visible"
+      class="flex flex-none items-center justify-center gap-6 bg-yellow-200 px-6 py-2.75 text-grey-900"
+      role="status"
+      aria-live="polite"
+    >
+      <div class="flex items-center gap-3 text-body text-grey-900">
+        <DotLottieVue class="h-6 w-6" autoplay loop :src="notificationIconUrl" />
         {{
           $t({
             en: 'A new version of XBuilder is available. Reload to get the latest features and improvements.',
@@ -20,7 +25,7 @@
         {{ $t({ en: 'Reload now', zh: '立即刷新' }) }}
       </UIButton>
     </div>
-    <div class="content">
+    <div class="min-h-0 flex-1">
       <slot></slot>
     </div>
   </div>
@@ -54,41 +59,3 @@ onUnmounted(() => {
   checker.stop()
 })
 </script>
-
-<style lang="scss" scoped>
-.update-notification-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-}
-
-.notification {
-  flex: 0 0 auto;
-  padding: 11px 24px;
-  background-color: var(--ui-color-yellow-200);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 24px;
-  color: var(--ui-color-grey-900);
-
-  .message {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 14px;
-    line-height: 22px;
-
-    .icon {
-      width: 24px;
-      height: 24px;
-    }
-  }
-}
-
-.content {
-  flex: 1 1 auto;
-  min-height: 0;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue b/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue
index b0f2ab222..d36bc64a0 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue
@@ -68,12 +68,12 @@ const highlight = computed(() => props.gen.generateVideoState.status === 'finish
     <template v-if="gen.result != null" #preview>
       <CostumesAutoPlayer
         v-if="hovered"
-        class="preview"
+        class="h-full w-full"
         :costumes="gen.result.costumes"
         :duration="gen.result.duration"
         :placeholder-img="imgSrc"
       />
-      <UIImg v-else class="preview" :src="imgSrc" :loading="imgLoading" />
+      <UIImg v-else class="h-full w-full" :src="imgSrc" :loading="imgLoading" />
     </template>
     <UIBlockItemTitle size="medium">{{ gen.name }}</UIBlockItemTitle>
     <CornerMenu v-if="active" color="primary">
@@ -82,10 +82,3 @@ const highlight = computed(() => props.gen.generateVideoState.status === 'finish
     </CornerMenu>
   </GenItem>
 </template>
-
-<style lang="scss" scoped>
-.preview {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue b/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue
index 03f22343a..3961e72b3 100644
--- a/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue
+++ b/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue
@@ -66,9 +66,9 @@ const highlight = computed(() => props.gen.generateState.status === 'finished')
     @click="emit('click')"
   >
     <template v-if="gen.result != null" #preview>
-      <UIImg class="preview" :src="url" :loading="imageLoading" />
+      <UIImg class="h-full w-full" :src="url" :loading="imageLoading" />
     </template>
-    <UIBlockItemTitle size="medium" :class="{ 'is-default': isDefault }">{{ gen.name }}</UIBlockItemTitle>
+    <UIBlockItemTitle size="medium" :class="{ 'text-turquoise-500': isDefault }">{{ gen.name }}</UIBlockItemTitle>
     <CornerMenu v-if="operable && active" color="primary">
       <RenameMenuItem v-radar="{ name: 'Rename', desc: 'Click to rename the costume' }" @click="emit('rename')" />
       <RemoveMenuItem
@@ -79,14 +79,3 @@ const highlight = computed(() => props.gen.generateState.status === 'finished')
     </CornerMenu>
   </GenItem>
 </template>
-
-<style lang="scss" scoped>
-.preview {
-  width: 100%;
-  height: 100%;
-}
-
-.is-default {
-  color: var(--ui-color-turquoise-500);
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
index 0d81fcbb8..89a60fa93 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
@@ -59,5 +59,3 @@ provideLocalEditorCtx(editorCtxInGen)
     @resolved="emit('resolved', $event)"
   />
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue
index ebc43ca81..9ea468609 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue
@@ -47,5 +47,3 @@ const highlight = computed(() => props.gen.contentPreparingState.status === 'fin
     <UIBlockItemTitle size="medium">{{ gen.settings.name }}</UIBlockItemTitle>
   </GenItem>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
index fa76ac268..676f47741 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
@@ -79,5 +79,3 @@ const submitText = computed(() => {
     </template>
   </SettingsInput>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/community/CommunityNavbar.vue b/spx-gui/src/components/community/CommunityNavbar.vue
index 65bf5c182..338e53e03 100644
--- a/spx-gui/src/components/community/CommunityNavbar.vue
+++ b/spx-gui/src/components/community/CommunityNavbar.vue
@@ -5,7 +5,7 @@
         :trigger-radar="{ name: 'Project menu', desc: 'Hover to see project options (create/open project)' }"
       >
         <template #trigger>
-          <UIIcon type="plus" />
+          <UIIcon type="plus" style="width: 24px; height: 24px" />
         </template>
         <UIMenu>
           <NavbarNewProjectItem />
@@ -16,7 +16,7 @@
       <NavbarTutorials v-if="showTutorialsEntry" />
     </template>
     <template #right>
-      <div class="search">
+      <div class="flex w-85 items-center px-3">
         <UITextInput
           v-model:value="searchInput"
           v-radar="{ name: 'Search input', desc: 'Input and press enter to search projects' }"
@@ -76,12 +76,3 @@ watch(
   { immediate: true }
 )
 </script>
-
-<style lang="scss" scoped>
-.search {
-  padding: 0 12px;
-  width: 340px;
-  display: flex;
-  align-items: center;
-}
-</style>
diff --git a/spx-gui/src/components/community/MyProjectsEmpty.vue b/spx-gui/src/components/community/MyProjectsEmpty.vue
index 9a74aa25c..f661763da 100644
--- a/spx-gui/src/components/community/MyProjectsEmpty.vue
+++ b/spx-gui/src/components/community/MyProjectsEmpty.vue
@@ -40,5 +40,3 @@ const handleNewProject = useMessageHandle(
     </template>
   </UIEmpty>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
index f02c5cf85..9fa6917b5 100644
--- a/spx-gui/src/components/community/ProjectsSection.vue
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -13,7 +13,7 @@
         :to="linkTo"
       >
         <slot name="link"></slot>
-        <UIIcon class="ml-2 h-5 w-5" type="arrowRightSmall" />
+        <UIIcon class="ml-2" style="width: 20px; height: 20px" type="arrowRightSmall" />
       </RouterUILink>
     </header>
     <div
diff --git a/spx-gui/src/components/community/TextView.vue b/spx-gui/src/components/community/TextView.vue
index 9ef1ce098..11b8607b4 100644
--- a/spx-gui/src/components/community/TextView.vue
+++ b/spx-gui/src/components/community/TextView.vue
@@ -8,16 +8,8 @@ defineProps<{
 </script>
 
 <template>
-  <div class="text-view">
+  <div class="overflow-y-auto wrap-break-word whitespace-pre-wrap">
     <template v-if="!!text">{{ text }}</template>
     <template v-else>{{ placeholder ?? '&nbsp;' }}</template>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.text-view {
-  overflow-y: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-</style>
diff --git a/spx-gui/src/components/community/footer/CommunityFooter.vue b/spx-gui/src/components/community/footer/CommunityFooter.vue
index 6727e29c6..8fd6ec239 100644
--- a/spx-gui/src/components/community/footer/CommunityFooter.vue
+++ b/spx-gui/src/components/community/footer/CommunityFooter.vue
@@ -4,43 +4,26 @@ import { UILink } from '@/components/ui'
 </script>
 
 <template>
-  <footer v-if="showLicense" class="community-footer">
-    <span class="part">{{ $t({ en: '© 2025 Qiniu Cloud.', zh: '© 2025 七牛云' }) }}</span>
+  <footer
+    v-if="showLicense"
+    class="flex h-12.5 w-full shrink-0 items-center justify-center gap-6 text-12 text-grey-700"
+  >
+    <span class="flex items-center justify-center">{{ $t({ en: '© 2025 Qiniu Cloud.', zh: '© 2025 七牛云' }) }}</span>
     <UILink
-      class="part"
+      class="flex items-center justify-center no-underline"
       type="boring"
       target="_blank"
       href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011502000961"
-      ><img class="icon" src="./license-icon.png" />沪公网安备 31011502000961 号</UILink
     >
-    <UILink class="part" type="boring" target="_blank" href="https://beian.miit.gov.cn/"
-      >浙 ICP 备 2025161674 号-3</UILink
+      <img class="mr-1 h-4 w-4" src="./license-icon.png" />沪公网安备 31011502000961 号
+    </UILink>
+    <UILink
+      class="flex items-center justify-center no-underline"
+      type="boring"
+      target="_blank"
+      href="https://beian.miit.gov.cn/"
     >
+      浙 ICP 备 2025161674 号-3
+    </UILink>
   </footer>
 </template>
-
-<style lang="scss" scoped>
-.community-footer {
-  flex: 0 0 auto;
-  width: 100%;
-  height: 50px;
-  display: flex;
-  flex-direction: row;
-  gap: 24px;
-  justify-content: center;
-  align-items: center;
-  color: var(--ui-color-grey-700);
-  font-size: 12px;
-}
-.part {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-}
-.icon {
-  margin-right: 4px;
-  width: 16px;
-  height: 16px;
-}
-</style>
diff --git a/spx-gui/src/components/community/home/banner/GuestBanner.vue b/spx-gui/src/components/community/home/banner/GuestBanner.vue
index 3e1442feb..50f2b6aae 100644
--- a/spx-gui/src/components/community/home/banner/GuestBanner.vue
+++ b/spx-gui/src/components/community/home/banner/GuestBanner.vue
@@ -2,6 +2,7 @@
 import { initiateSignIn } from '@/stores/user'
 import { UIButton } from '@/components/ui'
 import CommunityCard from '../../CommunityCard.vue'
+import bgSvg from './bg.svg'
 
 function handleJoin() {
   initiateSignIn()
@@ -9,17 +10,20 @@ function handleJoin() {
 </script>
 
 <template>
-  <CommunityCard class="guest-banner">
-    <div class="main">
-      <h1 class="title">
+  <CommunityCard class="p-3">
+    <div
+      class="relative rounded-2 bg-[#f0faff] bg-no-repeat px-13 pt-12 pb-12.5 text-[#073156]"
+      :style="{ backgroundImage: `url(${bgSvg})`, backgroundPosition: 'center right 54px' }"
+    >
+      <h1 class="text-24">
         {{ $t({ en: 'Join XBuilder', zh: '加入 XBuilder' }) }}
       </h1>
-      <h4 class="sub-title">
+      <h4 class="mt-2 text-13/5">
         {{ $t({ en: 'Build and share your projects', zh: '创作并分享你的作品' }) }}
       </h4>
       <UIButton
         v-radar="{ name: 'Join now button', desc: 'Click to sign in/up' }"
-        class="join-btn"
+        class="mt-7"
         color="primary"
         size="large"
         @click="handleJoin"
@@ -29,36 +33,3 @@ function handleJoin() {
     </div>
   </CommunityCard>
 </template>
-
-<style lang="scss" scoped>
-.guest-banner {
-  padding: 12px;
-}
-
-.main {
-  position: relative;
-  padding: 48px 52px 50px;
-
-  border-radius: var(--ui-border-radius-2);
-  color: #073156;
-  background-color: #f0faff;
-  background-image: url('./bg.svg');
-  background-repeat: no-repeat;
-  background-position: center right 54px;
-}
-
-.title {
-  font-size: 24px;
-  line-height: 1.5;
-}
-
-.sub-title {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 8px;
-}
-
-.join-btn {
-  margin-top: 28px;
-}
-</style>
diff --git a/spx-gui/src/components/community/project/OwnerInfo.vue b/spx-gui/src/components/community/project/OwnerInfo.vue
index 9f22363e8..9e724e3e0 100644
--- a/spx-gui/src/components/community/project/OwnerInfo.vue
+++ b/spx-gui/src/components/community/project/OwnerInfo.vue
@@ -12,46 +12,15 @@ const avatarUrl = useAvatarUrl(() => user.value?.avatar)
 </script>
 
 <template>
-  <UserLink class="owner-info" :user="user?.username ?? null">
-    <i class="avatar" :style="user != null ? { backgroundImage: `url(${avatarUrl})` } : null"></i>
+  <!-- TODO: extract to `@/components/ui/`? -->
+  <UserLink
+    class="link-boring group inline-flex items-center gap-1 text-title underline"
+    :user="user?.username ?? null"
+  >
+    <i
+      class="block h-6 w-6 rounded-full border-2 border-grey-100 bg-grey-100 bg-center bg-contain transition-[border-color] duration-100 group-hover:border-primary-400 group-active:border-primary-600"
+      :style="user != null ? { backgroundImage: `url(${avatarUrl})` } : null"
+    ></i>
     {{ user?.displayName }}
   </UserLink>
 </template>
-
-<style lang="scss" scoped>
-.owner-info {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  color: var(--ui-color-title);
-  // TODO: extract to `@/components/ui/`?
-  text-decoration: underline;
-  transition: 0.1s;
-
-  &:hover {
-    color: var(--ui-color-primary-main);
-    .avatar {
-      border-color: var(--ui-color-primary-400);
-    }
-  }
-  &:active {
-    color: var(--ui-color-primary-600);
-    .avatar {
-      border-color: var(--ui-color-primary-600);
-    }
-  }
-}
-
-.avatar {
-  display: block;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  border: 2px solid var(--ui-color-grey-100);
-  background-color: var(--ui-color-grey-100);
-  background-position: center;
-  background-size: contain;
-  transition: 0.1s;
-}
-</style>
diff --git a/spx-gui/src/components/community/project/ReleaseHistory.vue b/spx-gui/src/components/community/project/ReleaseHistory.vue
index bf8207672..ffd6e7a00 100644
--- a/spx-gui/src/components/community/project/ReleaseHistory.vue
+++ b/spx-gui/src/components/community/project/ReleaseHistory.vue
@@ -28,5 +28,3 @@ defineProps<{
     </UITimelineItem>
   </UITimeline>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/community/user/AvatarZoomSlider.vue b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
index 050dfa4dc..567044d94 100644
--- a/spx-gui/src/components/community/user/AvatarZoomSlider.vue
+++ b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
@@ -31,19 +31,19 @@ function handleValueUpdate(value: number) {
 </script>
 
 <template>
-  <div class="avatar-zoom-slider">
+  <div class="flex h-12 w-91.5 items-center justify-center gap-2.5">
     <button
       v-radar="{ name: 'Zoom out avatar button', desc: 'Click to zoom out the avatar image' }"
-      class="zoom-button"
+      class="flex h-6 w-6 flex-none items-center justify-center border-none bg-transparent p-0 text-grey-900 enabled:cursor-pointer enabled:hover:text-grey-1000 disabled:cursor-not-allowed disabled:text-grey-700"
       type="button"
       :disabled="props.disabled || props.value <= props.min"
       @click="handleValueUpdate(props.value - props.buttonStep)"
     >
-      <UIIcon class="zoom-icon" type="minus" />
+      <UIIcon style="width: 20px; height: 20px" type="minus" />
     </button>
 
     <UISlider
-      class="slider"
+      class="slider min-w-0 flex-[1_1_auto]"
       update-on="input"
       :min="props.min"
       :max="props.max"
@@ -56,40 +56,29 @@ function handleValueUpdate(value: number) {
 
     <button
       v-radar="{ name: 'Zoom in avatar button', desc: 'Click to zoom in the avatar image' }"
-      class="zoom-button"
+      class="flex h-6 w-6 flex-none items-center justify-center border-none bg-transparent p-0 text-grey-900 enabled:cursor-pointer enabled:hover:text-grey-1000 disabled:cursor-not-allowed disabled:text-grey-700"
       type="button"
       :disabled="props.disabled || props.value >= props.max"
       @click="handleValueUpdate(props.value + props.buttonStep)"
     >
-      <UIIcon class="zoom-icon" type="plus" />
+      <UIIcon style="width: 20px; height: 20px" type="plus" />
     </button>
   </div>
 </template>
 
-<style scoped lang="scss">
-.avatar-zoom-slider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  width: 366px;
-  height: 48px;
-}
-
+<style scoped>
 .slider {
-  flex: 1 1 auto;
-  min-width: 0;
+}
 
-  &:deep(.n-slider-handle) {
-    background: transparent;
-    box-shadow: none;
-  }
+.slider:deep(.n-slider-handle) {
+  background: transparent;
+  box-shadow: none;
+}
 
-  &:deep(.n-slider-rail),
-  &:deep(.n-slider-rail__fill) {
-    height: 6px;
-    border-radius: 999px;
-  }
+.slider:deep(.n-slider-rail),
+.slider:deep(.n-slider-rail__fill) {
+  height: 6px;
+  border-radius: 999px;
 }
 
 .slider:deep(.thumb) {
@@ -98,32 +87,4 @@ function handleValueUpdate(value: number) {
     inset 0 0 0 2px var(--ui-color-primary-400),
     0 1px 2px rgb(36 41 47 / 10%);
 }
-
-.zoom-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--ui-color-grey-900);
-  cursor: pointer;
-
-  &:not(:disabled):hover {
-    color: var(--ui-color-grey-1000);
-  }
-
-  &:disabled {
-    color: var(--ui-color-grey-700);
-    cursor: not-allowed;
-  }
-}
-
-.zoom-icon {
-  width: 20px;
-  height: 20px;
-}
 </style>
diff --git a/spx-gui/src/components/community/user/EditAvatarModal.vue b/spx-gui/src/components/community/user/EditAvatarModal.vue
index 62f165cd6..e082cf4d5 100644
--- a/spx-gui/src/components/community/user/EditAvatarModal.vue
+++ b/spx-gui/src/components/community/user/EditAvatarModal.vue
@@ -392,21 +392,15 @@ async function handleImageLoad() {
   >
     <div
       ref="cropperHostRef"
-      class="cropper-host"
+      class="cropper-host mx-auto aspect-square w-91.5 overflow-hidden bg-grey-300"
       :class="{ disabled: handleConfirm.isLoading.value }"
       @wheel.prevent="handleWheelZoom"
     >
-      <img
-        ref="imageRef"
-        class="source-image"
-        :src="sourceUrlRef"
-        @load="handleImageLoad"
-        @error="handleImageLoadError.fn"
-      />
+      <img ref="imageRef" class="hidden" :src="sourceUrlRef" @load="handleImageLoad" @error="handleImageLoadError.fn" />
     </div>
 
     <AvatarZoomSlider
-      class="zoom-slider"
+      class="mx-auto mt-2.5"
       :value="zoomValueRef"
       :min="zoomMin"
       :max="zoomMax"
@@ -416,8 +410,8 @@ async function handleImageLoad() {
       @update:value="setZoomValue"
     />
 
-    <footer class="footer">
-      <div class="actions">
+    <footer class="mt-10 flex justify-end">
+      <div class="flex items-center gap-5">
         <UIButton
           v-radar="{ name: 'Cancel edit avatar button', desc: 'Click to cancel editing avatar' }"
           color="boring"
@@ -440,38 +434,13 @@ async function handleImageLoad() {
   </UIFormModal>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .cropper-host {
-  width: 366px;
-  aspect-ratio: 1 / 1;
-  margin: 0 auto;
-  overflow: hidden;
-  background: var(--ui-color-grey-300);
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 0.9;
-  }
-}
-
-.source-image {
-  display: none;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 40px;
-}
-
-.zoom-slider {
-  margin: 10px auto 0;
 }
 
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 20px;
+.cropper-host.disabled {
+  pointer-events: none;
+  opacity: 0.9;
 }
 
 .cropper-host:deep(cropper-canvas) {
diff --git a/spx-gui/src/components/community/user/EditProfileModal.vue b/spx-gui/src/components/community/user/EditProfileModal.vue
index 25636452f..acac23d7a 100644
--- a/spx-gui/src/components/community/user/EditProfileModal.vue
+++ b/spx-gui/src/components/community/user/EditProfileModal.vue
@@ -117,19 +117,25 @@ const handleSubmit = useMessageHandle(async () => {
     :visible="props.visible"
     @update:visible="handleCancel"
   >
-    <div class="cover" :style="{ backgroundImage: `url(${coverImgUrl})` }"></div>
-    <div class="account-section">
+    <div
+      class="-mx-6 -mt-5 h-42 bg-center bg-cover bg-no-repeat"
+      :style="{ backgroundImage: `url(${coverImgUrl})` }"
+    ></div>
+    <div class="-mt-11 mb-large flex items-start gap-5">
       <button
         v-radar="{ name: 'Edit avatar button', desc: 'Click to choose a new avatar image' }"
-        class="avatar-button"
+        class="group relative h-30 w-30 flex-none cursor-pointer border-none bg-transparent p-0 outline-none shadow-none"
         type="button"
         @click="handleChooseAvatar.fn"
       >
-        <UIImg class="avatar" :src="avatarUrl" size="cover" />
-        <UIIcon class="avatar-trigger" type="camera" />
+        <UIImg class="h-full w-full rounded-full border-2 border-grey-100 bg-grey-100" :src="avatarUrl" size="cover" />
+        <UIIcon
+          class="absolute right-0 bottom-0 h-8 w-8 text-turquoise-200 transition-[color,transform] duration-200 group-hover:text-turquoise-300 group-focus-visible:text-turquoise-300 group-active:scale-[0.96]"
+          type="camera"
+        />
       </button>
       <UserUsernameInline
-        class="account-username"
+        class="mt-16 min-w-0"
         :username="props.user.username"
         show-modify
         @modified="handleUsernameModified"
@@ -150,7 +156,7 @@ const handleSubmit = useMessageHandle(async () => {
           :placeholder="$t({ en: 'Tell us something about you', zh: '介绍一下自己' })"
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-5 flex justify-end gap-3">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel editing profile' }"
           color="boring"
@@ -170,74 +176,3 @@ const handleSubmit = useMessageHandle(async () => {
     </UIForm>
   </UIFormModal>
 </template>
-
-<style lang="scss" scoped>
-.cover {
-  margin: -20px -24px 0;
-  height: 168px;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-
-.account-section {
-  display: flex;
-  align-items: flex-start;
-  gap: 20px;
-  margin: -44px 0 var(--ui-gap-large);
-}
-
-.avatar-button {
-  position: relative;
-  flex: 0 0 auto;
-  width: 120px;
-  height: 120px;
-  padding: 0;
-  border: none;
-  background: none;
-  outline: none;
-  box-shadow: none;
-  cursor: pointer;
-
-  &:hover .avatar-trigger,
-  &:focus-visible .avatar-trigger {
-    color: var(--ui-color-turquoise-300);
-  }
-
-  &:active .avatar-trigger {
-    transform: scale(0.96);
-  }
-}
-
-.avatar {
-  width: 100%;
-  height: 100%;
-  border: 2px solid var(--ui-color-grey-100);
-  border-radius: 50%;
-  background-color: var(--ui-color-grey-100);
-}
-
-.avatar-trigger {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 32px;
-  height: 32px;
-  color: var(--ui-color-turquoise-200);
-  transition:
-    color 0.2s,
-    transform 0.2s;
-}
-
-.account-username {
-  min-width: 0;
-  margin-top: 64px;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 20px;
-}
-</style>
diff --git a/spx-gui/src/components/community/user/FollowButton.vue b/spx-gui/src/components/community/user/FollowButton.vue
index cec3736fe..fefa9c944 100644
--- a/spx-gui/src/components/community/user/FollowButton.vue
+++ b/spx-gui/src/components/community/user/FollowButton.vue
@@ -40,5 +40,3 @@ const handleClick = useMessageHandle(async () => {
     {{ $t(following ? { en: 'Unfollow', zh: '取消关注' } : { en: 'Follow', zh: '关注' }) }}
   </UIButton>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/community/user/ModifyUsernameModal.vue b/spx-gui/src/components/community/user/ModifyUsernameModal.vue
index 93410068b..d9fa0ebe9 100644
--- a/spx-gui/src/components/community/user/ModifyUsernameModal.vue
+++ b/spx-gui/src/components/community/user/ModifyUsernameModal.vue
@@ -90,7 +90,7 @@ const handleSubmit = useMessageHandle(async () => {
           autofocus
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-large flex justify-end gap-middle pb-1">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel modifying username' }"
           color="boring"
@@ -110,13 +110,3 @@ const handleSubmit = useMessageHandle(async () => {
     </UIForm>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--ui-gap-middle);
-  margin-top: var(--ui-gap-large);
-  padding-bottom: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/community/user/UserAvatar.vue b/spx-gui/src/components/community/user/UserAvatar.vue
index 18ad8a068..580520f46 100644
--- a/spx-gui/src/components/community/user/UserAvatar.vue
+++ b/spx-gui/src/components/community/user/UserAvatar.vue
@@ -1,7 +1,7 @@
 <template>
   <UserLink
-    class="user-avatar"
-    :class="`size-${size}`"
+    class="block overflow-hidden rounded-full border-grey-100 bg-grey-100 bg-center bg-contain transition-[border-color] duration-100 hover:border-primary-400 active:border-primary-600"
+    :class="size === 'small' ? 'h-7.5 w-7.5 border-2' : 'h-12 w-12 border-3'"
     :style="avatarUrl != null ? { backgroundImage: `url(${avatarUrl})` } : null"
     :user="userInfo?.username ?? null"
   ></UserLink>
@@ -27,31 +27,3 @@ const props = withDefaults(
 const { data: userInfo } = useUser(() => props.user)
 const avatarUrl = useAvatarUrl(() => userInfo.value?.avatar)
 </script>
-
-<style lang="scss" scoped>
-.user-avatar {
-  display: block;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: 3px solid var(--ui-color-grey-100);
-  background-color: var(--ui-color-grey-100);
-  background-position: center;
-  background-size: contain;
-  transition: 0.1s;
-
-  &.size-small {
-    width: 30px;
-    height: 30px;
-    border-width: 2px;
-  }
-
-  &:hover {
-    border-color: var(--ui-color-primary-400);
-  }
-  &:active {
-    border-color: var(--ui-color-primary-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/community/user/UserHeader.vue b/spx-gui/src/components/community/user/UserHeader.vue
index 7ca1098b1..ec56e5f74 100644
--- a/spx-gui/src/components/community/user/UserHeader.vue
+++ b/spx-gui/src/components/community/user/UserHeader.vue
@@ -70,19 +70,24 @@ const handleEditProfile = useMessageHandle(
 </script>
 
 <template>
-  <CommunityCard class="user-header">
-    <div class="cover" :style="{ backgroundImage: `url(${coverImgUrl})` }"></div>
-    <UIImg class="avatar" :src="avatarUrl" />
-    <div class="content">
-      <div class="info">
-        <div class="title-row">
-          <h2 class="name">{{ user.displayName }}</h2>
+  <CommunityCard class="relative">
+    <div
+      class="h-[21.74vh] max-h-50 w-full bg-center bg-cover bg-no-repeat"
+      :style="{ backgroundImage: `url(${coverImgUrl})` }"
+    ></div>
+    <div class="absolute bottom-5 left-5 h-38 w-38">
+      <UIImg class="h-full w-full rounded-full border-2 border-grey-100 bg-grey-100" :src="avatarUrl" />
+    </div>
+    <div class="flex items-end gap-25 px-5 pt-5 pb-5 pl-48">
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="flex flex-wrap items-center gap-middle">
+          <h2 class="m-0 text-20/7 text-title">{{ user.displayName }}</h2>
           <UserUsernameInline :username="user.username" />
           <UserJoinedAt class="joined-at" :time="user.createdAt" />
         </div>
         <TextView style="max-height: 66px" :text="user.description" />
       </div>
-      <div class="op">
+      <div class="flex shrink-0 basis-27.5 justify-end">
         <UIButton
           v-if="isSignedInUser"
           v-radar="{ name: 'Edit profile button', desc: 'Click to edit user profile' }"
@@ -95,69 +100,3 @@ const handleEditProfile = useMessageHandle(
     </div>
   </CommunityCard>
 </template>
-
-<style lang="scss" scoped>
-.user-header {
-  position: relative;
-}
-
-.cover {
-  width: 100%;
-  height: 21.74vh;
-  max-height: 200px;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-
-.avatar {
-  position: absolute;
-  left: 20px;
-  bottom: 20px;
-  width: 152px;
-  height: 152px;
-  border: 2px solid var(--ui-color-grey-100);
-  border-radius: 50%;
-  background-color: var(--ui-color-grey-100);
-}
-
-.content {
-  padding: 20px 20px 20px 192px;
-  display: flex;
-  align-items: end;
-  gap: 100px;
-}
-
-.info {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .title-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ui-gap-middle);
-  }
-
-  .name {
-    font-size: 20px;
-    line-height: 28px;
-    color: var(--ui-color-title);
-    margin: 0;
-  }
-
-  .description {
-    font-size: 13px;
-    line-height: 20px;
-    color: var(--ui-color-text);
-  }
-}
-
-.op {
-  flex: 0 0 110px;
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/community/user/UserItem.vue b/spx-gui/src/components/community/user/UserItem.vue
index 19b82ae9c..8bb875c80 100644
--- a/spx-gui/src/components/community/user/UserItem.vue
+++ b/spx-gui/src/components/community/user/UserItem.vue
@@ -16,60 +16,19 @@ const userRoute = computed(() => getUserPageRoute(props.user.username))
 </script>
 
 <template>
-  <li class="user-item">
-    <UserAvatar class="avatar" :user="user.username" />
+  <li class="relative flex flex-col py-3 pl-14">
+    <UserAvatar class="absolute top-3 left-0" :user="user.username" />
+    <!-- TODO: should no-underline be one type of `UILink` / `RouterUILink`? -->
     <RouterUILink
       v-radar="{ name: 'User link', desc: 'Click to view user profile' }"
-      class="name"
+      class="w-fit text-15/6 text-title no-underline"
       type="boring"
       :to="userRoute"
-      >{{ user.displayName }}</RouterUILink
     >
-    <UserJoinedAt class="joined-at" :time="user.createdAt" />
-    <TextView v-if="!!user.description" class="description" :text="user.description" />
-    <FollowButton class="follow" :name="user.username" />
+      {{ user.displayName }}
+    </RouterUILink>
+    <UserJoinedAt class="w-fit" :time="user.createdAt" />
+    <TextView v-if="!!user.description" class="mt-1.5 max-h-15 w-fit text-13/5 text-text" :text="user.description" />
+    <FollowButton class="absolute top-3 right-0" :name="user.username" />
   </li>
 </template>
-
-<style lang="scss" scoped>
-.user-item {
-  position: relative;
-  padding: 12px 0 12px 56px;
-  display: flex;
-  flex-direction: column;
-}
-
-.avatar {
-  position: absolute;
-  left: 0;
-  top: 12px;
-}
-
-.name,
-.joined-at,
-.description {
-  width: fit-content;
-}
-
-.name {
-  font-size: 15px;
-  line-height: 24px;
-  color: var(--ui-color-title);
-  // TODO: should this style be one type of `UILink` / `RouterUILink`?
-  text-decoration: none;
-}
-
-.description {
-  margin-top: 6px;
-  max-height: 60px;
-  font-size: 13px;
-  line-height: 20px;
-  color: var(--ui-color-text);
-}
-
-.follow {
-  position: absolute;
-  top: 12px;
-  right: 0;
-}
-</style>
diff --git a/spx-gui/src/components/community/user/UserJoinedAt.vue b/spx-gui/src/components/community/user/UserJoinedAt.vue
index b20f639a2..c7cef15c4 100644
--- a/spx-gui/src/components/community/user/UserJoinedAt.vue
+++ b/spx-gui/src/components/community/user/UserJoinedAt.vue
@@ -16,15 +16,7 @@ const joinedAtText = computed(() => {
 </script>
 
 <template>
-  <span class="user-joined-at" :title="$t(humanizeExactTime(props.time))">
+  <span class="text-12 text-hint-2" :title="$t(humanizeExactTime(props.time))">
     {{ $t(joinedAtText) }}
   </span>
 </template>
-
-<style lang="scss" scoped>
-.user-joined-at {
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/community/user/UserUsernameInline.vue b/spx-gui/src/components/community/user/UserUsernameInline.vue
index 2f214a6c9..43560de19 100644
--- a/spx-gui/src/components/community/user/UserUsernameInline.vue
+++ b/spx-gui/src/components/community/user/UserUsernameInline.vue
@@ -39,8 +39,8 @@ const handleModifyUsername = useMessageHandle(
 </script>
 
 <template>
-  <span class="username-inline">
-    <span class="text-group">
+  <span class="inline-flex min-w-0 items-center gap-1 font-main text-12 text-hint-2">
+    <span class="min-w-0 flex-[0_1_auto]">
       <UITooltip placement="top">
         {{
           $t({
@@ -49,22 +49,24 @@ const handleModifyUsername = useMessageHandle(
           })
         }}
         <template #trigger>
-          <span class="username">{{ props.username }}</span>
+          <span class="block overflow-hidden text-ellipsis whitespace-nowrap">{{ props.username }}</span>
         </template>
       </UITooltip>
     </span>
-    <span class="actions">
+    <span class="inline-flex flex-none items-center gap-1">
       <UITooltip placement="top">
         {{ $t({ en: 'Copy username', zh: '复制用户名' }) }}
         <template #trigger>
           <button
             v-radar="{ name: 'Copy username button', desc: 'Click to copy username to clipboard' }"
-            class="action-button"
+            class="inline-flex h-3.5 w-3.5 flex-none cursor-pointer items-center justify-center border-none bg-transparent p-0 text-inherit transition-colors duration-200 hover:text-primary-main"
             type="button"
             @click="handleCopyUsername"
           >
-            <span class="sr-only">{{ $t({ en: 'Copy username', zh: '复制用户名' }) }}</span>
-            <UIIcon class="action-icon" type="copyAltFilled" />
+            <span class="absolute -m-px h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap [clip:rect(0,0,0,0)]">
+              {{ $t({ en: 'Copy username', zh: '复制用户名' }) }}
+            </span>
+            <UIIcon style="width: 14px; height: 14px" type="copyAltFilled" />
           </button>
         </template>
       </UITooltip>
@@ -73,83 +75,17 @@ const handleModifyUsername = useMessageHandle(
         <template #trigger>
           <button
             v-radar="{ name: 'Modify username button', desc: 'Click to modify username' }"
-            class="action-button"
+            class="inline-flex h-3.5 w-3.5 flex-none cursor-pointer items-center justify-center border-none bg-transparent p-0 text-inherit transition-colors duration-200 hover:text-primary-main"
             type="button"
             @click="handleModifyUsername"
           >
-            <span class="sr-only">{{ $t({ en: 'Modify username', zh: '修改用户名' }) }}</span>
-            <UIIcon class="action-icon" type="edit" />
+            <span class="absolute -m-px h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap [clip:rect(0,0,0,0)]">
+              {{ $t({ en: 'Modify username', zh: '修改用户名' }) }}
+            </span>
+            <UIIcon style="width: 14px; height: 14px" type="edit" />
           </button>
         </template>
       </UITooltip>
     </span>
   </span>
 </template>
-
-<style scoped lang="scss">
-.username-inline {
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--ui-color-hint-2);
-  font-size: 12px;
-  font-family: var(--ui-font-family-main);
-  line-height: 18px;
-}
-
-.text-group {
-  flex: 0 1 auto;
-  min-width: 0;
-}
-
-.username {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.actions {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.action-button {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  border: none;
-  background: none;
-  color: inherit;
-  cursor: pointer;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: var(--ui-color-primary-main);
-  }
-}
-
-.action-icon {
-  width: 14px;
-  height: 14px;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-</style>
diff --git a/spx-gui/src/components/community/user/content/UserContent.vue b/spx-gui/src/components/community/user/content/UserContent.vue
index bb011ff41..14626a891 100644
--- a/spx-gui/src/components/community/user/content/UserContent.vue
+++ b/spx-gui/src/components/community/user/content/UserContent.vue
@@ -5,44 +5,19 @@ import CommunityCard from '../../CommunityCard.vue'
 </script>
 
 <template>
-  <CommunityCard v-radar="{ name: 'User content', desc: 'Main content area for user pages' }" class="user-content">
-    <header class="header">
-      <h2 class="title">
+  <CommunityCard
+    v-radar="{ name: 'User content', desc: 'Main content area for user pages' }"
+    class="flex flex-col px-middle py-5"
+  >
+    <header class="mb-2 flex h-8 items-center justify-between gap-5">
+      <!-- TODO: Layout here shifts when jumping from `/user/:name` to `/user/:name/projects`, which is not ideal -->
+      <h2 class="text-16/6.5 text-title">
         <slot name="title"></slot>
       </h2>
-      <div class="extra">
+      <div class="flex gap-6">
         <slot name="extra"></slot>
       </div>
     </header>
     <slot></slot>
   </CommunityCard>
 </template>
-
-<style lang="scss" scoped>
-.user-content {
-  padding: 20px var(--ui-gap-middle);
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  margin-bottom: 8px;
-  height: 32px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20px;
-
-  .title {
-    // TODO: Layout here shifts when jumping from `/user/:name` to `/user/:name/projects`, which is not ideal
-    line-height: 26px;
-    font-size: 16px;
-    color: var(--ui-color-title);
-  }
-
-  .extra {
-    display: flex;
-    gap: 24px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
index c990385ab..f865cfbb8 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
@@ -8,35 +8,18 @@ defineProps<{
 
 <template>
   <RouterLink
-    class="user-sidebar-item relative flex items-center rounded-2 p-3 no-underline transition-all duration-100"
+    class="group relative flex items-center rounded-2 p-3 text-text no-underline transition-all duration-100 [&.active]:bg-primary-100 [&.active]:text-primary-main"
     exact-active-class="active"
     :to="to"
   >
-    <i class="icon-bg absolute left-3 top-3.5 h-4.25 w-4.25 rounded-full transition-all duration-100" />
+    <i
+      class="absolute left-3 top-3.5 h-4.25 w-4.25 rounded-full bg-grey-500 transition-all duration-100 group-[.active]:bg-primary-300"
+    />
     <span
       class="relative flex-1 pl-6.5 text-13/5 [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-1/2 [&_svg]:z-1 [&_svg]:-translate-y-1/2"
     >
       <slot></slot>
     </span>
-    <UIIcon class="h-3 w-3 flex-none rotate-90 text-grey-800" type="arrowAlt" />
+    <UIIcon class="flex-none rotate-90 text-grey-800" style="width: 12px; height: 12px" type="arrowAlt" />
   </RouterLink>
 </template>
-
-<style scoped>
-.user-sidebar-item {
-  color: var(--ui-color-text);
-}
-
-.icon-bg {
-  background: var(--ui-color-grey-500);
-}
-
-.user-sidebar-item.active {
-  color: var(--ui-color-primary-main);
-  background: var(--ui-color-primary-100);
-}
-
-.user-sidebar-item.active .icon-bg {
-  background: var(--ui-color-primary-300);
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseEditModal.vue b/spx-gui/src/components/course/management/CourseEditModal.vue
index 722c8dd2c..59523fb9a 100644
--- a/spx-gui/src/components/course/management/CourseEditModal.vue
+++ b/spx-gui/src/components/course/management/CourseEditModal.vue
@@ -94,8 +94,8 @@ const handleSubmit = useMessageHandle(
     @update:visible="emit('cancelled')"
   >
     <UIForm :form="form" @submit="handleSubmit.fn">
-      <div class="form-row">
-        <UIFormItem path="title" :label="$t({ en: 'Title', zh: '标题' })">
+      <div class="mb-6 grid grid-cols-2 gap-8">
+        <UIFormItem class="mt-0!" path="title" :label="$t({ en: 'Title', zh: '标题' })">
           <UITextInput
             v-model:value="form.value.title"
             :placeholder="
@@ -107,7 +107,7 @@ const handleSubmit = useMessageHandle(
           />
         </UIFormItem>
 
-        <UIFormItem path="entrypoint" :label="$t({ en: 'Entrypoint', zh: '起始地址' })">
+        <UIFormItem class="mt-0!" path="entrypoint" :label="$t({ en: 'Entrypoint', zh: '起始地址' })">
           <UITextInput
             v-model:value="form.value.entrypoint"
             :placeholder="
@@ -120,17 +120,17 @@ const handleSubmit = useMessageHandle(
         </UIFormItem>
       </div>
 
-      <div class="form-row">
-        <UIFormItem path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
-          <ThumbnailUploader v-model:thumbnail="form.value.thumbnail" class="thumbnail-uploader" />
+      <div class="mb-6 grid grid-cols-2 gap-8">
+        <UIFormItem class="mt-0!" path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
+          <ThumbnailUploader v-model:thumbnail="form.value.thumbnail" class="h-50 w-full" />
         </UIFormItem>
 
-        <UIFormItem path="references" :label="$t({ en: 'Reference projects', zh: '参考项目' })">
-          <ProjectReferencesInput v-model:references="form.value.references" class="project-references" />
+        <UIFormItem class="mt-0!" path="references" :label="$t({ en: 'Reference projects', zh: '参考项目' })">
+          <ProjectReferencesInput v-model:references="form.value.references" class="h-50 w-full" />
         </UIFormItem>
       </div>
 
-      <UIFormItem class="full-width" path="prompt" :label="$t({ en: 'Prompt for Copilot', zh: 'Copilot 提示词' })">
+      <UIFormItem class="mb-6" path="prompt" :label="$t({ en: 'Prompt for Copilot', zh: 'Copilot 提示词' })">
         <UITextInput
           v-model:value="form.value.prompt"
           type="textarea"
@@ -144,7 +144,7 @@ const handleSubmit = useMessageHandle(
         />
       </UIFormItem>
 
-      <footer class="footer">
+      <footer class="mt-5 flex justify-end gap-3 border-t border-dividing-line-2 pt-5">
         <UIButton color="boring" @click="emit('cancelled')">
           {{ $t({ en: 'Cancel', zh: '取消' }) }}
         </UIButton>
@@ -155,39 +155,3 @@ const handleSubmit = useMessageHandle(
     </UIForm>
   </UIFormModal>
 </template>
-
-<style lang="scss" scoped>
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32px;
-  margin-bottom: 24px;
-
-  > :deep(.ui-form-item) {
-    margin-top: 0 !important;
-  }
-}
-
-.thumbnail-uploader {
-  width: 100%;
-  height: 200px;
-}
-
-.project-references {
-  width: 100%;
-  height: 200px;
-}
-
-.full-width {
-  margin-bottom: 24px;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding-top: 20px;
-  margin-top: 20px;
-  border-top: 1px solid var(--ui-color-divider-subtle);
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseItem.vue b/spx-gui/src/components/course/management/CourseItem.vue
index 67f071974..1a04089ea 100644
--- a/spx-gui/src/components/course/management/CourseItem.vue
+++ b/spx-gui/src/components/course/management/CourseItem.vue
@@ -16,71 +16,31 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 </script>
 
 <template>
-  <li class="course-item">
-    <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
-    <div class="title" :title="course.title">{{ course.title }}</div>
-    <div class="action-section">
+  <li
+    class="course-item relative box-border h-53.5 w-58 shrink-0 cursor-pointer overflow-hidden rounded-3 border-2 border-grey-300 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
+  >
+    <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
+    <div
+      class="absolute bottom-0 w-full box-border overflow-hidden bg-grey-1000/30 px-4 text-15/10 font-semibold text-grey-100 text-ellipsis whitespace-nowrap"
+      :title="course.title"
+    >
+      {{ course.title }}
+    </div>
+    <div class="action-section absolute top-2 right-2">
       <slot />
     </div>
   </li>
 </template>
 
-<style lang="scss" scoped>
-.course-item {
-  width: 232px;
-  height: 214px;
-  border-radius: var(--ui-border-radius-3);
-  overflow: hidden;
-  position: relative;
-  cursor: pointer;
-  transition: 0.2s;
-  border: 2px solid var(--ui-color-grey-300);
-  flex-shrink: 0;
-  box-sizing: border-box;
-
-  &:hover {
-    border-color: var(--ui-color-grey-400);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-
-    .action-section :deep(.corner-menu) {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  .title {
-    padding: 0 16px;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--ui-color-grey-100);
-    background: rgb(from var(--ui-color-grey-1000) r g b / 0.3);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    box-sizing: border-box;
-  }
-
-  .thumbnail {
-    width: 100%;
-    height: 100%;
-  }
-
-  .action-section {
-    position: absolute;
-    top: 8px;
-    right: 8px;
+<style scoped>
+.action-section :deep(.corner-menu) {
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.1s;
+}
 
-    :deep(.corner-menu) {
-      opacity: 0;
-      visibility: hidden;
-      transition: 0.1s;
-    }
-  }
+.course-item:hover .action-section :deep(.corner-menu) {
+  visibility: visible;
+  opacity: 1;
 }
 </style>
diff --git a/spx-gui/src/components/course/management/CourseItemCornerMenu.vue b/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
index 1f113bfab..b671d19ee 100644
--- a/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
+++ b/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
@@ -15,8 +15,11 @@ const emit = defineEmits<{
 <template>
   <UIDropdown trigger="click" placement="bottom-end">
     <template #trigger>
-      <div class="corner-menu" @click.stop.prevent>
-        <UIIcon class="icon" type="more" />
+      <div
+        class="corner-menu flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-grey-100 text-grey-800 transition-all duration-100 hover:bg-primary-main hover:text-grey-100"
+        @click.stop.prevent
+      >
+        <UIIcon style="width: 21px; height: 21px" type="more" />
       </div>
     </template>
     <UIMenu>
@@ -34,28 +37,3 @@ const emit = defineEmits<{
     </UIMenu>
   </UIDropdown>
 </template>
-
-<style lang="scss" scoped>
-.corner-menu {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  color: var(--ui-color-grey-800);
-  background-color: var(--ui-color-grey-100);
-  cursor: pointer;
-  transition: 0.1s;
-
-  &:hover {
-    color: var(--ui-color-grey-100);
-    background-color: var(--ui-color-primary-main);
-  }
-
-  .icon {
-    width: 21px;
-    height: 21px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseItemMini.vue b/spx-gui/src/components/course/management/CourseItemMini.vue
index 787cd5f39..c8952cc94 100644
--- a/spx-gui/src/components/course/management/CourseItemMini.vue
+++ b/spx-gui/src/components/course/management/CourseItemMini.vue
@@ -20,69 +20,20 @@ const thumbnailUrl = useAsyncComputedLegacy(async (onCleanup) => {
 
 <template>
   <div
-    class="course-item-mini"
+    class="course-item-mini flex items-center rounded-1 border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
     :class="{
-      interactive,
-      highlighted,
-      dimmed
+      'cursor-pointer hover:bg-primary-100': interactive,
+      'border-grey-400 bg-grey-100': highlighted,
+      'opacity-50': dimmed
     }"
   >
     <slot name="prefix" />
-    <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
-    <div class="info">
-      <div class="title">{{ course.title }}</div>
+    <UIImg class="h-9 w-12 shrink-0 rounded-1" :src="thumbnailUrl" size="cover" />
+    <div class="mx-3 flex-1 overflow-hidden">
+      <div class="overflow-hidden text-body font-medium text-grey-900 text-ellipsis whitespace-nowrap">
+        {{ course.title }}
+      </div>
     </div>
     <slot name="suffix" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.course-item-mini {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  border-radius: var(--ui-border-radius-1);
-  background: var(--ui-color-grey-50);
-  border: 2px solid transparent;
-  transition: all 0.2s;
-
-  &.interactive {
-    cursor: pointer;
-
-    &:hover {
-      background: var(--ui-color-primary-100);
-    }
-  }
-
-  &.highlighted {
-    border-color: var(--ui-color-grey-400);
-    background: var(--ui-color-grey-100);
-  }
-
-  &.dimmed {
-    opacity: 0.5;
-  }
-}
-
-.thumbnail {
-  width: 48px;
-  height: 36px;
-  border-radius: var(--ui-border-radius-1);
-  flex-shrink: 0;
-}
-
-.info {
-  flex: 1;
-  margin: 0 12px;
-  overflow: hidden;
-}
-
-.title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ui-color-grey-900);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseManagementModal.vue b/spx-gui/src/components/course/management/CourseManagementModal.vue
index 9cf274c60..eea034e81 100644
--- a/spx-gui/src/components/course/management/CourseManagementModal.vue
+++ b/spx-gui/src/components/course/management/CourseManagementModal.vue
@@ -109,12 +109,15 @@ const handleRemove = useMessageHandle(
         <span>{{ $t({ en: 'Create course', zh: '创建课程' }) }}</span>
       </UIButton>
     </template>
-    <section class="body">
+    <section class="flex flex-col px-6 pt-5 pb-6">
       <ListResultWrapper v-slot="slotProps" :query-ret="queryRet" :height="444">
-        <div class="content">
-          <div v-if="slotProps.data.data.length === 0" class="empty">
+        <div class="flex flex-col">
+          <div
+            v-if="slotProps.data.data.length === 0"
+            class="flex flex-1 flex-col items-center justify-center text-grey-700"
+          >
             <p>{{ $t({ en: 'No courses yet', zh: '还没有课程' }) }}</p>
-            <p class="hint">
+            <p class="mt-2 text-body text-grey-600">
               {{
                 $t({
                   en: 'Click "Create course" to add your first course',
@@ -123,60 +126,14 @@ const handleRemove = useMessageHandle(
               }}
             </p>
           </div>
-          <ul v-else class="course-list">
+          <ul v-else class="flex flex-wrap content-start gap-middle">
             <CourseItem v-for="course in slotProps.data.data" :key="course.id" :course="course">
               <CourseItemCornerMenu :course="course" @edit="handleEdit(course)" @remove="handleRemove(course)" />
             </CourseItem>
           </ul>
         </div>
       </ListResultWrapper>
-      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-8 mb-4 justify-center" :total="pageTotal" />
     </section>
   </UISearchableModal>
 </template>
-
-<style lang="scss" scoped>
-.body {
-  display: flex;
-  flex-direction: column;
-  padding: 20px 24px 24px;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-}
-
-.empty {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--ui-color-grey-700);
-
-  .hint {
-    font-size: 14px;
-    color: var(--ui-color-grey-600);
-    margin-top: 8px;
-  }
-}
-
-.course-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: var(--ui-gap-middle);
-}
-
-.pagination {
-  justify-content: center;
-  margin: 32px 0 16px;
-}
-
-.create-button {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseSelector.vue b/spx-gui/src/components/course/management/CourseSelector.vue
index b781c160b..937d92436 100644
--- a/spx-gui/src/components/course/management/CourseSelector.vue
+++ b/spx-gui/src/components/course/management/CourseSelector.vue
@@ -31,8 +31,8 @@ const availableCourses = computed(() => {
 </script>
 
 <template>
-  <div class="course-selector">
-    <div class="search-bar">
+  <div class="flex h-full flex-col">
+    <div class="border-b border-dividing-line-2 p-3">
       <UITextInput v-model:value="searchKeyword" :placeholder="$t({ en: 'Search courses...', zh: '搜索课程...' })">
         <template #prefix>
           <UIIcon type="search" />
@@ -40,7 +40,7 @@ const availableCourses = computed(() => {
       </UITextInput>
     </div>
 
-    <div class="course-list">
+    <div class="flex-1 overflow-y-auto p-3">
       <UILoading v-if="loading" />
       <UIEmpty
         v-else-if="availableCourses.length === 0"
@@ -51,7 +51,7 @@ const availableCourses = computed(() => {
             : $t({ en: 'All courses have been selected', zh: '所有课程都已选择' })
         "
       />
-      <div v-else class="course-items">
+      <div v-else class="flex flex-col gap-2 [&_.course-item-mini:hover_.action-icon]:text-primary-600">
         <CourseItemMini
           v-for="course in availableCourses"
           :key="course.id"
@@ -60,45 +60,10 @@ const availableCourses = computed(() => {
           @click="emit('select', course.id)"
         >
           <template #suffix>
-            <UIIcon class="action-icon" type="plus" />
+            <UIIcon class="action-icon shrink-0 text-grey-400 transition-colors duration-200" type="plus" />
           </template>
         </CourseItemMini>
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.course-selector {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.search-bar {
-  padding: 12px;
-  border-bottom: 1px solid var(--ui-color-divider-subtle);
-}
-
-.course-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-}
-
-.course-items {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.action-icon {
-  color: var(--ui-color-grey-400);
-  flex-shrink: 0;
-  transition: color 0.2s;
-}
-
-.course-items :deep(.course-item-mini:hover) .action-icon {
-  color: var(--ui-color-primary-600);
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
index 2781475dd..5ed4c0d90 100644
--- a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
@@ -159,13 +159,17 @@ const handleSubmit = useMessageHandle(
     @update:visible="emit('cancelled')"
   >
     <UIForm :form="form" @submit="handleSubmit.fn">
-      <div class="form-row">
-        <UIFormItem class="thumbnail-wrapper" path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
-          <ThumbnailUploader :thumbnail="form.value.thumbnail" @update:thumbnail="(v) => (form.value.thumbnail = v)" />
+      <div class="mb-6 grid grid-cols-[350px_1fr] gap-6">
+        <UIFormItem class="thumbnail-wrapper mt-0!" path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
+          <ThumbnailUploader
+            class="h-65"
+            :thumbnail="form.value.thumbnail"
+            @update:thumbnail="(v) => (form.value.thumbnail = v)"
+          />
         </UIFormItem>
 
         <div>
-          <UIFormItem path="title" :label="$t({ en: 'Title', zh: '标题' })">
+          <UIFormItem class="mt-0!" path="title" :label="$t({ en: 'Title', zh: '标题' })">
             <UITextInput
               v-model:value="form.value.title"
               :placeholder="
@@ -177,7 +181,7 @@ const handleSubmit = useMessageHandle(
             />
           </UIFormItem>
 
-          <UIFormItem path="description" :label="$t({ en: 'Description', zh: '描述' })">
+          <UIFormItem class="mt-0!" path="description" :label="$t({ en: 'Description', zh: '描述' })">
             <UITextInput
               v-model:value="form.value.description"
               type="textarea"
@@ -191,7 +195,7 @@ const handleSubmit = useMessageHandle(
             />
           </UIFormItem>
 
-          <UIFormItem path="order" :label="$t({ en: 'Sort order', zh: '排序优先级' })">
+          <UIFormItem class="mt-0!" path="order" :label="$t({ en: 'Sort order', zh: '排序优先级' })">
             <UINumberInput
               v-model:value="form.value.order"
               :placeholder="
@@ -209,35 +213,41 @@ const handleSubmit = useMessageHandle(
         <span />
       </UIFormItem>
 
-      <div class="courses-section">
-        <label class="section-label">
+      <div class="mb-6">
+        <label class="mb-3 block font-medium text-grey-800">
           {{ $t({ en: 'Courses', zh: '课程' }) }}
         </label>
-        <div class="course-selection">
-          <div class="selection-panel">
-            <label class="course-label">{{ $t({ en: 'Available courses', zh: '可选课程' }) }}</label>
+        <div class="grid h-100 grid-cols-2 gap-6">
+          <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
+            <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
+              {{ $t({ en: 'Available courses', zh: '可选课程' }) }}
+            </label>
             <CourseSelector
+              class="min-h-0 flex-1"
               :courses="allCourses"
               :selected-ids="form.value.courseIDs"
               :loading="coursesLoading"
               @select="(id) => (form.value.courseIDs = [...form.value.courseIDs, id])"
             />
           </div>
-          <div class="selection-panel">
-            <label class="course-label">{{ $t({ en: 'Selected courses', zh: '已选课程' }) }}</label>
+          <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
+            <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
+              {{ $t({ en: 'Selected courses', zh: '已选课程' }) }}
+            </label>
             <SelectedCoursesList
+              class="min-h-0 flex-1"
               :course-ids="form.value.courseIDs"
               :all-courses="allCourses"
               @update:course-ids="(ids) => (form.value.courseIDs = ids)"
             />
           </div>
         </div>
-        <div v-if="form.validated.courseIDs?.hasError" class="error-message">
+        <div v-if="form.validated.courseIDs?.hasError" class="mt-2 text-danger-500">
           {{ form.validated.courseIDs.error }}
         </div>
       </div>
 
-      <footer class="footer">
+      <footer class="mt-5 flex justify-end gap-3 border-t border-dividing-line-2 pt-5">
         <UIButton color="boring" @click="emit('cancelled')">
           {{ $t({ en: 'Cancel', zh: '取消' }) }}
         </UIButton>
@@ -248,76 +258,3 @@ const handleSubmit = useMessageHandle(
     </UIForm>
   </UIFormModal>
 </template>
-
-<style lang="scss" scoped>
-.form-row {
-  display: grid;
-  grid-template-columns: 350px 1fr;
-  gap: 24px;
-  margin-bottom: 24px;
-
-  > :deep(.ui-form-item) {
-    margin-top: 0 !important;
-  }
-
-  :deep(.thumbnail-wrapper) > div {
-    height: 260px;
-  }
-}
-
-.thumbnail-uploader {
-  width: 100%;
-  height: 100%;
-}
-
-.courses-section {
-  margin-bottom: 24px;
-}
-
-.section-label {
-  font-weight: 500;
-  color: var(--ui-color-grey-800);
-  margin-bottom: 12px;
-}
-
-.error-message {
-  margin-top: 8px;
-  color: var(--ui-color-danger-500);
-}
-
-.course-selection {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24px;
-  height: 400px;
-}
-
-.selection-panel {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--ui-color-divider-subtle);
-  border-radius: var(--ui-border-radius-2);
-  overflow: hidden;
-
-  .course-label {
-    padding: 12px 16px;
-    color: var(--ui-color-grey-800);
-    background: var(--ui-color-grey-50);
-    border-bottom: 1px solid var(--ui-color-divider-subtle);
-  }
-
-  > div {
-    flex: 1;
-    min-height: 0;
-  }
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding-top: 20px;
-  margin-top: 20px;
-  border-top: 1px solid var(--ui-color-divider-subtle);
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseSeriesItem.vue b/spx-gui/src/components/course/management/CourseSeriesItem.vue
index 2bdf6e539..446225199 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItem.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItem.vue
@@ -16,12 +16,33 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 </script>
 
 <template>
-  <li class="course-series-item">
-    <UIImg v-if="thumbnailUrl != null" class="thumbnail" :src="thumbnailUrl" size="cover" />
-    <div class="content" :class="{ 'has-thumbnail': thumbnailUrl != null }">
-      <div class="order">{{ courseSeries.order }}</div>
-      <h3 class="title" :title="courseSeries.title">{{ courseSeries.title }}</h3>
-      <div class="course-count">
+  <li
+    class="course-series-item relative h-40 w-58 cursor-pointer overflow-hidden rounded-3 border-2 border-grey-300 bg-grey-50 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
+  >
+    <div v-if="thumbnailUrl != null" class="absolute inset-0">
+      <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
+    </div>
+    <div
+      class="relative flex h-full flex-col items-center justify-center p-5 text-center"
+      :class="{ 'has-thumbnail': thumbnailUrl != null }"
+    >
+      <div
+        class="absolute top-3 left-3 h-7 w-7 [text-shadow:0_1px_3px_rgba(0,0,0,0.3)]"
+        :class="thumbnailUrl != null ? 'text-grey-100' : 'text-grey-900'"
+      >
+        {{ courseSeries.order }}
+      </div>
+      <h3
+        class="m-0 w-full overflow-hidden text-16/[1.4] text-ellipsis wrap-break-word line-clamp-2 [text-shadow:0_1px_3px_rgba(0,0,0,0.3)]"
+        :class="thumbnailUrl != null ? 'text-grey-100' : 'text-grey-900'"
+        :title="courseSeries.title"
+      >
+        {{ courseSeries.title }}
+      </h3>
+      <div
+        class="mt-2"
+        :class="thumbnailUrl != null ? 'text-grey-400 [text-shadow:0_1px_2px_rgba(0,0,0,0.3)]' : 'text-grey-600'"
+      >
         {{
           $t({
             en: `${courseSeries.courseIDs.length} course${courseSeries.courseIDs.length !== 1 ? 's' : ''}`,
@@ -31,110 +52,21 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
       </div>
     </div>
 
-    <div class="action-section">
+    <div class="action-section absolute top-2 right-2">
       <slot />
     </div>
   </li>
 </template>
 
-<style lang="scss" scoped>
-.course-series-item {
-  position: relative;
-  width: 232px;
-  height: 160px;
-  border-radius: var(--ui-border-radius-3);
-  background: var(--ui-color-grey-50);
-  border: 2px solid var(--ui-color-grey-300);
-  cursor: pointer;
-  transition: all 0.2s;
-  overflow: hidden;
-
-  &:hover {
-    border-color: var(--ui-color-grey-400);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-
-    .action-section :deep(.corner-menu) {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}
-
-.thumbnail {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 20px;
-  text-align: center;
-
-  &.has-thumbnail {
-    .title {
-      color: var(--ui-color-grey-100);
-    }
-
-    .order {
-      color: var(--ui-color-grey-100);
-    }
-
-    .course-count {
-      color: var(--ui-color-grey-400);
-      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-    }
-  }
+<style scoped>
+.action-section :deep(.corner-menu) {
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.1s;
 }
 
-.order {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  width: 28px;
-  height: 28px;
-  color: var(--ui-color-grey-900);
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.title {
-  margin: 0 0 8px;
-  font-size: 16px;
-  color: var(--ui-color-grey-900);
-  overflow: hidden;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  line-height: 1.4;
-  width: 100%;
-  word-break: break-word;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.course-count {
-  color: var(--ui-color-grey-600);
-}
-
-.action-section {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-
-  :deep(.corner-menu) {
-    opacity: 0;
-    visibility: hidden;
-    transition: 0.1s;
-  }
+.course-series-item:hover .action-section :deep(.corner-menu) {
+  visibility: visible;
+  opacity: 1;
 }
 </style>
diff --git a/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue b/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
index 50701dc76..85cecb81d 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
@@ -15,8 +15,11 @@ const emit = defineEmits<{
 <template>
   <UIDropdown trigger="click" placement="bottom-end">
     <template #trigger>
-      <div class="corner-menu" @click.stop.prevent>
-        <UIIcon class="icon" type="more" />
+      <div
+        class="corner-menu flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-grey-100 text-grey-800 transition-all duration-100 hover:bg-primary-main hover:text-grey-100"
+        @click.stop.prevent
+      >
+        <UIIcon style="width: 21px; height: 21px" type="more" />
       </div>
     </template>
     <UIMenu>
@@ -34,28 +37,3 @@ const emit = defineEmits<{
     </UIMenu>
   </UIDropdown>
 </template>
-
-<style lang="scss" scoped>
-.corner-menu {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  color: var(--ui-color-grey-800);
-  background-color: var(--ui-color-grey-100);
-  cursor: pointer;
-  transition: 0.1s;
-
-  &:hover {
-    color: var(--ui-color-grey-100);
-    background-color: var(--ui-color-primary-main);
-  }
-
-  .icon {
-    width: 21px;
-    height: 21px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue b/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
index c2390bf7e..518cb5212 100644
--- a/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
@@ -112,12 +112,15 @@ const handleRemove = useMessageHandle(
         <span>{{ $t({ en: 'Create course series', zh: '创建课程系列' }) }}</span>
       </UIButton>
     </template>
-    <section class="body">
+    <section class="flex flex-col px-6 pt-5 pb-6">
       <ListResultWrapper v-slot="slotProps" :query-ret="queryRet" :height="352">
-        <div class="content">
-          <div v-if="slotProps.data.data.length === 0" class="empty">
+        <div class="flex flex-col">
+          <div
+            v-if="slotProps.data.data.length === 0"
+            class="flex flex-1 flex-col items-center justify-center text-grey-700"
+          >
             <p>{{ $t({ en: 'No course series yet', zh: '还没有课程系列' }) }}</p>
-            <p class="hint">
+            <p class="mt-2 text-body text-grey-600">
               {{
                 $t({
                   en: 'Click "Create course series" to add your first series',
@@ -126,7 +129,7 @@ const handleRemove = useMessageHandle(
               }}
             </p>
           </div>
-          <ul v-else class="course-series-list">
+          <ul v-else class="flex flex-wrap content-start gap-middle">
             <CourseSeriesItem
               v-for="courseSeries in slotProps.data.data"
               :key="courseSeries.id"
@@ -141,53 +144,7 @@ const handleRemove = useMessageHandle(
           </ul>
         </div>
       </ListResultWrapper>
-      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-8 mb-4 justify-center" :total="pageTotal" />
     </section>
   </UISearchableModal>
 </template>
-
-<style lang="scss" scoped>
-.body {
-  display: flex;
-  flex-direction: column;
-  padding: 20px 24px 24px;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-}
-
-.empty {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--ui-color-grey-700);
-
-  .hint {
-    font-size: 14px;
-    color: var(--ui-color-grey-600);
-    margin-top: 8px;
-  }
-}
-
-.course-series-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: var(--ui-gap-middle);
-}
-
-.pagination {
-  justify-content: center;
-  margin: 32px 0 16px;
-}
-
-.create-button {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-</style>
diff --git a/spx-gui/src/components/course/management/ProjectReferencesInput.vue b/spx-gui/src/components/course/management/ProjectReferencesInput.vue
index f699a8223..43d003dcf 100644
--- a/spx-gui/src/components/course/management/ProjectReferencesInput.vue
+++ b/spx-gui/src/components/course/management/ProjectReferencesInput.vue
@@ -79,7 +79,7 @@ function handleRemove(index: number) {
 </script>
 
 <template>
-  <div class="project-references-input">
+  <div class="flex flex-col gap-3">
     <UITextInput
       v-model:value="projectInput"
       class="project-input"
@@ -95,62 +95,24 @@ function handleRemove(index: number) {
       </template>
     </UITextInput>
 
-    <div class="references-list">
+    <div class="flex flex-1 flex-col gap-2 overflow-y-auto rounded-2 border border-grey-400 p-2">
       <template v-if="references.length > 0">
-        <div v-for="(reference, index) in references" :key="reference.fullName" class="reference-item">
+        <div
+          v-for="(reference, index) in references"
+          :key="reference.fullName"
+          class="flex items-center justify-between rounded-1 border border-grey-400 px-3 py-2"
+        >
           <span class="reference-name">{{ reference.fullName }}</span>
-          <UIIcon type="close" class="remove-icon" @click="handleRemove(index)" />
+          <UIIcon
+            type="close"
+            class="cursor-pointer text-grey-500 transition-colors duration-200 hover:text-danger-600"
+            @click="handleRemove(index)"
+          />
         </div>
       </template>
-      <div v-else class="empty-hint">
+      <div v-else class="flex flex-1 items-center justify-center text-grey-700">
         {{ $t({ en: 'No reference projects added yet', zh: '尚未添加参考项目' }) }}
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.project-references-input {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.references-list {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  border: 1px solid var(--ui-color-grey-400);
-  border-radius: var(--ui-border-radius-2);
-  overflow-y: auto;
-}
-
-.reference-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border: 1px solid var(--ui-color-grey-400);
-  border-radius: var(--ui-border-radius-1);
-
-  .remove-icon {
-    cursor: pointer;
-    color: var(--ui-color-grey-500);
-    transition: 0.2s;
-
-    &:hover {
-      color: var(--ui-color-error);
-    }
-  }
-}
-
-.empty-hint {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--ui-color-grey-700);
-}
-</style>
diff --git a/spx-gui/src/components/course/management/SelectedCoursesList.vue b/spx-gui/src/components/course/management/SelectedCoursesList.vue
index 2f1634395..b8f384e2d 100644
--- a/spx-gui/src/components/course/management/SelectedCoursesList.vue
+++ b/spx-gui/src/components/course/management/SelectedCoursesList.vue
@@ -75,16 +75,17 @@ function removeCourse(index: number) {
 </script>
 
 <template>
-  <div class="selected-courses-list">
+  <div class="h-full overflow-y-auto p-3">
     <UIEmpty
       v-if="selectedCourses.length === 0"
       size="small"
       :description="$t({ en: 'No courses selected', zh: '未选择任何课程' })"
     />
-    <div v-else class="course-items">
+    <div v-else class="flex flex-col gap-2">
       <div
         v-for="(course, index) in selectedCourses"
         :key="course.id"
+        class="cursor-move"
         draggable="true"
         @dragstart="handleDragStart($event, index)"
         @dragend="handleDragEnd"
@@ -94,51 +95,17 @@ function removeCourse(index: number) {
       >
         <CourseItemMini :course="course" :dimmed="draggedIndex === index" :highlighted="dragOverIndex === index">
           <template #prefix>
-            <UIIcon class="drag-handle" type="exchange" />
+            <UIIcon class="mr-2 cursor-grab text-grey-400 active:cursor-grabbing" type="exchange" />
           </template>
           <template #suffix>
-            <UIIcon class="remove-icon" type="close" @click="removeCourse(index)" />
+            <UIIcon
+              class="cursor-pointer text-grey-400 transition-colors duration-200 hover:text-danger-600"
+              type="close"
+              @click="removeCourse(index)"
+            />
           </template>
         </CourseItemMini>
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.selected-courses-list {
-  height: 100%;
-  overflow-y: auto;
-  padding: 12px;
-}
-
-.course-items {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  > div {
-    cursor: move;
-  }
-}
-
-.drag-handle {
-  color: var(--ui-color-grey-400);
-  margin-right: 8px;
-  cursor: grab;
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.remove-icon {
-  color: var(--ui-color-grey-400);
-  cursor: pointer;
-  transition: color 0.2s;
-
-  &:hover {
-    color: var(--ui-color-danger-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/course/management/ThumbnailUploader.vue b/spx-gui/src/components/course/management/ThumbnailUploader.vue
index 6e265b929..09bdb182b 100644
--- a/spx-gui/src/components/course/management/ThumbnailUploader.vue
+++ b/spx-gui/src/components/course/management/ThumbnailUploader.vue
@@ -34,45 +34,17 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 </script>
 
 <template>
-  <div class="thumbnail-uploader" @click="handleUpload.fn">
+  <div
+    class="flex cursor-pointer items-center justify-center overflow-hidden rounded-2 border border-dashed border-grey-400 transition-[border-color,background-color] duration-300 hover:border-primary-main hover:bg-grey-400"
+    @click="handleUpload.fn"
+  >
     <UILoading v-if="handleUpload.isLoading.value" />
     <template v-else>
-      <UIImg v-if="thumbnailUrl != null" :src="thumbnailUrl" class="preview" size="contain" />
-      <div v-else class="placeholder">
+      <UIImg v-if="thumbnailUrl != null" :src="thumbnailUrl" class="h-full w-full" size="contain" />
+      <div v-else class="flex flex-col items-center gap-2 text-grey-700">
         <UIIcon type="plus" />
         {{ $t({ en: 'Click to upload', zh: '点击上传' }) }}
       </div>
     </template>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.thumbnail-uploader {
-  border: 1px dashed var(--ui-color-grey-400);
-  border-radius: var(--ui-border-radius-2);
-  cursor: pointer;
-  overflow: hidden;
-  transition: 0.3s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    border-color: var(--ui-color-primary-main);
-    background: var(--ui-color-grey-400);
-  }
-
-  .preview {
-    width: 100%;
-    height: 100%;
-  }
-
-  .placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    color: var(--ui-color-grey-700);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionUI.vue
index 23246eddd..284017f64 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionUI.vue
@@ -51,5 +51,3 @@ watchEffect(() => {
     />
   </UIDropdown>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenu.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenu.vue
index 59bcf2adf..eb361df18 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenu.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenu.vue
@@ -34,5 +34,3 @@ const handleItemClick = useMessageHandle((item: InternalMenuItem) => props.contr
     </UIMenu>
   </UIDropdown>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetail.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetail.vue
index 175dadbed..111b20042 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetail.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetail.vue
@@ -30,5 +30,3 @@ const hasContent = computed(() => documentation.value != null || childrenText.va
     <MarkdownView v-else :value="childrenText" />
   </DefinitionDetailWrapper>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue
index db2299a19..7ed76e3c3 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue
@@ -19,5 +19,3 @@ const resourceIdentifier = computed<ResourceIdentifier>(() => ({
   <!-- TODO: Design specially for `ResourcePreview`, instead of using the same `ResourceItem` as `ResourceSelector` -->
   <component :is="provider?.provideResourceItemRenderer()" :resource="resourceIdentifier" autoplay />
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/common/PlayControl.vue b/spx-gui/src/components/editor/common/PlayControl.vue
index 680aa0a02..dc2a76e89 100644
--- a/spx-gui/src/components/editor/common/PlayControl.vue
+++ b/spx-gui/src/components/editor/common/PlayControl.vue
@@ -1,7 +1,7 @@
 <!-- Sound / video play control (only UI) -->
 
 <template>
-  <div class="play-control" :class="[`size-${props.size}`]" :style="colorCssVars">
+  <div class="play-control" :class="[`container-size-${props.size}`]" :style="colorCssVars">
     <div v-show="!playing" class="play" @click.stop="handlePlay.fn">
       <UIIcon class="icon" type="play" />
     </div>
@@ -79,12 +79,12 @@ const colorCssVars = computed(() => {
 .play-control {
   position: relative;
 
-  &.size-medium {
+  &.container-size-medium {
     width: 36px;
     height: 36px;
   }
 
-  &.size-large {
+  &.container-size-large {
     width: 48px;
     height: 48px;
     .icon {
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index d7fb5e4a7..a9b405c3b 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -9,7 +9,7 @@
         }"
       >
         <template #trigger>
-          <UIIcon type="file" />
+          <UIIcon type="file" style="width: 24px; height: 24px" />
         </template>
         <UIMenu>
           <UIMenuGroup :disabled="!isOnline">
diff --git a/spx-gui/src/components/editor/sprite/CostumeDetail.vue b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
index 676293b9b..3dfbb115b 100644
--- a/spx-gui/src/components/editor/sprite/CostumeDetail.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
@@ -1,8 +1,8 @@
 <template>
   <EditorItemDetail :name="costume.name" @rename="emit('rename')">
-    <div class="img-wrapper">
-      <CheckerboardBackground class="background" />
-      <UIImg class="img" :src="imgSrc" :loading="imgLoading" />
+    <div class="relative flex-1 overflow-hidden rounded-1 w-full">
+      <CheckerboardBackground class="absolute inset-0" />
+      <UIImg class="h-full w-full" :src="imgSrc" :loading="imgLoading" />
     </div>
   </EditorItemDetail>
 </template>
@@ -24,26 +24,3 @@ const emit = defineEmits<{
 
 const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
 </script>
-
-<style lang="scss" scoped>
-.img-wrapper {
-  width: 100%;
-  flex: 1 1 0;
-  border-radius: 8px;
-  position: relative;
-  overflow: hidden;
-}
-
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.img {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
index 3ad73f5bb..27d9e49fe 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <EditorItemDetail :name="backdrop.name" @rename="handleRename">
-    <div class="img-wrapper">
-      <img v-if="imgSrc != null" class="img" :src="imgSrc" />
+    <div class="flex min-h-0 flex-1 items-center justify-center w-full">
+      <img v-if="imgSrc != null" class="max-h-full max-w-full rounded-1" :src="imgSrc" />
       <UILoading :visible="imgLoading" cover />
     </div>
   </EditorItemDetail>
@@ -27,19 +27,3 @@ const handleRename = useMessageHandle(() => renameBackdrop(props.backdrop), {
 
 const [imgSrc, imgLoading] = useFileUrl(() => props.backdrop.img)
 </script>
-
-<style lang="scss" scoped>
-.img-wrapper {
-  width: 100%;
-  flex: 1 1 0;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.img {
-  max-width: 100%;
-  max-height: 100%;
-  border-radius: 8px;
-}
-</style>
diff --git a/spx-gui/src/components/navbar/NavbarDropdown.vue b/spx-gui/src/components/navbar/NavbarDropdown.vue
index ccb6ee3b3..852129271 100644
--- a/spx-gui/src/components/navbar/NavbarDropdown.vue
+++ b/spx-gui/src/components/navbar/NavbarDropdown.vue
@@ -1,9 +1,9 @@
 <template>
   <UIDropdown placement="bottom-start">
     <template #trigger>
-      <div v-radar="triggerRadar" class="dropdown">
+      <div v-radar="triggerRadar" class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600">
         <slot name="trigger"></slot>
-        <UIIcon class="icon-arrow" type="arrowDown" />
+        <UIIcon style="width: 16px; height: 16px" type="arrowDown" />
       </div>
     </template>
     <slot></slot>
@@ -18,26 +18,3 @@ defineProps<{
   triggerRadar: RadarNodeMeta
 }>()
 </script>
-
-<style lang="scss" scoped>
-.dropdown {
-  // TODO: common style with NavbarLang
-  height: 100%;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    background-color: var(--ui-color-primary-600);
-  }
-
-  :deep(.ui-icon) {
-    width: 24px;
-    height: 24px;
-  }
-  .icon-arrow {
-    width: 16px;
-    height: 16px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/navbar/NavbarLang.vue b/spx-gui/src/components/navbar/NavbarLang.vue
index 8766dca46..9ca7532be 100644
--- a/spx-gui/src/components/navbar/NavbarLang.vue
+++ b/spx-gui/src/components/navbar/NavbarLang.vue
@@ -4,7 +4,7 @@
     <template #trigger>
       <div
         v-radar="{ name: 'Language switcher', desc: 'Click to switch between English and Chinese' }"
-        class="lang"
+        class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600"
         @click="toggleLang"
         v-html="langContent"
       ></div>
@@ -27,17 +27,3 @@ function toggleLang() {
   i18n.setLang(i18n.lang.value === 'en' ? 'zh' : 'en')
 }
 </script>
-
-<style lang="scss" scoped>
-.lang {
-  height: 100%;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--ui-color-primary-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/navbar/NavbarLogo.vue b/spx-gui/src/components/navbar/NavbarLogo.vue
index b39da1342..fefb7f766 100644
--- a/spx-gui/src/components/navbar/NavbarLogo.vue
+++ b/spx-gui/src/components/navbar/NavbarLogo.vue
@@ -1,5 +1,9 @@
 <template>
-  <router-link v-radar="{ name: 'Logo link', desc: 'Logo image as link to the homepage' }" class="logo" to="/">
+  <router-link
+    v-radar="{ name: 'Logo link', desc: 'Logo image as link to the homepage' }"
+    class="logo relative mx-6 flex h-full items-center"
+    to="/"
+  >
     <img :src="logoSvg" />
   </router-link>
 </template>
@@ -8,22 +12,14 @@
 import logoSvg from './logo.svg'
 </script>
 
-<style lang="scss" scoped>
-.logo {
-  position: relative;
-  height: 100%;
-  margin: 0 24px 0 24px;
-  display: flex;
-  align-items: center;
-
-  &::after {
-    content: '';
-    position: absolute;
-    right: -24px;
-    display: block;
-    width: 1px;
-    height: 24px;
-    background: rgba(255, 255, 255, 0.3);
-  }
+<style scoped>
+.logo::after {
+  content: '';
+  position: absolute;
+  right: -24px;
+  display: block;
+  width: 1px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.3);
 }
 </style>
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index e09e87b82..da4e95810 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -1,9 +1,8 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div v-if="!loading && signedInUser == null" class="sign-in">
+  <div v-if="!loading && signedInUser == null" class="mr-2 flex h-full items-center px-5 whitespace-nowrap">
     <UIButton
       v-radar="{ name: 'Sign-in button', desc: 'Click to sign in' }"
-      class="sign-in-button"
       color="secondary"
       :disabled="!isOnline"
       @click="initiateSignIn()"
@@ -12,11 +11,11 @@
   </div>
   <UIDropdown v-else placement="bottom-end" :offset="{ x: 0, y: 8 }">
     <template #trigger>
-      <div class="avatar">
-        <img class="avatar-img" :src="avatarUrl ?? undefined" />
+      <div class="mr-2 flex h-full items-center justify-center px-5 hover:bg-primary-600">
+        <img class="h-8 w-8 rounded-full" :src="avatarUrl ?? undefined" />
       </div>
     </template>
-    <UIMenu class="user-menu">
+    <UIMenu class="min-w-30">
       <UIMenuGroup>
         <UIMenuItem :interactive="false">
           <div class="user-info-wrapper">
@@ -27,11 +26,11 @@
           <template #trigger>
             <UIMenuItem
               v-radar="{ name: 'Language switcher', desc: 'Click to switch between English and Chinese' }"
-              class="lang-item"
+              class="justify-between p-2"
               @click="toggleLang"
             >
               {{ $t({ en: 'Language', zh: '语言' }) }}
-              <div class="icon" v-html="langContent"></div>
+              <div class="lang-switch-icon h-4.5 w-4.5 text-turquoise-600" v-html="langContent"></div>
             </UIMenuItem>
           </template>
           {{ $t({ en: 'English / 中文', zh: '中文 / English' }) }}
@@ -124,55 +123,9 @@ function handleSignOut() {
 }
 </script>
 
-<style lang="scss" scoped>
-.sign-in,
-.avatar {
-  padding: 0 20px;
-  margin-right: 8px;
+<style scoped>
+.lang-switch-icon :deep(svg) {
+  width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.sign-in-button {
-  font: inherit;
-}
-
-.sign-in {
-  white-space: nowrap;
-}
-
-.avatar {
-  justify-content: center;
-
-  &:hover {
-    background-color: var(--ui-color-primary-600);
-  }
-
-  .avatar-img {
-    width: 32px;
-    height: 32px;
-    border-radius: 16px;
-  }
-}
-
-.lang-item {
-  padding: 8px;
-  justify-content: space-between;
-
-  .icon {
-    width: 18px;
-    height: 18px;
-    color: var(--ui-color-turquoise-600);
-
-    :deep(svg) {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.user-menu {
-  min-width: 120px;
 }
 </style>
diff --git a/spx-gui/src/components/navbar/NavbarTutorials.vue b/spx-gui/src/components/navbar/NavbarTutorials.vue
index fbb12d1ba..d73126337 100644
--- a/spx-gui/src/components/navbar/NavbarTutorials.vue
+++ b/spx-gui/src/components/navbar/NavbarTutorials.vue
@@ -3,10 +3,10 @@
     <template #trigger>
       <router-link
         v-radar="{ name: 'Navbar tutorials link', desc: 'Click to open the tutorials page' }"
-        class="navbar-tutorials"
+        class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600"
         to="/tutorials"
       >
-        <UIIcon class="icon" type="tutorial" />
+        <UIIcon type="tutorial" class="text-grey-100" style="width: 24px; height: 24px" />
       </router-link>
     </template>
     <div class="text">{{ $t({ en: 'Tutorials', zh: '教程' }) }}</div>
@@ -16,23 +16,3 @@
 <script setup lang="ts">
 import { UIIcon, UITooltip } from '@/components/ui'
 </script>
-
-<style lang="scss" scoped>
-.navbar-tutorials {
-  height: 100%;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  .icon {
-    width: 24px;
-    height: 24px;
-    color: white;
-  }
-
-  &:hover {
-    background-color: var(--ui-color-primary-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectCreateModal.vue b/spx-gui/src/components/project/ProjectCreateModal.vue
index b28b2381b..0d677dfce 100644
--- a/spx-gui/src/components/project/ProjectCreateModal.vue
+++ b/spx-gui/src/components/project/ProjectCreateModal.vue
@@ -7,7 +7,7 @@
     @update:visible="handleCancel"
   >
     <UIForm :form="form" has-success-feedback @submit="handleSubmit.fn">
-      <div class="alert">
+      <div class="h-7.5 text-grey-900">
         {{
           $t({
             en: 'The project name will also be used in project URLs.',
@@ -22,7 +22,7 @@
           :placeholder="$t({ en: 'Please enter the project name', zh: '请输入项目名' })"
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-10 flex justify-center">
         <UIButton
           v-radar="{ name: 'Create button', desc: 'Click to create the project' }"
           class="create-button"
@@ -147,16 +147,3 @@ async function validateName(name: string): Promise<FormValidationResult> {
     })
 }
 </script>
-
-<style scoped lang="scss">
-.alert {
-  height: 30px;
-  color: var(--ui-color-grey-900);
-}
-
-.footer {
-  margin-top: 40px;
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index b3f7db01b..832d949f4 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -19,7 +19,7 @@
               class="invisible absolute top-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-grey-100 text-grey-800 opacity-0 transition-all duration-100 group-hover:visible group-hover:opacity-100 hover:bg-primary-main hover:text-grey-100"
               @click.stop.prevent
             >
-              <UIIcon class="h-5.25 w-5.25" type="more" />
+              <UIIcon style="width: 21px; height: 21px" type="more" />
             </div>
           </template>
           <UIMenu>
@@ -104,7 +104,7 @@
         </div>
         <p class="mt-1 flex h-5 gap-3 text-13/5 text-grey-700">
           <span class="flex flex-none items-center gap-1" :class="{ 'text-red-main': liking }" :title="$t(likesTitle)">
-            <UIIcon class="h-3.5 w-3.5" type="heart" />
+            <UIIcon style="width: 14px; height: 14px" type="heart" />
             {{ $t(humanizeCount(project.likeCount)) }}
           </span>
           <span class="min-w-0 flex-1 truncate" :title="$t(timeTitle)">
diff --git a/spx-gui/src/components/project/ProjectModifyNameModal.vue b/spx-gui/src/components/project/ProjectModifyNameModal.vue
index bb2e97a89..177371983 100644
--- a/spx-gui/src/components/project/ProjectModifyNameModal.vue
+++ b/spx-gui/src/components/project/ProjectModifyNameModal.vue
@@ -98,7 +98,7 @@ async function validateName(name: string): Promise<FormValidationResult> {
           :placeholder="$t({ en: 'Please enter the project name', zh: '请输入项目名' })"
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-large flex justify-end gap-middle pb-1">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel updating project name' }"
           color="boring"
@@ -118,13 +118,3 @@ async function validateName(name: string): Promise<FormValidationResult> {
     </UIForm>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--ui-gap-middle);
-  margin-top: var(--ui-gap-large);
-  padding-bottom: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectOpenModal.vue b/spx-gui/src/components/project/ProjectOpenModal.vue
index fbc0599b6..6bce53149 100644
--- a/spx-gui/src/components/project/ProjectOpenModal.vue
+++ b/spx-gui/src/components/project/ProjectOpenModal.vue
@@ -45,7 +45,7 @@ const queryRet = useQuery(
     @update:visible="emit('cancelled')"
   >
     <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet" :height="524">
-      <ul class="project-list">
+      <ul class="flex flex-wrap content-start gap-middle">
         <ProjectItem
           v-for="project in slotProps.data.data"
           :key="project.id"
@@ -55,19 +55,6 @@ const queryRet = useQuery(
         />
       </ul>
     </ListResultWrapper>
-    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-8 mb-4 justify-center" :total="pageTotal" />
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.project-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: var(--ui-gap-middle);
-}
-.pagination {
-  justify-content: center;
-  margin: 32px 0 16px;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectPublishModal.vue b/spx-gui/src/components/project/ProjectPublishModal.vue
index 3c8808f9c..ea3ae1b17 100644
--- a/spx-gui/src/components/project/ProjectPublishModal.vue
+++ b/spx-gui/src/components/project/ProjectPublishModal.vue
@@ -10,6 +10,7 @@ import type { SpxProject } from '@/models/spx/project'
 import { isProjectUsingAIInteraction } from '@/utils/project'
 import { UIImg, UIFormModal, UIForm, UIFormItem, UITextInput, UIButton, useForm } from '@/components/ui'
 import { stringifyProjectFullName } from '@/apis/project'
+import stageBg from '@/assets/images/stage-bg.svg'
 
 const props = defineProps<{
   project: SpxProject
@@ -93,7 +94,7 @@ const handleSubmit = useMessageHandle(
     @update:visible="handleCancel"
   >
     <UIForm :form="form" has-success-feedback @submit="handleSubmit.fn">
-      <p v-if="project.visibility === Visibility.Private" class="tip">
+      <p v-if="project.visibility === Visibility.Private" class="mb-6">
         {{
           $t({
             en: 'Published projects will be visible to all XBuilder users.',
@@ -101,8 +102,11 @@ const handleSubmit = useMessageHandle(
           })
         }}
       </p>
-      <div class="thumbnail-wrapper">
-        <UIImg class="thumbnail" :src="thumbnailUrl" :loading="thumbnailUrlLoading" size="contain" />
+      <div
+        class="mb-6 h-56 w-full overflow-hidden rounded-1 bg-center bg-cover bg-no-repeat"
+        :style="{ backgroundImage: `url(${stageBg})` }"
+      >
+        <UIImg class="h-full w-full" :src="thumbnailUrl" :loading="thumbnailUrlLoading" size="contain" />
       </div>
       <UIFormItem :label="$t({ en: 'Release description', zh: '发布内容' })" path="releaseDescription">
         <UITextInput
@@ -139,7 +143,7 @@ const handleSubmit = useMessageHandle(
           "
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-5 flex justify-end gap-3">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel project publishing' }"
           color="boring"
@@ -159,28 +163,3 @@ const handleSubmit = useMessageHandle(
     </UIForm>
   </UIFormModal>
 </template>
-
-<style lang="scss" scoped>
-.tip {
-  margin-bottom: 24px;
-}
-.thumbnail-wrapper {
-  margin-bottom: 24px;
-  width: 100%;
-  height: 224px;
-  background: url(@/assets/images/stage-bg.svg) center / cover no-repeat;
-  border-radius: var(--ui-border-radius-1);
-  overflow: hidden;
-
-  .thumbnail {
-    width: 100%;
-    height: 100%;
-  }
-}
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 20px;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectPublishedModal.vue b/spx-gui/src/components/project/ProjectPublishedModal.vue
index 0a749f6cb..d7deac714 100644
--- a/spx-gui/src/components/project/ProjectPublishedModal.vue
+++ b/spx-gui/src/components/project/ProjectPublishedModal.vue
@@ -33,7 +33,7 @@ const handleCopy = useMessageHandle(
     :auto-focus="false"
     @update:visible="emit('cancelled')"
   >
-    <div class="desc">
+    <div class="mb-2 text-grey-900">
       <I18nT>
         <template #en>
           Visit
@@ -54,7 +54,7 @@ const handleCopy = useMessageHandle(
         </template>
       </I18nT>
     </div>
-    <div class="link-wrapper">
+    <div class="mb-4 flex">
       <UITextInput
         v-radar="{ name: 'Project link input', desc: 'Input field showing the published project link' }"
         :value="projectPageLink"
@@ -63,7 +63,7 @@ const handleCopy = useMessageHandle(
       />
       <UIButton
         v-radar="{ name: 'Copy link button', desc: 'Click to copy project link to clipboard' }"
-        class="copy-button"
+        class="ml-3 whitespace-nowrap"
         @click="handleCopy"
       >
         {{ $t({ en: 'Copy link', zh: '复制链接' }) }}
@@ -71,20 +71,3 @@ const handleCopy = useMessageHandle(
     </div>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.desc {
-  color: var(--ui-color-grey-900);
-  margin-bottom: 8px;
-}
-
-.link-wrapper {
-  display: flex;
-  margin-bottom: 16px;
-}
-
-.copy-button {
-  margin-left: 12px;
-  white-space: nowrap;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectSharingLinkModal.vue b/spx-gui/src/components/project/ProjectSharingLinkModal.vue
index f981f489e..d7b6cd378 100644
--- a/spx-gui/src/components/project/ProjectSharingLinkModal.vue
+++ b/spx-gui/src/components/project/ProjectSharingLinkModal.vue
@@ -6,7 +6,7 @@
     :auto-focus="false"
     @update:visible="emit('cancelled')"
   >
-    <div class="desc">
+    <div class="mb-2 text-grey-900">
       {{
         $t({
           en: 'A sharing link to the project has been created. Feel free to copy it below to share the project with others.',
@@ -14,7 +14,7 @@
         })
       }}
     </div>
-    <div class="link">
+    <div class="mb-4 flex">
       <UITextInput
         v-radar="{ name: 'Sharing link input', desc: 'Input field showing the project sharing link' }"
         :value="projectSharingLink"
@@ -23,7 +23,7 @@
       />
       <UIButton
         v-radar="{ name: 'Copy button', desc: 'Click to copy sharing link to clipboard' }"
-        class="copy-button"
+        class="ml-3 whitespace-nowrap"
         :loading="handleCopy.isLoading.value"
         @click="handleCopy.fn"
       >
@@ -60,20 +60,3 @@ const handleCopy = useMessageHandle(
   { en: 'Link copied to clipboard', zh: '分享链接已复制到剪贴板' }
 )
 </script>
-
-<style scoped lang="scss">
-.desc {
-  color: var(--ui-color-grey-900);
-  margin-bottom: 8px;
-}
-
-.link {
-  display: flex;
-  margin-bottom: 16px;
-}
-
-.copy-button {
-  margin-left: 12px;
-  white-space: nowrap;
-}
-</style>
diff --git a/spx-gui/src/components/tutorials/CourseItem.vue b/spx-gui/src/components/tutorials/CourseItem.vue
index 94d9626a2..905ac855c 100644
--- a/spx-gui/src/components/tutorials/CourseItem.vue
+++ b/spx-gui/src/components/tutorials/CourseItem.vue
@@ -23,47 +23,15 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 <template>
   <li
     v-radar="{ name: `Course item \u0022${props.course.title}\u0022`, desc: 'Click to start the course' }"
-    class="course-item"
+    class="relative w-58 overflow-hidden rounded-3 transition-all hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
     :style="{ height: `${courseItemHeight}px` }"
   >
-    <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
+    <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
 
-    <div class="title">{{ course.title }}</div>
+    <div
+      class="absolute bottom-0 h-10 w-full overflow-hidden bg-grey-1000/30 px-4 text-15/10 whitespace-nowrap text-ellipsis text-grey-100"
+    >
+      {{ course.title }}
+    </div>
   </li>
 </template>
-
-<style lang="scss" scoped>
-.course-item {
-  width: 232px;
-  border-radius: var(--ui-border-radius-3);
-  overflow: hidden;
-  transition: all 0.2s;
-  position: relative;
-
-  &:hover {
-    cursor: pointer;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  }
-
-  .thumbnail {
-    width: 100%;
-    height: 100%;
-  }
-
-  .title {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    font-size: 15px;
-    line-height: 40px;
-    padding: 0 16px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    color: var(--ui-color-grey-100);
-    background: rgb(from var(--ui-color-grey-1000) r g b / 0.3);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue b/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue
index 64bda73d3..6ec2c1832 100644
--- a/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue
+++ b/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue
@@ -85,19 +85,19 @@ const { fn: handleStartNextCourse } = useMessageHandle(
     mask-closable
     @update:visible="handleCancel"
   >
-    <div class="tutorial-course-success-modal">
-      <div class="header">
+    <div class="px-5 pt-4 pb-6">
+      <div class="flex justify-end">
         <UIModalClose class="close" @click="handleCancel" />
       </div>
 
-      <div class="content">
+      <div class="flex flex-col items-center justify-center text-center">
         <!-- eslint-disable vue/no-v-html -->
-        <div class="success" v-html="success"></div>
+        <div class="h-fit w-fit" v-html="success"></div>
 
         <div>{{ $t({ zh: '太棒了!', en: 'Great!' }) }}</div>
         <div>{{ courseCompleteMessage }}</div>
 
-        <div class="actions">
+        <div class="mt-6 flex w-full flex-col gap-5">
           <UIButton color="boring" size="large" @click="handleBrowseTutorials">
             {{ $t({ zh: '浏览所有课程', en: 'Browse all courses' }) }}
           </UIButton>
@@ -110,35 +110,3 @@ const { fn: handleStartNextCourse } = useMessageHandle(
     </div>
   </UIModal>
 </template>
-
-<style lang="scss" scoped>
-.tutorial-course-success-modal {
-  padding: 16px 20px 24px 20px;
-
-  .header {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-
-    .success {
-      width: fit-content;
-      height: fit-content;
-    }
-
-    .actions {
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-      margin-top: 24px;
-      width: 100%;
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/tutorials/TutorialStateIndicator.vue b/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
index 9341a0263..8a11e9a60 100644
--- a/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
+++ b/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
@@ -26,9 +26,11 @@ const { fn: handleExitTutorial } = useMessageHandle(
 <template>
   <UIDropdownWithTooltip placement="top">
     <template #trigger>
-      <div class="tutorial-state-indicator">
-        <UIIcon class="icon-tutorial" type="tutorial" />
-        <UIIcon class="icon-arrow" type="arrowAlt" />
+      <div
+        class="flex h-7 w-13 cursor-pointer items-center justify-center gap-1 rounded-full bg-primary-200 hover:bg-primary-300"
+      >
+        <UIIcon class="text-primary-main" style="width: 16px; height: 16px" type="tutorial" />
+        <UIIcon class="rotate-180 text-primary-main" style="width: 10px; height: 10px" type="arrowAlt" />
       </div>
     </template>
 
@@ -50,33 +52,3 @@ const { fn: handleExitTutorial } = useMessageHandle(
     </template>
   </UIDropdownWithTooltip>
 </template>
-
-<style lang="scss" scoped>
-.tutorial-state-indicator {
-  display: flex;
-  gap: 4px;
-  width: 52px;
-  height: 28px;
-  border-radius: 100px;
-  background: var(--ui-color-primary-200);
-  align-items: center;
-  justify-content: center;
-
-  .icon-tutorial {
-    width: 16px;
-    height: 16px;
-    color: var(--ui-color-primary-main);
-  }
-  .icon-arrow {
-    width: 10px;
-    height: 10px;
-    transform: rotate(180deg);
-    color: var(--ui-color-primary-main);
-  }
-
-  &:hover {
-    cursor: pointer;
-    background: var(--ui-color-primary-300);
-  }
-}
-</style>
diff --git a/spx-gui/src/pages/community/search.vue b/spx-gui/src/pages/community/search.vue
index a89273b37..1f6fba613 100644
--- a/spx-gui/src/pages/community/search.vue
+++ b/spx-gui/src/pages/community/search.vue
@@ -2,11 +2,11 @@
   <CommunityHeader>
     <I18nT v-if="queryRet.data.value != null">
       <template #en>
-        Found {{ queryRet.data.value?.total }} projects for "<span class="keyword">{{ keyword }}</span
+        Found {{ queryRet.data.value?.total }} projects for "<span class="text-primary-main">{{ keyword }}</span
         >"
       </template>
       <template #zh>
-        找到 {{ queryRet.data.value?.total }} 个关于“<span class="keyword">{{ keyword }}</span
+        找到 {{ queryRet.data.value?.total }} 个关于“<span class="text-primary-main">{{ keyword }}</span
         >”的项目
       </template>
     </I18nT>
@@ -44,13 +44,16 @@
       </label>
     </template>
   </CommunityHeader>
-  <CenteredWrapper class="main" :style="{ '--project-num-in-row': numInRow }">
+  <CenteredWrapper class="flex flex-col gap-5 py-5" :style="{ '--project-num-in-row': numInRow }">
     <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet" :height="528">
-      <ul class="projects">
+      <ul class="grid grid-cols-[repeat(var(--project-num-in-row),minmax(0,1fr))] gap-5">
         <ProjectItem v-for="project in slotProps.data.data" :key="project.id" :project="project" />
       </ul>
     </ListResultWrapper>
-    <footer v-show="pageTotal > 1" class="pagination-wrapper">
+    <footer
+      v-show="pageTotal > 1"
+      class="flex h-14 w-full shrink-0 items-center justify-center rounded-2 border border-grey-400 bg-grey-100"
+    >
       <UIPagination v-model:current="page" :total="pageTotal" />
     </footer>
   </CenteredWrapper>
@@ -128,34 +131,3 @@ const queryRet = useQuery(() => listProject(listParams.value), {
   zh: '搜索项目失败'
 })
 </script>
-
-<style lang="scss" scoped>
-.keyword {
-  color: var(--ui-color-primary-main);
-}
-
-.main {
-  padding: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.projects {
-  display: grid;
-  grid-template-columns: repeat(var(--project-num-in-row), 1fr);
-  gap: 20px;
-}
-
-.pagination-wrapper {
-  flex: 0 0 56px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: var(--ui-border-radius-2);
-  border: 1px solid var(--ui-color-grey-400);
-  background: var(--ui-color-grey-100);
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/followers.vue b/spx-gui/src/pages/community/user/followers.vue
index 653c03f19..23ce409a9 100644
--- a/spx-gui/src/pages/community/user/followers.vue
+++ b/spx-gui/src/pages/community/user/followers.vue
@@ -53,13 +53,6 @@ const queryRet = useQuery(
         <UserItem v-for="u in slotProps.data.data" :key="u.id" :user="u" />
       </ul>
     </ListResultWrapper>
-    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 mb-5 justify-center" :total="pageTotal" />
   </UserContent>
 </template>
-
-<style lang="scss" scoped>
-.pagination {
-  margin: 36px 0 20px;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/following.vue b/spx-gui/src/pages/community/user/following.vue
index ea405a8e3..2cd640e82 100644
--- a/spx-gui/src/pages/community/user/following.vue
+++ b/spx-gui/src/pages/community/user/following.vue
@@ -53,13 +53,6 @@ const queryRet = useQuery(
         <UserItem v-for="u in slotProps.data.data" :key="u.id" :user="u" />
       </ul>
     </ListResultWrapper>
-    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 mb-5 justify-center" :total="pageTotal" />
   </UserContent>
 </template>
-
-<style lang="scss" scoped>
-.pagination {
-  margin: 36px 0 20px;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/index.vue b/spx-gui/src/pages/community/user/index.vue
index 8316e1e41..c42a52353 100644
--- a/spx-gui/src/pages/community/user/index.vue
+++ b/spx-gui/src/pages/community/user/index.vue
@@ -29,50 +29,18 @@ watch(user, (currentUser) => {
 </script>
 
 <template>
-  <CenteredWrapper class="user-page" size="large">
-    <UIError v-if="error != null" class="error" :retry="refetch">
+  <CenteredWrapper class="flex flex-[1_0_auto] flex-col gap-5 pt-6 pb-10" size="large">
+    <UIError v-if="error != null" class="flex flex-1 rounded-2 bg-grey-100" :retry="refetch">
       {{ $t(error.userMessage) }}
     </UIError>
     <template v-else-if="user != null">
       <UserHeader :user="user" />
-      <div class="main">
-        <UserSidebar class="sidebar" :username="user.username" />
-        <div class="content">
+      <div class="flex items-start gap-5">
+        <UserSidebar class="shrink-0" :username="user.username" />
+        <div class="min-w-0 flex-1">
           <router-view />
         </div>
       </div>
     </template>
   </CenteredWrapper>
 </template>
-
-<style lang="scss" scoped>
-.user-page {
-  flex: 1 0 auto;
-  padding: 24px 0 40px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.error {
-  flex: 1 1 0;
-  display: flex;
-
-  border-radius: var(--ui-border-radius-2);
-  background: var(--ui-color-grey-100);
-}
-
-.main {
-  display: flex;
-  align-items: flex-start;
-  gap: 20px;
-
-  .sidebar {
-    flex: 0 0 auto;
-  }
-  .content {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/likes.vue b/spx-gui/src/pages/community/user/likes.vue
index de68fde61..ac3cd7783 100644
--- a/spx-gui/src/pages/community/user/likes.vue
+++ b/spx-gui/src/pages/community/user/likes.vue
@@ -53,30 +53,13 @@ const queryRet = useQuery(
     <template #title>
       {{ $t({ en: 'Projects I like', zh: '我喜欢的项目' }) }}
     </template>
-    <div class="projects-wrapper">
+    <div class="mt-2">
       <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet" :height="524">
-        <ul class="projects">
+        <ul class="grid grid-cols-[repeat(var(--project-num-in-row),minmax(0,1fr))] gap-middle">
           <ProjectItem v-for="project in slotProps.data.data" :key="project.id" :project="project" />
         </ul>
       </ListResultWrapper>
-      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 mb-5 justify-center" :total="pageTotal" />
     </div>
   </UserContent>
 </template>
-
-<style lang="scss" scoped>
-.projects-wrapper {
-  margin-top: 8px;
-}
-
-.projects {
-  display: grid;
-  grid-template-columns: repeat(var(--project-num-in-row), 1fr);
-  gap: var(--ui-gap-middle);
-}
-
-.pagination {
-  margin: 36px 0 20px;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/overview.vue b/spx-gui/src/pages/community/user/overview.vue
index 8c8e3d2f3..e132a4b1e 100644
--- a/spx-gui/src/pages/community/user/overview.vue
+++ b/spx-gui/src/pages/community/user/overview.vue
@@ -73,8 +73,8 @@ const likesRet = useQuery(
 </script>
 
 <template>
-  <div class="user-overview">
-    <CommunityCard class="card">
+  <div class="flex flex-col gap-5">
+    <CommunityCard class="px-middle">
       <ProjectsSection
         v-radar="{ name: 'User projects', desc: 'Section showing user\'s projects' }"
         context="user"
@@ -110,7 +110,7 @@ const likesRet = useQuery(
         />
       </ProjectsSection>
     </CommunityCard>
-    <CommunityCard class="card">
+    <CommunityCard class="px-middle">
       <ProjectsSection
         v-radar="{ name: 'User liked projects', desc: 'Section showing projects liked by this user' }"
         context="user"
@@ -139,15 +139,3 @@ const likesRet = useQuery(
     </CommunityCard>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.user-overview {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.card {
-  padding: 0 var(--ui-gap-middle);
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/projects.vue b/spx-gui/src/pages/community/user/projects.vue
index 2a77a6186..410fbdce2 100644
--- a/spx-gui/src/pages/community/user/projects.vue
+++ b/spx-gui/src/pages/community/user/projects.vue
@@ -91,7 +91,7 @@ const handleNewProject = useMessageHandle(
       {{ $t({ en: 'My projects', zh: '我的项目' }) }}
     </template>
     <template #extra>
-      <label class="sort">
+      <label class="flex items-center gap-2">
         {{
           $t({
             en: 'Sort by',
@@ -123,9 +123,9 @@ const handleNewProject = useMessageHandle(
         {{ $t({ en: 'New project', zh: '新建项目' }) }}
       </UIButton>
     </template>
-    <div class="projects-wrapper">
+    <div class="mt-2">
       <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet" :height="524">
-        <ul class="projects">
+        <ul class="grid grid-cols-[repeat(var(--project-num-in-row),minmax(0,1fr))] gap-middle">
           <ProjectItem
             v-for="project in slotProps.data.data"
             :key="project.id"
@@ -136,30 +136,7 @@ const handleNewProject = useMessageHandle(
           />
         </ul>
       </ListResultWrapper>
-      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 mb-5 justify-center" :total="pageTotal" />
     </div>
   </UserContent>
 </template>
-
-<style lang="scss" scoped>
-.sort {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.projects-wrapper {
-  margin-top: 8px;
-}
-
-.projects {
-  display: grid;
-  grid-template-columns: repeat(var(--project-num-in-row), 1fr);
-  gap: var(--ui-gap-middle);
-}
-
-.pagination {
-  margin: 36px 0 20px;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/pages/tutorials/course-series.vue b/spx-gui/src/pages/tutorials/course-series.vue
index acf217d98..0775d26a7 100644
--- a/spx-gui/src/pages/tutorials/course-series.vue
+++ b/spx-gui/src/pages/tutorials/course-series.vue
@@ -18,6 +18,8 @@ import { useRouteQueryParamInt } from '@/utils/route'
 import { useAsyncComputed, usePageTitle } from '@/utils/utils'
 import { useMessageHandle } from '@/utils/exception'
 import CommunityFooter from '@/components/community/footer/CommunityFooter.vue'
+// TODO: Temporary background, replace with the latest assets
+import stageBg from '@/assets/images/stage-bg.svg'
 
 const coursePadding = 20
 const numInColumn = 2
@@ -96,29 +98,34 @@ const { fn: handleCourseClick } = useMessageHandle(
 </script>
 
 <template>
-  <div class="course-series-page">
+  <div class="flex h-full w-full flex-col overflow-y-auto bg-grey-300">
     <!-- TODO: Temporarily import the community component -->
     <CommunityNavbar />
 
-    <CenteredWrapper size="medium" class="content-wrapper">
-      <CommunityCard class="header">
+    <CenteredWrapper size="medium" class="my-6">
+      <CommunityCard class="relative flex gap-10 bg-grey-100 p-5">
         <UILoading v-if="courseSeriesIsLoading" cover mask="solid" />
         <UIError v-else-if="courseSeriesError != null" :retry="courseSeriesRefetch">
           {{ $t(courseSeriesError.userMessage) }}
         </UIError>
-        <div class="left">
-          <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
+        <div
+          class="aspect-[1.08] flex-[1_1_200px] overflow-hidden rounded-3 bg-center bg-cover"
+          :style="{ backgroundImage: `url(${stageBg})` }"
+        >
+          <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
         </div>
-        <div class="right">
+        <div class="mr-5 flex flex-[1_1_1000px] flex-col gap-5 overflow-hidden">
           <template v-if="courseSeries != null">
-            <h2 class="title">{{ courseSeries.title }}</h2>
+            <h2 class="overflow-hidden text-20/7 whitespace-nowrap text-ellipsis text-grey-1000">
+              {{ courseSeries.title }}
+            </h2>
 
             <div
               v-radar="{
                 name: 'Course series details',
                 desc: 'Course series description'
               }"
-              class="description"
+              class="flex-1 overflow-auto"
             >
               <TextView
                 :text="courseSeries.description"
@@ -129,7 +136,7 @@ const { fn: handleCourseClick } = useMessageHandle(
         </div>
       </CommunityCard>
 
-      <div class="courses-wrapper">
+      <div class="mt-7 flex flex-col">
         <div v-if="courseSeries" :style="{ '--num-in-row': numInRow }">
           <ListResultWrapper :query-ret="courseQuery" :height="height">
             <template #empty="{ style }">
@@ -143,7 +150,7 @@ const { fn: handleCourseClick } = useMessageHandle(
               </UIEmpty>
             </template>
             <template #default="{ data }">
-              <ul class="course-list">
+              <ul class="grid grid-cols-[repeat(var(--num-in-row),minmax(0,1fr))] gap-5">
                 <!-- a tag are used for: link preview on hover, context menu support, and better accessibility -->
                 <a
                   v-for="course in data.data"
@@ -157,87 +164,10 @@ const { fn: handleCourseClick } = useMessageHandle(
             </template>
           </ListResultWrapper>
         </div>
-        <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+        <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 self-center" :total="pageTotal" />
       </div>
     </CenteredWrapper>
 
     <CommunityFooter />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.course-series-page {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ui-color-grey-300);
-}
-
-.content-wrapper {
-  margin: 24px auto;
-}
-
-.header {
-  position: relative;
-  padding: 20px;
-  display: flex;
-  gap: 40px;
-  background: var(--ui-color-grey-100);
-
-  .left {
-    flex: 1 1 200px;
-    aspect-ratio: 1.08;
-    overflow: hidden;
-    border-radius: var(--ui-border-radius-3);
-    // TODO: Temporary background, replace with the latest assets
-    background-image: url(@/assets/images/stage-bg.svg);
-
-    .thumbnail {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .right {
-    flex: 1 1 1000px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    margin-right: 20px;
-    gap: 20px;
-
-    .title {
-      line-height: 28px;
-      font-size: 20px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      color: var(--ui-color-grey-1000);
-    }
-
-    .description {
-      flex: 1 1 0;
-      overflow: auto;
-    }
-  }
-}
-
-.courses-wrapper {
-  display: flex;
-  margin-top: 28px;
-  flex-direction: column;
-
-  .course-list {
-    display: grid;
-    grid-template-columns: repeat(var(--num-in-row), 1fr);
-    gap: 20px;
-  }
-
-  .pagination {
-    align-self: center;
-    margin-top: 36px;
-  }
-}
-</style>

From 187b3b5c8c1fd67711745058990a0b7d7c78e6b1 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Wed, 1 Apr 2026 08:28:21 +0800
Subject: [PATCH 05/29] batch migration task 2 - asset

---
 docs/develop/tailwind-css-migration.md        |   1 +
 spx-gui/AGENTS.md                             |   1 +
 spx-gui/src/app.css                           |   2 +
 spx-gui/src/components/asset/AssetName.vue    |  11 +-
 .../asset/animation/GroupCostumesModal.vue    |  60 +---
 .../gen/animation/AnimationGenPreview.vue     |  14 +-
 .../gen/animation/AnimationSettingsInput.vue  |   2 -
 .../gen/animation/AnimationVideoPreview.vue   |  90 +++---
 .../asset/gen/backdrop/BackdropGen.vue        |  35 +--
 .../asset/gen/backdrop/BackdropGenItem.vue    |   2 -
 .../asset/gen/backdrop/BackdropGenModal.vue   |  27 +-
 .../asset/gen/backdrop/BackdropImageItem.vue  |  71 +----
 .../gen/backdrop/BackdropSettingsInput.vue    |   2 -
 .../asset/gen/common/AssetSuggestions.vue     |  34 +--
 .../components/asset/gen/common/GenItem.vue   | 115 ++++----
 .../asset/gen/common/GenLoading.vue           | 110 ++++----
 .../components/asset/gen/common/GenPanel.vue  |  24 +-
 .../asset/gen/common/GenPreview.vue           |  61 +----
 .../asset/gen/common/ImagePreview.vue         |  29 +-
 .../asset/gen/common/ImageSelector.vue        |  33 +--
 .../asset/gen/common/LayoutWithPreview.vue    |  19 +-
 .../asset/gen/common/ListItemWrapper.vue      |  47 +---
 .../gen/common/PreviewWithCheckerboardBg.vue  |  34 +--
 .../asset/gen/common/SettingsInput.vue        | 258 +++++++++---------
 .../common/param-settings/ParamSelector.vue   |  87 +-----
 .../asset/gen/costume/CostumeGenPreview.vue   |  22 +-
 .../gen/costume/CostumeSettingsInput.vue      |   2 -
 .../asset/gen/sprite/SpriteGenModal.vue       |  27 +-
 .../gen/sprite/SpriteGenPhaseContent.vue      |  71 +----
 .../gen/sprite/SpriteGenPhaseSettings.vue     |  35 +--
 .../asset/gen/sprite/SpriteImageItem.vue      |  72 +----
 .../asset/library/AssetLibraryModal.vue       | 201 +++-----------
 .../asset/library/AssetSaveModal.vue          |  42 +--
 .../components/asset/library/SoundPreview.vue |  17 +-
 .../library/management/AssetEditModal.vue     |  50 +---
 .../AssetLibraryManagementModal.vue           |  64 +----
 .../library/management/VisibilityIcon.vue     |  25 +-
 .../asset/preprocessing/PreprocessModal.vue   |  52 +---
 .../asset/preprocessing/common/ImgPreview.vue |  21 +-
 .../preprocessing/common/ProcessDetail.vue    |  43 +--
 .../preprocessing/common/ProcessItem.vue      |  68 +----
 .../split-sprite-sheet/SplitSpriteSheet.vue   |  10 +-
 .../asset/scratch/LoadFromScratch.vue         |  27 +-
 .../src/components/common/CostumesPlayer.vue  |   2 +-
 .../common/ModificationWarningModal.vue       |  69 +----
 spx-gui/src/components/common/RenameModal.vue |  28 +-
 .../components/community/CommunityHeader.vue  |   4 +-
 .../community/footer/CommunityFooter.vue      |   2 +-
 .../components/community/user/UserHeader.vue  |   4 +-
 .../editor/map-editor/MapEditor.vue           |   8 +-
 spx-gui/src/components/ui/modal/UIModal.vue   |   4 +-
 spx-gui/src/pages/community/search.vue        |   2 +-
 spx-gui/src/pages/community/user/index.vue    |   6 +-
 spx-gui/src/pages/docs/ui-design.vue          |  77 ++----
 spx-gui/src/pages/editor/index.vue            |  29 +-
 55 files changed, 557 insertions(+), 1696 deletions(-)

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
index 754fd38b3..f5b4dc556 100644
--- a/docs/develop/tailwind-css-migration.md
+++ b/docs/develop/tailwind-css-migration.md
@@ -421,6 +421,7 @@ Representative examples from the pilot:
 Preferred style in this category:
 
 - write the style directly in the template when the utilities remain readable
+- when original CSS uses `flex: <grow> <shrink> <basis>`, preserve that shorthand with `flex-[<grow>_<shrink>_<basis>]` instead of decomposing it into partial utilities such as `shrink-0`, so grow, shrink, and basis stay coupled during migration
 - remove the local style block after the result is verified
 
 Responsive styling preference:
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 9834d8e22..3fb2a4822 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -99,6 +99,7 @@ When working with backend unique string identifiers such as `username`, project
 * For responsive styling, prefer Tailwind responsive variants over runtime `useResponsive()` checks.
 * Keep `useResponsive()` for non-style logic only, such as changing fetched counts or other runtime behavior that CSS cannot express.
 * Prefer Tailwind for straightforward layout and surface styling: flex, grid, spacing, sizing, alignment, overflow, simple typography, and simple hover states.
+* When original CSS uses `flex: <grow> <shrink> <basis>`, preserve it with `flex-[<grow>_<shrink>_<basis>]` instead of decomposing it into partial utilities such as `shrink-0`.
 * When Tailwind classes stay readable, write them directly in the template and remove the local style block after verification.
 * Keep local CSS or SCSS for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets.
 * Preserve semantic hook classes that are consumed by parent selectors, slot content, or `:deep(...)` rules. Do not remove classes such as `.corner-menu` or `.course-item-mini` just because the element's own visual styles moved to Tailwind.
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 402c6bbd7..77763fb95 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -241,6 +241,8 @@
 
   --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;
   --text-13: 13px;
diff --git a/spx-gui/src/components/asset/AssetName.vue b/spx-gui/src/components/asset/AssetName.vue
index f15b068ec..71361e5d7 100644
--- a/spx-gui/src/components/asset/AssetName.vue
+++ b/spx-gui/src/components/asset/AssetName.vue
@@ -1,14 +1,5 @@
 <template>
-  <span class="asset-name">
+  <span class="max-w-[16em] overflow-x-hidden text-ellipsis whitespace-nowrap">
     <slot></slot>
   </span>
 </template>
-
-<style scoped lang="scss">
-.asset-name {
-  max-width: 16em;
-  overflow-x: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-</style>
diff --git a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
index e3258e699..8bb8f1226 100644
--- a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
+++ b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
@@ -12,8 +12,8 @@
     :body-style="{ padding: '0' }"
     @update:visible="emit('cancelled')"
   >
-    <div class="container">
-      <ul class="costume-list">
+    <div class="flex min-h-119 max-h-150">
+      <ul class="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto pt-5 pr-0 pb-5 pl-6">
         <CostumeItem
           v-for="costume in props.sprite.costumes"
           :key="costume.id"
@@ -22,16 +22,16 @@
           @click="handleCostumeClick(costume)"
         />
       </ul>
-      <div class="sep"></div>
-      <div class="preview">
+      <div class="my-5 w-px self-stretch bg-dividing-line-2"></div>
+      <div class="w-[402px] flex-none self-stretch px-6 py-5">
         <UIEmpty v-if="selectedCostumes.length === 0" size="medium">
           {{ $t({ en: 'Select costumes to continue', zh: '请选择造型' }) }}
         </UIEmpty>
-        <AnimationPlayer v-else class="player" :costumes="selectedCostumes" :duration="duration" :sound="null" />
+        <AnimationPlayer v-else class="h-full w-full" :costumes="selectedCostumes" :duration="duration" :sound="null" />
       </div>
     </div>
-    <div class="footer">
-      <div class="spacer" />
+    <div class="flex items-center gap-2 px-6 py-5">
+      <div class="flex-1" />
       <UICheckbox v-model:checked="removeCostumes">
         <span>
           {{
@@ -107,49 +107,3 @@ const handleConfirm = () => {
   })
 }
 </script>
-<style lang="scss" scoped>
-.container {
-  min-height: 476px;
-  max-height: 600px;
-  display: flex;
-}
-
-.costume-list {
-  padding: 20px 0 20px 24px;
-  flex: 1 1 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-content: flex-start;
-  overflow-y: auto;
-}
-
-.sep {
-  margin: 20px 0;
-  width: 1px;
-  align-self: stretch;
-  background-color: var(--ui-color-dividing-line-2);
-}
-
-.preview {
-  padding: 20px 24px;
-  flex: 0 0 402px;
-  align-self: stretch;
-
-  .player {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.footer {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  padding: 20px 24px;
-}
-
-.spacer {
-  flex: 1;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue b/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue
index 423af2c82..d4d2aeac7 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue
@@ -51,7 +51,7 @@ const videoPreviewKey = computed(() => {
 </script>
 
 <template>
-  <GenPreview v-if="gen.result == null" class="animation-gen-preview" :name="gen.name" @rename="handleRenameAnimation">
+  <GenPreview v-if="gen.result == null" class="absolute inset-0" :name="gen.name" @rename="handleRenameAnimation">
     <template v-if="canSaveAnimation" #ops>
       <UIButton color="success" :loading="savingAnimation" @click="handleSaveAnimation">{{
         $t({ en: 'Save animation', zh: '保存动画' })
@@ -85,19 +85,9 @@ const videoPreviewKey = computed(() => {
   </GenPreview>
   <AnimationDetail
     v-else
-    class="animation-detail"
+    :style="{ background: 'transparent' }"
     :animation="gen.result"
     :sound-editable="false"
     @rename="handleRenameAnimation"
   />
 </template>
-
-<style lang="scss" scoped>
-.animation-gen-preview {
-  position: absolute;
-  inset: 0;
-}
-.animation-detail {
-  background: transparent;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue b/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
index d5717d731..0b66b0e79 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
@@ -66,5 +66,3 @@ const submitText = computed(() => {
     </template>
   </SettingsInput>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue b/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
index b297a2e07..f5cb54a45 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
@@ -321,7 +321,7 @@ function formatTime(timeInMs: number) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 @keyframes leftMarker {
   0%,
   100% {
@@ -410,48 +410,45 @@ function formatTime(timeInMs: number) {
   width: 100%;
   height: 100%;
   isolation: isolate;
+}
 
-  &.nudge {
-    .segment-marker {
-      &::after {
-        content: '';
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        position: absolute;
-        background-color: var(--ui-color-turquoise-300);
-        mask-image: url('@/components/asset/gen/animation/marker-arrow.svg');
-        mask-size: contain;
-        mask-repeat: no-repeat;
-      }
+.track-inner.nudge .segment-marker::after {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  background-color: var(--ui-color-turquoise-300);
+  mask-image: url('@/components/asset/gen/animation/marker-arrow.svg');
+  mask-size: contain;
+  mask-repeat: no-repeat;
+}
 
-      &.left {
-        animation: leftMarker 1.8s infinite ease-in-out;
+.track-inner.nudge .segment-marker.left {
+  animation: leftMarker 1.8s infinite ease-in-out;
+}
 
-        &::after {
-          right: -24px;
-          animation: markerArrow 1.8s infinite ease-in-out;
-        }
-      }
+.track-inner.nudge .segment-marker.left::after {
+  right: -24px;
+  animation: markerArrow 1.8s infinite ease-in-out;
+}
 
-      &.right {
-        animation: rightMarker 1.8s infinite ease-in-out;
-        &::after {
-          left: -24px;
-          transform: rotateY(180deg);
-          animation: markerArrow 1.8s infinite ease-in-out;
-        }
-      }
-    }
+.track-inner.nudge .segment-marker.right {
+  animation: rightMarker 1.8s infinite ease-in-out;
+}
 
-    .track-tips {
-      display: block;
-    }
+.track-inner.nudge .segment-marker.right::after {
+  left: -24px;
+  transform: rotateY(180deg);
+  animation: markerArrow 1.8s infinite ease-in-out;
+}
 
-    .current-time {
-      display: none;
-    }
-  }
+.track-inner.nudge .track-tips {
+  display: block;
+}
+
+.track-inner.nudge .current-time {
+  display: none;
 }
 
 .segment {
@@ -482,15 +479,16 @@ function formatTime(timeInMs: number) {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1; // Ensure it stays above .current-time to prioritize .segment-marker as it is interactive
-
-  &::before {
-    content: '';
-    display: block;
-    width: 1px;
-    height: 12px;
-    background: var(--ui-color-grey-100);
-  }
+  /* Ensure it stays above .current-time to prioritize .segment-marker as it is interactive. */
+  z-index: 1;
+}
+
+.segment-marker::before {
+  content: '';
+  display: block;
+  width: 1px;
+  height: 12px;
+  background: var(--ui-color-grey-100);
 }
 
 .track-tips {
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
index 545973c22..9d14e78ca 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
@@ -84,17 +84,17 @@ const handleUseAsset = useMessageHandle(
 <template>
   <main
     v-radar="{ name: 'Backdrop generation', desc: 'Interface for generating and selecting backdrops' }"
-    class="backdrop-gen"
+    class="backdrop-gen flex h-full flex-col items-stretch"
   >
     <LayoutWithPreview :has-preview="hasPreview">
       <BackdropSettingInput
-        class="settings-input"
-        :class="{ 'has-preview': hasPreview }"
+        :class="{ 'h-75': hasPreview }"
         :gen="gen"
         :disabled="handleSubmit.isLoading.value"
         :description-placeholder="descriptionPlaceholder"
       />
-      <div class="select-area">
+      <!-- Fixed height to prevent layout shift when suggestions appear/disappear -->
+      <div class="h-42.5">
         <AssetSuggestions
           v-if="isLibrarySearchEnabled"
           :type="AssetType.Backdrop"
@@ -141,7 +141,7 @@ const handleUseAsset = useMessageHandle(
         <ImagePreview :file="gen.image" />
       </template>
     </LayoutWithPreview>
-    <footer class="footer">
+    <footer class="flex w-full flex-none justify-end gap-4 px-6 py-5">
       <UIButton
         v-if="selectedAsset != null"
         v-radar="{
@@ -172,13 +172,8 @@ const handleUseAsset = useMessageHandle(
   </main>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .backdrop-gen {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-
   background-image: url('../common/phase-settings-left-bottom-bg.png'), url('../common/phase-settings-right-top-bg.png');
   background-position:
     left bottom,
@@ -187,23 +182,5 @@ const handleUseAsset = useMessageHandle(
   background-size:
     520px auto,
     180px auto;
-
-  .settings-input {
-    &.has-preview {
-      height: 300px;
-    }
-  }
-  .select-area {
-    height: 170px; // Fixed height to prevent layout shift when suggestions appear/disappear
-  }
-}
-
-.footer {
-  width: 100%;
-  flex: 0 0 auto;
-  padding: 20px 24px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 16px;
 }
 </style>
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue
index 88a0863dd..e36e1eb2d 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue
@@ -36,5 +36,3 @@ const highlight = computed(() => props.gen.imagesGenState.status === 'finished')
     <UIBlockItemTitle size="medium">{{ gen.settings.name }}</UIBlockItemTitle>
   </GenItem>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
index 8119e50b2..d37ac99ba 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
@@ -61,38 +61,17 @@ const handleModalClose = useMessageHandle(
     mask-closable
     @update:visible="handleModalClose"
   >
-    <header class="header">
-      <h2 class="title">{{ $t({ zh: '生成背景', en: 'Backdrop Generator' }) }}</h2>
+    <header class="flex h-14 items-center justify-between border-b border-grey-400 px-6">
+      <h2 class="text-16 text-title">{{ $t({ zh: '生成背景', en: 'Backdrop Generator' }) }}</h2>
       <UIModalClose class="close" @click="handleModalClose" />
     </header>
 
     <BackdropGenComp
       v-if="activeGen != null"
-      class="backdrop-gen"
+      class="min-h-0 flex-[1_1_0]"
       :gen="activeGen"
       library-search-enabled
       @resolved="emit('resolved', $event)"
     />
   </UIModal>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  height: 56px;
-  border-bottom: 1px solid var(--ui-color-grey-400);
-
-  .title {
-    font-size: 16px;
-    color: var(--ui-color-title);
-  }
-}
-
-.backdrop-gen {
-  flex: 1 1 0;
-  min-height: 0;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
index 8a8954cfb..c5a3d9a52 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
@@ -31,69 +31,16 @@ const loading = computed(() => props.loading || fileLoading.value)
       name: 'Backdrop image item',
       desc: 'Click to select this image as the backdrop'
     }"
-    class="backdrop-image-item"
-    :class="{ active, compact, loading, disabled }"
+    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[width,height,border-radius] duration-200 ease-in-out"
+    :class="[
+      compact ? 'h-17 w-22 rounded-1' : 'h-27 w-35 rounded-2',
+      active ? 'border-turquoise-500 bg-turquoise-200 cursor-default' : '',
+      disabled ? 'cursor-not-allowed opacity-50' : '',
+      loading ? 'cursor-default pointer-events-none' : '',
+      !active && !disabled && !loading ? 'cursor-pointer' : ''
+    ]"
   >
     <GenLoading v-if="loading" animation-style="width: 60px; height: 60px;" />
-    <UIImg v-else class="img" :src="url" size="cover" />
+    <UIImg v-else :class="compact ? 'h-15 w-20 rounded-[4px]' : 'h-25 w-33 rounded-1'" :src="url" size="cover" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.backdrop-image-item {
-  display: flex;
-  width: 140px;
-  height: 108px;
-  padding: 4px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-  border: 2px solid transparent;
-  background-color: var(--ui-color-grey-300);
-  cursor: pointer;
-  overflow: hidden;
-
-  transition:
-    width 0.2s ease,
-    height 0.2s ease,
-    border-radius 0.2s ease;
-
-  &.active {
-    background-color: var(--ui-color-turquoise-200);
-    border-color: var(--ui-color-turquoise-500);
-    cursor: default;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.loading {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  &.compact {
-    width: 88px;
-    height: 68px;
-    border-radius: 8px;
-  }
-}
-
-.img {
-  width: 132px;
-  height: 100px;
-  border-radius: 8px;
-  transition:
-    width 0.2s ease,
-    height 0.2s ease,
-    border-radius 0.2s ease;
-}
-
-.backdrop-image-item.compact .img {
-  width: 80px;
-  height: 60px;
-  border-radius: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue
index 611f474eb..be9d54ff9 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue
@@ -80,5 +80,3 @@ const submitText = computed(() => {
     </template>
   </SettingsInput>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue b/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
index c99bad064..c551c678f 100644
--- a/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
+++ b/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
@@ -29,14 +29,14 @@ const entityMessage = computed(() => entityMessages[props.type])
 
 <template>
   <UILoading v-if="loading" />
-  <div v-else class="asset-suggestions">
+  <div v-else class="flex flex-col items-center gap-3">
     <template v-if="suggestions.length > 0">
-      <ul class="list">
+      <ul class="m-0 flex list-none flex-nowrap items-center justify-center gap-2 p-0">
         <template v-for="asset in suggestions" :key="asset.id">
           <slot name="item" :asset="asset" :selected="isSelected(asset)" :on-click="() => emit('toggle', asset)"></slot>
         </template>
       </ul>
-      <p class="tip">
+      <p class="text-center text-12 text-hint-2">
         {{
           $t({
             en: `There are related ${entityMessage.en}s in the asset library. You can choose the one you like or continue generating.`,
@@ -45,7 +45,7 @@ const entityMessage = computed(() => entityMessages[props.type])
         }}
       </p>
     </template>
-    <p v-else-if="keyword.length > 0" class="tip" style="margin-top: 56px">
+    <p v-else-if="keyword.length > 0" class="mt-14 text-center text-12 text-hint-2">
       {{
         $t({
           en: `No matching ${entityMessage.en}s found in the asset library. You can continue generating.`,
@@ -55,29 +55,3 @@ const entityMessage = computed(() => entityMessages[props.type])
     </p>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.asset-suggestions {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-
-.list {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: nowrap;
-  justify-content: center;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.tip {
-  text-align: center;
-  font-size: 12px;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/GenItem.vue b/spx-gui/src/components/asset/gen/common/GenItem.vue
index 804de5d80..a3d10a9d4 100644
--- a/spx-gui/src/components/asset/gen/common/GenItem.vue
+++ b/spx-gui/src/components/asset/gen/common/GenItem.vue
@@ -62,76 +62,71 @@ const style = computed(() => {
   </UIBlockItem>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 @property --angle {
   syntax: '<angle>';
   initial-value: 0deg;
   inherits: false;
 }
 
-.gen-item {
-  &.loading {
-    // Force override UIBlockItem's border-color when active
-    border-color: transparent !important;
+@keyframes rotate-gradient {
+  to {
+    --angle: 360deg;
+  }
+}
 
-    &.active {
-      &::before {
-        background: conic-gradient(
-          from var(--angle) at 50% 50%,
-          var(--loading-active-trace-color) 0deg,
-          var(--loading-head-color) 40deg,
-          var(--loading-tail-color) 110deg,
-          var(--loading-active-trace-color)
-        );
-      }
-    }
+.gen-item.loading {
+  /* Force override UIBlockItem's border-color when active */
+  border-color: transparent !important;
+}
 
-    &::before {
-      content: '';
-      position: absolute;
-      inset: -2px;
-      padding: 2px;
-      border-radius: inherit;
-      mask:
-        linear-gradient(#fff 0 0) content-box,
-        linear-gradient(#fff 0 0);
-      mask-composite: exclude;
-      pointer-events: none;
-      background: conic-gradient(
-        from var(--angle) at 50% 50%,
-        var(--loading-trace-color) 0deg,
-        var(--loading-head-color) 40deg,
-        var(--loading-tail-color) 110deg,
-        var(--loading-trace-color) 160deg
-      );
-      animation: rotate-gradient 3s linear infinite;
-    }
+.gen-item.loading.active::before {
+  background: conic-gradient(
+    from var(--angle) at 50% 50%,
+    var(--loading-active-trace-color) 0deg,
+    var(--loading-head-color) 40deg,
+    var(--loading-tail-color) 110deg,
+    var(--loading-active-trace-color)
+  );
+}
 
-    @keyframes rotate-gradient {
-      to {
-        --angle: 360deg;
-      }
-    }
-  }
+.gen-item.loading::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  padding: 2px;
+  border-radius: inherit;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  background: conic-gradient(
+    from var(--angle) at 50% 50%,
+    var(--loading-trace-color) 0deg,
+    var(--loading-head-color) 40deg,
+    var(--loading-tail-color) 110deg,
+    var(--loading-trace-color) 160deg
+  );
+  animation: rotate-gradient 3s linear infinite;
+}
 
-  &.highlight {
-    .placeholder {
-      color: var(--highlight-color);
-    }
-  }
+.gen-item.highlight .placeholder {
+  color: var(--highlight-color);
+}
 
-  .preview-wrapper {
-    margin-bottom: 5px;
-    height: 60px;
-    width: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .placeholder {
-    width: 24px;
-    height: 24px;
-    color: var(--ui-color-grey-700);
-  }
+.gen-item .preview-wrapper {
+  margin-bottom: 5px;
+  height: 60px;
+  width: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gen-item .placeholder {
+  width: 24px;
+  height: 24px;
+  color: var(--ui-color-grey-700);
 }
 </style>
diff --git a/spx-gui/src/components/asset/gen/common/GenLoading.vue b/spx-gui/src/components/asset/gen/common/GenLoading.vue
index a87b47dbf..5a00bb8b5 100644
--- a/spx-gui/src/components/asset/gen/common/GenLoading.vue
+++ b/spx-gui/src/components/asset/gen/common/GenLoading.vue
@@ -41,7 +41,7 @@ const slots = useSlots()
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 @property --bg-angle {
   syntax: '<angle>';
   inherits: false;
@@ -59,65 +59,67 @@ const slots = useSlots()
   transition:
     visibility 0.2s,
     opacity 0.2s;
+}
 
-  &.cover {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    overflow: hidden;
-    background-color: var(--ui-color-grey-100);
-  }
+.gen-loading.cover {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  background-color: var(--ui-color-grey-100);
+}
 
-  &.variant-bg-spin {
-    border-radius: 8px;
-    // CSS Progressive Enhancement: Browsers that do not support @property will skip its definition.
-    // We can ensure compatibility by setting an initial value here.
-    --bg-angle: 0deg;
-
-    // Use cos/sin to calculate the rotation position of each gradient center
-    // 100% is the rotation radius, 50% is the center offset
-    background-image: radial-gradient(
-        circle at calc(50% + cos(var(--bg-angle) + 0deg) * 100%) calc(50% + sin(var(--bg-angle) + 0deg) * 100%),
-        var(--ui-color-turquoise-200) 20%,
-        transparent 70%
-      ),
-      radial-gradient(
-        circle at calc(50% + cos(var(--bg-angle) + 90deg) * 100%) calc(50% + sin(var(--bg-angle) + 90deg) * 100%),
-        var(--ui-color-blue-200) 20%,
-        transparent 70%
-      ),
-      radial-gradient(
-        circle at calc(50% + cos(var(--bg-angle) + 180deg) * 100%) calc(50% + sin(var(--bg-angle) + 180deg) * 100%),
-        var(--ui-color-blue-100) 20%,
-        transparent 70%
-      ),
-      radial-gradient(
-        circle at calc(50% + cos(var(--bg-angle) + 270deg) * 100%) calc(50% + sin(var(--bg-angle) + 270deg) * 100%),
-        var(--ui-color-grey-100) 20%,
-        transparent 70%
-      );
-
-    animation: spin-gradient 4s linear infinite;
-    @keyframes spin-gradient {
-      to {
-        --bg-angle: 360deg;
-      }
-    }
-
-    .content {
-      z-index: 1;
-    }
-  }
+.gen-loading.variant-bg-spin {
+  border-radius: 8px;
+  /* CSS Progressive Enhancement: Browsers that do not support @property will skip its definition.
+     We can ensure compatibility by setting an initial value here. */
+  --bg-angle: 0deg;
+
+  /* Use cos/sin to calculate the rotation position of each gradient center.
+     100% is the rotation radius, 50% is the center offset. */
+  background-image: radial-gradient(
+      circle at calc(50% + cos(var(--bg-angle) + 0deg) * 100%) calc(50% + sin(var(--bg-angle) + 0deg) * 100%),
+      var(--ui-color-turquoise-200) 20%,
+      transparent 70%
+    ),
+    radial-gradient(
+      circle at calc(50% + cos(var(--bg-angle) + 90deg) * 100%) calc(50% + sin(var(--bg-angle) + 90deg) * 100%),
+      var(--ui-color-blue-200) 20%,
+      transparent 70%
+    ),
+    radial-gradient(
+      circle at calc(50% + cos(var(--bg-angle) + 180deg) * 100%) calc(50% + sin(var(--bg-angle) + 180deg) * 100%),
+      var(--ui-color-blue-100) 20%,
+      transparent 70%
+    ),
+    radial-gradient(
+      circle at calc(50% + cos(var(--bg-angle) + 270deg) * 100%) calc(50% + sin(var(--bg-angle) + 270deg) * 100%),
+      var(--ui-color-grey-100) 20%,
+      transparent 70%
+    );
+
+  animation: spin-gradient 4s linear infinite;
+}
 
-  &.visible {
-    visibility: visible;
-    opacity: 1;
-    &.cover {
-      opacity: 0.97;
-    }
+@keyframes spin-gradient {
+  to {
+    --bg-angle: 360deg;
   }
 }
 
+.gen-loading.variant-bg-spin .content {
+  z-index: 1;
+}
+
+.gen-loading.visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.gen-loading.visible.cover {
+  opacity: 0.97;
+}
+
 .content {
   display: flex;
   flex-direction: column;
diff --git a/spx-gui/src/components/asset/gen/common/GenPanel.vue b/spx-gui/src/components/asset/gen/common/GenPanel.vue
index e7af11473..d82fe9d4b 100644
--- a/spx-gui/src/components/asset/gen/common/GenPanel.vue
+++ b/spx-gui/src/components/asset/gen/common/GenPanel.vue
@@ -1,30 +1,12 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="gen-panel">
-    <div class="left">
+  <div class="flex">
+    <div class="flex-[1_0_44%] overflow-hidden border-r border-grey-400 p-4">
       <slot name="left"></slot>
     </div>
-    <div class="right">
+    <div class="flex-[1_0_56%] flex">
       <slot name="right"></slot>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.gen-panel {
-  display: flex;
-
-  .left {
-    flex: 1 0 44%;
-    padding: 16px;
-    overflow: hidden;
-    border-right: 1px solid var(--ui-color-grey-400);
-  }
-
-  .right {
-    flex: 1 0 56%;
-    display: flex;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/GenPreview.vue b/spx-gui/src/components/asset/gen/common/GenPreview.vue
index a4a5306d3..633b55eb0 100644
--- a/spx-gui/src/components/asset/gen/common/GenPreview.vue
+++ b/spx-gui/src/components/asset/gen/common/GenPreview.vue
@@ -19,75 +19,26 @@ const emit = defineEmits<{
       name: `Preview for '${name}'`,
       desc: `Preview for the generation item '${name}'`
     }"
-    class="gen-preview"
+    class="flex flex-1 flex-col gap-5 px-5 py-6"
   >
-    <header class="header">
-      <div class="name">
+    <header class="relative flex flex-none items-center justify-center">
+      <div class="flex items-center justify-center gap-1">
         <!-- TODO: confirm style details with @qingqing-ux here -->
         <AssetName>{{ name }}</AssetName>
         <UIIcon
           v-radar="{ name: 'Rename', desc: 'Click to rename the generation item' }"
-          class="edit-icon"
+          class="cursor-pointer text-grey-900 hover:text-grey-800 active:text-grey-1000"
           :title="$t({ en: 'Rename', zh: '重命名' })"
           type="edit"
           @click="emit('rename')"
         />
       </div>
-      <div class="ops">
+      <div class="absolute top-0 right-0">
         <slot name="ops"></slot>
       </div>
     </header>
-    <main class="body">
+    <main class="relative flex flex-1 overflow-hidden">
       <slot></slot>
     </main>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.gen-preview {
-  flex: 1 1 0;
-  padding: 24px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.header {
-  position: relative;
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.name {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-
-.edit-icon {
-  cursor: pointer;
-  color: var(--ui-color-grey-900);
-  &:hover {
-    color: var(--ui-color-grey-800);
-  }
-  &:active {
-    color: var(--ui-color-grey-1000);
-  }
-}
-
-.ops {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.body {
-  flex: 1 1 0;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/ImagePreview.vue b/spx-gui/src/components/asset/gen/common/ImagePreview.vue
index e9ef04aed..91d373ecb 100644
--- a/spx-gui/src/components/asset/gen/common/ImagePreview.vue
+++ b/spx-gui/src/components/asset/gen/common/ImagePreview.vue
@@ -12,28 +12,11 @@ const [fileUrl, fileUrlLoading] = useFileUrl(() => props.file)
 </script>
 
 <template>
-  <div v-radar="{ name: 'Image preview', desc: 'Preview of the selected generated image' }" class="preview">
-    <CheckerboardBackground class="background" />
-    <UIImg class="image" :src="fileUrl" :loading="fileUrlLoading" size="contain" />
+  <div
+    v-radar="{ name: 'Image preview', desc: 'Preview of the selected generated image' }"
+    class="relative h-full w-full overflow-hidden rounded-1"
+  >
+    <CheckerboardBackground class="absolute inset-0" />
+    <UIImg class="h-full w-full" :src="fileUrl" :loading="fileUrlLoading" size="contain" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.preview {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  overflow: hidden;
-  position: relative;
-}
-
-.background {
-  position: absolute;
-  inset: 0;
-}
-
-.image {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/ImageSelector.vue b/spx-gui/src/components/asset/gen/common/ImageSelector.vue
index 78b1c32ee..71eeaf5ce 100644
--- a/spx-gui/src/components/asset/gen/common/ImageSelector.vue
+++ b/spx-gui/src/components/asset/gen/common/ImageSelector.vue
@@ -67,9 +67,9 @@ function handleSelect(index: number) {
     v-if="state.status !== 'initial'"
     ref="wrapperRef"
     v-radar="{ name: 'Image selector', desc: 'Selector for choosing from generated images' }"
-    class="image-selector"
+    class="flex flex-col items-center gap-3"
   >
-    <ul class="list">
+    <ul class="m-0 flex list-none flex-nowrap items-center content-center justify-center gap-2 p-0">
       <template v-if="state.status === 'running'">
         <template v-for="idx in 4" :key="idx">
           <slot name="loading-item" :index="idx"></slot>
@@ -83,35 +83,8 @@ function handleSelect(index: number) {
       </template>
     </ul>
 
-    <p class="tip">
+    <p class="text-center text-12 text-hint-2">
       <slot name="tip"></slot>
     </p>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.image-selector {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-
-.list {
-  display: flex;
-  align-items: center;
-  align-content: center;
-  gap: 8px;
-  flex-wrap: nowrap;
-  justify-content: center;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.tip {
-  text-align: center;
-  font-size: 12px;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue b/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
index de6785f3b..2e21eb557 100644
--- a/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
+++ b/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
@@ -10,8 +10,11 @@ defineProps<{
 </script>
 
 <template>
-  <div class="layout-with-preview" :class="{ 'has-preview': hasPreview }">
-    <section class="main-panel">
+  <div
+    class="layout-with-preview flex min-w-0 flex-1 items-stretch justify-center"
+    :class="{ 'has-preview': hasPreview }"
+  >
+    <section class="main-panel flex min-w-0 flex-col gap-6">
       <slot></slot>
     </section>
 
@@ -21,24 +24,14 @@ defineProps<{
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .layout-with-preview {
-  flex: 1 1 0;
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  gap: 0;
-  min-width: 0;
   transition: gap 0.2s ease;
 }
 
 .main-panel {
   width: 584px;
-  display: flex;
-  flex-direction: column;
   justify-content: center;
-  gap: 24px;
-  min-width: 0;
   transition-property: flex, width, padding;
   transition-duration: 0.2s;
   transition-timing-function: ease;
diff --git a/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue b/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
index 4b5895e65..f4669df6d 100644
--- a/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
+++ b/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
@@ -7,49 +7,20 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="list-item-wrapper">
-    <header class="header">
+  <div class="flex w-full flex-col gap-3">
+    <header class="text-16/6.5 font-semibold text-grey-1000">
       <slot name="title"></slot>
     </header>
 
-    <div class="list">
+    <div class="flex w-94 flex-row flex-wrap gap-2">
       <slot></slot>
-      <UIBlockItem v-radar="{ name: 'Add', desc: 'Click to add a new item' }" class="add-item" @click="$emit('add')">
-        <UIIcon class="icon" type="plus" />
+      <UIBlockItem
+        v-radar="{ name: 'Add', desc: 'Click to add a new item' }"
+        class="justify-center text-primary-main"
+        @click="$emit('add')"
+      >
+        <UIIcon style="width: 24px; height: 24px" type="plus" />
       </UIBlockItem>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.list-item-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-}
-
-.header {
-  font-size: 16px;
-  line-height: 26px;
-  font-weight: 600;
-  color: var(--ui-color-grey-1000);
-}
-
-.list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 8px;
-  width: 376px;
-}
-
-.add-item {
-  justify-content: center;
-  color: var(--ui-color-primary-main);
-  .icon {
-    width: 24px;
-    height: 24px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue b/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
index 9435a41e1..aec96ed8a 100644
--- a/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
+++ b/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
@@ -8,10 +8,10 @@ import CheckerboardBackground from '@/components/editor/sprite/CheckerboardBackg
 </script>
 
 <template>
-  <div class="preview-with-checkerboard-bg">
-    <CheckerboardBackground class="background" />
+  <div class="relative flex-1 overflow-hidden rounded-1 w-full">
+    <CheckerboardBackground class="absolute inset-0" />
     <slot>
-      <div class="placeholder">
+      <div class="relative flex h-full w-full items-center justify-center text-hint-2">
         {{
           $t({
             en: 'Enter details in the lower-left box and click "Generate".',
@@ -22,31 +22,3 @@ import CheckerboardBackground from '@/components/editor/sprite/CheckerboardBackg
     </slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.preview-with-checkerboard-bg {
-  width: 100%;
-  flex: 1 1 0;
-  border-radius: 8px;
-  position: relative;
-  overflow: hidden;
-}
-
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.placeholder {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/SettingsInput.vue b/spx-gui/src/components/asset/gen/common/SettingsInput.vue
index 71fef9c34..bcfb2c1ad 100644
--- a/spx-gui/src/components/asset/gen/common/SettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/common/SettingsInput.vue
@@ -150,7 +150,7 @@ provide(settingsInputCtxKey, ctx)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .description-input {
   width: 100%;
   min-height: 172px;
@@ -163,141 +163,137 @@ provide(settingsInputCtxKey, ctx)
   flex-direction: column;
   gap: 24px;
   transition: border-color 0.2s ease;
+}
 
-  &:has(.description:focus),
-  &.enriching {
-    border-color: var(--ui-color-turquoise-500);
-  }
+.description-input:has(.description:focus),
+.description-input.enriching {
+  border-color: var(--ui-color-turquoise-500);
+}
 
-  &.disabled,
-  &.readonly {
-    &:has(.description:focus) {
-      border-color: var(--ui-color-grey-400);
-    }
-  }
+.description-input.disabled:has(.description:focus),
+.description-input.readonly:has(.description:focus) {
+  border-color: var(--ui-color-grey-400);
+}
 
-  &.disabled {
-    .main {
-      overflow: hidden;
+.description-input.disabled .main {
+  overflow: hidden;
+}
 
-      .description {
-        cursor: not-allowed;
-        color: var(--ui-color-grey-600);
-      }
-    }
-  }
+.description-input.disabled .main .description {
+  cursor: not-allowed;
+  color: var(--ui-color-grey-600);
+}
 
-  .main {
-    position: relative;
-    flex: 1;
-    padding: 4px 0;
-    display: grid;
-    overflow-y: auto;
-
-    .description,
-    .mirror {
-      grid-area: 1 / 1 / 2 / 2;
-      padding: 0;
-      margin: 0;
-      font: inherit;
-      font-size: 14px;
-      line-height: 1.6;
-      width: 100%;
-      box-sizing: border-box;
-      white-space: pre-wrap;
-      word-break: break-all;
-      overflow-wrap: anywhere;
-    }
-
-    .description {
-      border: none;
-      resize: none;
-      background: transparent;
-      color: var(--ui-color-grey-900);
-      caret-color: var(--ui-color-turquoise-500);
-
-      &:read-only {
-        color: var(--ui-color-grey-1000);
-      }
-
-      &::placeholder {
-        color: var(--ui-color-grey-700);
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    .mirror-text {
-      visibility: hidden;
-      pointer-events: none;
-      display: inline;
-    }
-
-    .mirror-actions {
-      display: inline-flex;
-      margin-left: 12px;
-      pointer-events: auto;
-    }
-
-    .enriching {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-      height: fit-content;
-      font-size: 12px;
-      color: var(--ui-color-turquoise-500);
-
-      .animation {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    .enrich-btn {
-      border: 1px solid var(--ui-color-turquoise-300);
-      border-radius: 4px;
-      background-color: var(--ui-color-turquoise-200);
-      color: var(--ui-color-turquoise-500);
-      padding: 0 8px;
-      font-size: 12px;
-      display: flex;
-      align-items: center;
-      vertical-align: middle;
-      height: 22px;
-      cursor: pointer;
-      position: relative;
-
-      .icon {
-        width: 14px;
-        height: 14px;
-      }
-
-      &:hover {
-        background-color: var(--ui-color-turquoise-100);
-      }
-    }
-  }
+.description-input .main {
+  position: relative;
+  flex: 1;
+  padding: 4px 0;
+  display: grid;
+  overflow-y: auto;
+}
 
-  .footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-
-    .extra {
-      display: flex;
-      padding: 4px;
-      gap: 8px;
-      flex: 1 1 0;
-      width: max-content;
-      overflow: hidden;
-
-      & > * {
-        flex-shrink: 0;
-      }
-    }
-  }
+.description-input .main .description,
+.description-input .main .mirror {
+  grid-area: 1 / 1 / 2 / 2;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.6;
+  width: 100%;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+
+.description-input .main .description {
+  border: none;
+  resize: none;
+  background: transparent;
+  color: var(--ui-color-grey-900);
+  caret-color: var(--ui-color-turquoise-500);
+}
+
+.description-input .main .description:read-only {
+  color: var(--ui-color-grey-1000);
+}
+
+.description-input .main .description::placeholder {
+  color: var(--ui-color-grey-700);
+}
+
+.description-input .main .description:focus {
+  outline: none;
+}
+
+.description-input .main .mirror-text {
+  visibility: hidden;
+  pointer-events: none;
+  display: inline;
+}
+
+.description-input .main .mirror-actions {
+  display: inline-flex;
+  margin-left: 12px;
+  pointer-events: auto;
+}
+
+.description-input .main .enriching {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: fit-content;
+  font-size: 12px;
+  color: var(--ui-color-turquoise-500);
+}
+
+.description-input .main .enriching .animation {
+  width: 16px;
+  height: 16px;
+}
+
+.description-input .main .enrich-btn {
+  border: 1px solid var(--ui-color-turquoise-300);
+  border-radius: 4px;
+  background-color: var(--ui-color-turquoise-200);
+  color: var(--ui-color-turquoise-500);
+  padding: 0 8px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  height: 22px;
+  cursor: pointer;
+  position: relative;
+}
+
+.description-input .main .enrich-btn .icon {
+  width: 14px;
+  height: 14px;
+}
+
+.description-input .main .enrich-btn:hover {
+  background-color: var(--ui-color-turquoise-100);
+}
+
+.description-input .footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.description-input .footer .extra {
+  display: flex;
+  padding: 4px;
+  gap: 8px;
+  flex: 1 1 0;
+  width: max-content;
+  overflow: hidden;
+}
+
+.description-input .footer .extra > * {
+  flex-shrink: 0;
 }
 </style>
diff --git a/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue b/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
index f4409848b..249e8db84 100644
--- a/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
+++ b/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
@@ -63,13 +63,13 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
           name: $t(name),
           desc: `Click to select '${$t(name)}' (e.g., ${optionsText})`
         }"
-        class="param-button"
-        :class="[{ 'icon-only': iconOnly }]"
+        class="flex h-8 items-center justify-center gap-1 rounded-2 border border-grey-400 bg-grey-100 pr-2 pl-1 text-13/5 text-grey-900 cursor-pointer hover:bg-grey-300 disabled:cursor-not-allowed disabled:bg-grey-300 disabled:text-grey-600"
+        :class="[{ 'aspect-square px-0': iconOnly }]"
         :disabled="disabled"
       >
         <UIImg
           v-if="selectedItem.image != null"
-          :class="['button-image', { disabled, placeholder: showPlaceholder }]"
+          :class="['h-6 w-6 rounded-[10px]', { 'opacity-40': disabled, 'disabled-like': disabled && showPlaceholder }]"
           :src="selectedItem.image"
           size="cover"
         />
@@ -82,9 +82,9 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
       {{ $t(tooltipText) }}
     </template>
     <template #dropdown-content>
-      <div class="dropdown-content">
+      <div class="flex max-w-102 flex-col gap-3 p-4">
         <div>{{ $t(tips) }}</div>
-        <ul class="options">
+        <ul class="flex flex-row flex-wrap gap-2">
           <UIBlockItem
             v-for="(item, index) in options"
             :key="index"
@@ -92,11 +92,10 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
               name: `Option '${$t(item.label)}'`,
               desc: `Select '${$t(item.label)}' as the '${$t(name)}'`
             }"
-            class="option"
             :active="value === item.value"
             @click="$emit('update:value', clearable && value === item.value ? null : item.value)"
           >
-            <UIImg v-if="item.image != null" class="block-image" :src="item.image" />
+            <UIImg v-if="item.image != null" class="mt-0.5 mb-1 h-15 w-20 rounded-1" :src="item.image" />
             <UIBlockItemTitle size="medium">
               {{ $t(item.label) }}
             </UIBlockItemTitle>
@@ -112,74 +111,10 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
   </UIDropdownWithTooltip>
 </template>
 
-<style lang="scss" scoped>
-.param-button {
-  height: 32px;
-  padding: 0 8px 0 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  font-size: 13px;
-  line-height: 20px;
-
-  color: var(--ui-color-grey-900);
-  border-radius: var(--ui-border-radius-2);
-  border: 1px solid var(--ui-color-grey-400);
-  background: var(--ui-color-grey-100);
-
-  &.icon-only {
-    aspect-ratio: 1;
-    padding: 0;
-  }
-
-  &:hover:not(:active, :disabled) {
-    cursor: pointer;
-    background: var(--ui-color-grey-300);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    background: var(--ui-color-grey-300);
-    color: var(--ui-color-grey-600);
-  }
-}
-
-.button-image {
-  width: 24px;
-  height: 24px;
-  border-radius: 10px;
-
-  &.disabled {
-    opacity: 0.4;
-  }
-  &.placeholder.disabled {
-    // TODO: Temporarily simulate the color value of --ui-color-grey-600 via filter,
-    // because the placeholder's background-image is an SVG and its color cannot be set directly.
-    filter: invert(96%) sepia(11%) saturate(163%) hue-rotate(169deg) brightness(91%) contrast(88%);
-  }
-}
-
-.block-image {
-  width: 80px;
-  height: 60px;
-  border-radius: 8px;
-  margin-top: 2px;
-  margin-bottom: 4px;
-}
-
-.dropdown-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px;
-  max-width: 408px;
-
-  .options {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
+<style scoped>
+.disabled-like {
+  /* TODO: Temporarily simulate the color value of --ui-color-grey-600 via filter,
+     because the placeholder's background-image is an SVG and its color cannot be set directly. */
+  filter: invert(96%) sepia(11%) saturate(163%) hue-rotate(169deg) brightness(91%) contrast(88%);
 }
 </style>
diff --git a/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue b/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue
index ea1f69898..cbde86d0d 100644
--- a/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue
+++ b/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue
@@ -43,7 +43,7 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.gen.image)
 </script>
 
 <template>
-  <GenPreview v-if="gen.result == null" class="costume-gen-preview" :name="gen.name" @rename="handleRenameCostume">
+  <GenPreview v-if="gen.result == null" class="absolute inset-0" :name="gen.name" @rename="handleRenameCostume">
     <template v-if="canSaveCostume" #ops>
       <UIButton color="success" :loading="savingCostume" @click="handleSaveCostume">{{
         $t({ en: 'Save costume', zh: '保存造型' })
@@ -58,7 +58,7 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.gen.image)
       {{ $t({ en: 'Loading image...', zh: '正在加载图片...' }) }}
     </GenLoading>
     <PreviewWithCheckerboardBg v-else>
-      <UIImg v-if="gen.image != null" class="img" :src="imgSrc" :loading="imgLoading" />
+      <UIImg v-if="gen.image != null" class="h-full w-full" :src="imgSrc" :loading="imgLoading" />
       <GenLoading v-if="gen.finishState.status === 'running'" variant="bg-spin" cover>
         {{ $t({ en: 'Saving costume...', zh: '正在保存造型...' }) }}
       </GenLoading>
@@ -72,21 +72,5 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.gen.image)
       </UIError>
     </PreviewWithCheckerboardBg>
   </GenPreview>
-  <CostumeDetail v-else class="costume-detail" :costume="gen.result" @rename="handleRenameCostume" />
+  <CostumeDetail v-else :style="{ background: 'transparent' }" :costume="gen.result" @rename="handleRenameCostume" />
 </template>
-
-<style lang="scss" scoped>
-.costume-gen-preview {
-  position: absolute;
-  inset: 0;
-}
-
-.img {
-  width: 100%;
-  height: 100%;
-}
-
-.costume-detail {
-  background: transparent;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue b/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
index 8c97d50cc..683f7a772 100644
--- a/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
@@ -66,5 +66,3 @@ const submitText = computed(() => {
     </template>
   </SettingsInput>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
index bd743a8cd..ed75d888d 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
@@ -80,14 +80,14 @@ const handleModalClose = useMessageHandle(
     mask-closable
     @update:visible="handleModalClose"
   >
-    <header class="header">
-      <h2 class="title">{{ $t({ zh: '生成精灵', en: 'Sprite Generator' }) }}</h2>
+    <header class="flex h-14 items-center justify-between border-b border-grey-400 px-6">
+      <h2 class="text-16 text-title">{{ $t({ zh: '生成精灵', en: 'Sprite Generator' }) }}</h2>
       <UIModalClose class="close" @click="handleModalClose" />
     </header>
 
     <SpriteGenComp
       v-if="activeGen != null"
-      class="sprite-gen"
+      class="min-h-0 flex-[1_1_0]"
       :gen="activeGen"
       library-search-enabled
       @collapse="handleGenCollapse"
@@ -95,24 +95,3 @@ const handleModalClose = useMessageHandle(
     />
   </UIModal>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  height: 56px;
-  border-bottom: 1px solid var(--ui-color-grey-400);
-
-  .title {
-    font-size: 16px;
-    color: var(--ui-color-title);
-  }
-}
-
-.sprite-gen {
-  flex: 1 1 0;
-  min-height: 0;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
index 77bba979e..4cdd0bd8a 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
@@ -191,11 +191,11 @@ const handleSubmit = useMessageHandle(
 <template>
   <main
     v-radar="{ name: 'Sprite generation content phase', desc: 'Sprite costume and animation generation' }"
-    class="phase-content"
+    class="flex h-full flex-col items-stretch"
   >
-    <div class="body">
-      <aside class="left">
-        <div class="gen-list">
+    <div class="flex-[1_1_0] flex flex-row items-stretch">
+      <aside class="w-102 flex-[0_0_auto] bg-grey-100 pt-4 border-r border-grey-400 flex flex-col justify-between">
+        <div class="flex-[1_1_0] overflow-y-auto px-4 flex flex-col gap-6">
           <ListItemWrapper v-radar="{ name: 'Costume list', desc: 'List of costumes' }" @add="handleAddCostume">
             <template #title>{{ $t({ zh: '造型', en: 'Costume' }) }}</template>
             <CostumeGenItem
@@ -225,17 +225,17 @@ const handleSubmit = useMessageHandle(
           </ListItemWrapper>
         </div>
 
-        <div class="gen-settings">
+        <div class="px-4 py-5 mt-0">
           <CostumeSettingInput v-if="selectedCostume != null" :gen="selectedCostume" />
           <AnimationSettingInput v-if="selectedAnimation != null" :gen="selectedAnimation" />
         </div>
       </aside>
-      <div class="preview">
+      <div class="relative flex-[1_1_0] overflow-hidden flex">
         <CostumeGenPreview v-if="selectedCostume != null" :gen="selectedCostume" />
         <AnimationGenPreview v-else-if="selectedAnimation != null" :gen="selectedAnimation" />
       </div>
     </div>
-    <footer class="footer">
+    <footer class="w-full flex-[0_0_auto] px-6 py-5 flex justify-end gap-4">
       <UITooltip>
         {{
           $t({
@@ -270,60 +270,3 @@ const handleSubmit = useMessageHandle(
     </footer>
   </main>
 </template>
-
-<style lang="scss" scoped>
-.phase-content {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-}
-
-.body {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-}
-
-.left {
-  flex: 0 0 auto;
-  width: 408px;
-  padding-top: 16px;
-  background: var(--ui-color-grey-100);
-  border-right: 1px solid var(--ui-color-grey-400);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.preview {
-  flex: 1 1 0;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
-
-.footer {
-  width: 100%;
-  flex: 0 0 auto;
-  padding: 20px 24px;
-  display: flex;
-  justify-content: end;
-  gap: 16px;
-}
-
-.gen-list {
-  flex: 1 1 0;
-  padding: 0 16px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.gen-settings {
-  padding: 20px 16px;
-  margin-top: 0;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
index e9aa678d4..c4a9e4117 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
@@ -85,16 +85,16 @@ const handleUseAsset = useMessageHandle(
       name: 'Sprite generation settings phase',
       desc: 'Generate default costume for the sprite based on settings'
     }"
-    class="phase-settings"
+    class="phase-settings flex h-full flex-col items-stretch"
   >
     <LayoutWithPreview :has-preview="hasPreview">
       <SpriteSettingsInput
-        class="settings-input"
-        :class="{ 'has-preview': hasPreview }"
+        :class="{ 'h-75': hasPreview }"
         :gen="gen"
         :description-placeholder="descriptionPlaceholder"
       />
-      <div class="select-area">
+      <!-- Fixed height to prevent layout shift when suggestions appear/disappear -->
+      <div class="min-h-42.5">
         <AssetSuggestions
           v-if="isLibrarySearchEnabled"
           :type="AssetType.Sprite"
@@ -141,7 +141,7 @@ const handleUseAsset = useMessageHandle(
         <ImagePreview :file="gen.image" />
       </template>
     </LayoutWithPreview>
-    <footer class="footer">
+    <footer class="w-full flex-[0_0_auto] px-6 py-5 flex justify-end gap-4">
       <UIButton
         v-if="selectedAsset != null"
         v-radar="{
@@ -172,13 +172,8 @@ const handleUseAsset = useMessageHandle(
   </main>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .phase-settings {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-
   background-image: url('../common/phase-settings-left-bottom-bg.png'), url('../common/phase-settings-right-top-bg.png');
   background-position:
     left bottom,
@@ -187,23 +182,5 @@ const handleUseAsset = useMessageHandle(
   background-size:
     520px auto,
     180px auto;
-
-  .settings-input {
-    &.has-preview {
-      height: 300px;
-    }
-  }
-
-  .select-area {
-    min-height: 170px; // Fixed height to prevent layout shift when suggestions appear/disappear
-  }
-}
-.footer {
-  width: 100%;
-  flex: 0 0 auto;
-  padding: 20px 24px;
-  display: flex;
-  justify-content: end;
-  gap: 16px;
 }
 </style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue b/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
index 579ee90c0..9714f5a59 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
@@ -31,70 +31,16 @@ const loading = computed(() => props.loading || fileLoading.value)
       name: 'Sprite image item',
       desc: 'Click to select this image as the default costume for the sprite'
     }"
-    class="sprite-image-item"
-    :class="{ active, compact, loading, disabled }"
+    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[width,height,border-radius] duration-200 ease-in-out"
+    :class="[
+      compact ? 'h-22 w-22 rounded-1' : 'h-35 w-35 rounded-2',
+      active ? 'border-turquoise-500 bg-turquoise-200 cursor-default' : '',
+      disabled ? 'cursor-not-allowed opacity-50' : '',
+      loading ? 'cursor-default pointer-events-none' : '',
+      !active && !disabled && !loading ? 'cursor-pointer hover:bg-grey-400' : ''
+    ]"
   >
     <GenLoading v-if="loading" animation-style="width: 60px; height: 60px;" />
-    <UIImg v-else class="img" :src="url" :alt="file?.name" />
+    <UIImg v-else :class="compact ? 'h-15 w-15' : 'h-25 w-25'" :src="url" :alt="file?.name" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.sprite-image-item {
-  display: flex;
-  width: 140px;
-  height: 140px;
-  padding: 4px;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid transparent;
-  border-radius: 12px;
-  background-color: var(--ui-color-grey-300);
-  cursor: pointer;
-  overflow: hidden;
-
-  transition:
-    width 0.2s ease,
-    height 0.2s ease,
-    border-radius 0.2s ease;
-
-  &:hover:not(.disabled, .active) {
-    background: var(--ui-color-grey-400);
-  }
-
-  &.active {
-    border: 2px solid var(--ui-color-turquoise-500);
-    background: var(--ui-color-turquoise-200);
-    cursor: default;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.loading {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  &.compact {
-    width: 88px;
-    height: 88px;
-    border-radius: 8px;
-  }
-}
-
-.img {
-  width: 100px;
-  height: 100px;
-  transition:
-    width 0.2s ease,
-    height 0.2s ease;
-}
-
-.sprite-image-item.compact .img {
-  width: 60px;
-  height: 60px;
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/AssetLibraryModal.vue b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
index d6b2535da..12701bea9 100644
--- a/spx-gui/src/components/asset/library/AssetLibraryModal.vue
+++ b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
@@ -346,41 +346,45 @@ const title = computed(() => {
     mask-closable
     @update:visible="handleModalClose"
   >
-    <header class="header">
-      <div class="header-left">
+    <header class="flex h-14 items-center justify-between border-b border-grey-400 px-6">
+      <div class="flex items-center gap-middle">
         <UIButton
           v-if="isGenPhase && backButtonVisible"
-          class="back-asset"
+          class="-rotate-90"
           color="white"
           icon="arrowAlt"
           variant="stroke"
           @click="handleBackToAssetLibrary"
         ></UIButton>
-        <h2 class="title">{{ $t(title) }}</h2>
+        <h2 class="text-16 text-title">{{ $t(title) }}</h2>
       </div>
 
-      <UIModalClose class="close" @click="handleModalClose" />
+      <UIModalClose @click="handleModalClose" />
     </header>
 
     <template v-if="isGenPhase && AssetGenComp != null">
-      <AssetGenComp class="asset-gen" />
+      <AssetGenComp class="min-h-0 flex-[1_1_0]" />
     </template>
     <template v-else>
-      <div class="asset-library">
-        <div class="scroller-wrapper">
-          <header class="header" :style="headerStyle">
+      <div class="min-h-0 flex-[1_1_0] flex flex-col">
+        <div class="flex-1 overflow-y-auto">
+          <header
+            class="flex h-45 w-full flex-col items-center justify-center gap-5 bg-center bg-cover bg-no-repeat px-62.5"
+            :style="headerStyle"
+          >
             <UITextInput
               v-model:value="searchInput"
-              class="search-input"
+              class="w-full"
               color="white"
               size="large"
               clearable
               :placeholder="$t({ zh: '搜索', en: 'Search' })"
+              :style="{ boxShadow: '0 4px 12px 0 rgba(from var(--ui-color-turquoise-300) r g b / 65%)' }"
             >
               <template #prefix><UIIcon type="search" /></template>
             </UITextInput>
 
-            <div class="recommended-buttons">
+            <div class="flex gap-4">
               <UIButton
                 v-for="(r, i) in recommended"
                 :key="i"
@@ -394,15 +398,16 @@ const title = computed(() => {
             </div>
           </header>
 
-          <main class="main">
+          <main class="flex-[1_1_0] flex flex-col justify-stretch">
+            <!-- No right padding here to allow the optional scrollbar. -->
             <div
               v-radar="{
                 name: 'Asset list',
                 desc: `List of ${entityMessage.en}s containing keyword ${keyword}`
               }"
-              class="content"
+              class="flex-[1_1_0] flex flex-col gap-5 pt-5 pl-6"
             >
-              <div class="filter">
+              <div class="flex justify-between">
                 <UIChipRadioGroup v-model:value="owner">
                   <UIChipRadio value="all">{{ $t({ zh: '公开素材库', en: 'Public library' }) }}</UIChipRadio>
                   <UIChipRadio value="personal">{{ $t({ zh: '我的素材库', en: 'My library' }) }}</UIChipRadio>
@@ -410,10 +415,10 @@ const title = computed(() => {
               </div>
               <ListResultWrapper :query-ret="queryRet" :height="436">
                 <template v-if="SettingsInput != null && assetGen != null && owner === 'all'" #empty>
-                  <div class="empty">
-                    <div class="empty-tip">
+                  <div class="mx-auto flex h-109 flex-col items-center gap-6 pt-10">
+                    <div class="text-grey-700">
                       <span>{{ $t({ zh: `没找到`, en: `No assets found for ` }) }}</span>
-                      <span class="highlight">{{ $t({ zh: `“${keyword}”`, en: `"${keyword}"` }) }}</span>
+                      <span class="text-grey-1000">{{ $t({ zh: `“${keyword}”`, en: `"${keyword}"` }) }}</span>
                       <span>
                         {{
                           $t({
@@ -424,7 +429,7 @@ const title = computed(() => {
                       </span>
                     </div>
                     <SettingsInput
-                      class="settings-input"
+                      class="w-146"
                       :gen="assetGen"
                       :description-placeholder="keyword"
                       @submit="handleGenStart"
@@ -432,8 +437,8 @@ const title = computed(() => {
                   </div>
                 </template>
                 <template #default="slotProps">
-                  <div class="asset-list-container">
-                    <ul class="asset-list">
+                  <div class="h-109">
+                    <ul class="flex flex-wrap content-start gap-2">
                       <ItemComponent
                         v-for="asset in slotProps.data.data"
                         :key="asset.id"
@@ -442,15 +447,20 @@ const title = computed(() => {
                         @click="handleAssetClick(asset)"
                       />
                     </ul>
-                    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
-                    <div v-if="shouldShowGenSuggestion" class="gen-suggestion">
-                      <div class="message">
+                    <UIPagination
+                      v-show="pageTotal > 1"
+                      v-model:current="page"
+                      class="mt-9 mb-3 justify-center"
+                      :total="pageTotal"
+                    />
+                    <div v-if="shouldShowGenSuggestion" class="flex flex-col items-center gap-5 py-11">
+                      <div class="text-16 text-grey-700">
                         {{ $t(genSuggestionMessage) }}
                       </div>
                       <UIButton size="large" @click="handleGenStart">
                         <template #icon>
                           <!-- eslint-disable-next-line vue/no-v-html -->
-                          <div class="icon" v-html="genAssetIcon"></div>
+                          <div class="h-4.5 w-4.5" v-html="genAssetIcon"></div>
                         </template>
                         {{ $t({ en: 'Generate asset', zh: '生成素材' }) }}
                       </UIButton>
@@ -461,7 +471,7 @@ const title = computed(() => {
             </div>
           </main>
         </div>
-        <footer class="footer">
+        <footer class="flex items-center justify-end gap-middle px-6 py-5">
           <span v-show="selected.length > 0">
             {{
               $t({
@@ -484,144 +494,3 @@ const title = computed(() => {
     </template>
   </UIModal>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  height: 56px;
-  border-bottom: 1px solid var(--ui-color-grey-400);
-
-  .header-left {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-gap-middle);
-
-    .back-asset {
-      transform: rotate(-90deg);
-    }
-
-    .title {
-      font-size: 16px;
-      color: var(--ui-color-title);
-    }
-  }
-}
-
-.asset-gen,
-.asset-library {
-  flex: 1 1 0;
-  min-height: 0;
-}
-
-.asset-library {
-  display: flex;
-  flex-direction: column;
-  .scroller-wrapper {
-    flex: 1;
-    overflow-y: auto;
-  }
-
-  .header {
-    display: flex;
-    flex-direction: column;
-    height: 180px;
-    width: 100%;
-    padding: 0 250px;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-
-    .search-input {
-      width: 100%;
-      box-shadow: 0 4px 12px 0 rgba(from var(--ui-color-turquoise-300) r g b / 65%);
-    }
-
-    .recommended-buttons {
-      display: flex;
-      gap: 16px;
-    }
-  }
-  .main {
-    flex: 1 1 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-  }
-  .content {
-    flex: 1 1 0;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    padding: 20px 0 0 24px; // no right padding to allow optional scrollbar
-  }
-  .filter {
-    display: flex;
-    justify-content: space-between;
-  }
-  .empty {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    padding-top: 40px;
-    margin: 0 auto;
-    gap: 24px;
-
-    .empty-tip {
-      color: var(--ui-color-grey-700);
-
-      .highlight {
-        color: var(--ui-color-grey-1000);
-      }
-    }
-
-    .settings-input {
-      width: 584px;
-    }
-  }
-  .empty,
-  .asset-list-container {
-    height: 436px;
-  }
-  .asset-list {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    align-content: flex-start;
-  }
-  .pagination {
-    justify-content: center;
-    margin: 36px 0 12px;
-  }
-  .gen-suggestion {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-    padding: 44px 0;
-
-    .message {
-      font-size: 16px;
-      color: var(--ui-color-grey-700);
-    }
-
-    .icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  .footer {
-    padding: 20px 24px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--ui-gap-middle);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/AssetSaveModal.vue b/spx-gui/src/components/asset/library/AssetSaveModal.vue
index 7522f4dba..961218e08 100644
--- a/spx-gui/src/components/asset/library/AssetSaveModal.vue
+++ b/spx-gui/src/components/asset/library/AssetSaveModal.vue
@@ -207,13 +207,13 @@ async function addAssetWithPartialData({
       {{ $t(error.userMessage) }}
     </UIError>
     <UIForm v-else :form="form" @submit="handleSubmit.fn">
-      <main class="main">
-        <div class="sider">
-          <BackdropPreview v-if="model instanceof Backdrop" class="preview" :backdrop="model" />
-          <SpritePreview v-if="model instanceof Sprite" class="preview" :sprite="model" />
-          <SoundPreview v-if="model instanceof Sound" class="preview" :sound="model" />
+      <main class="flex">
+        <div class="flex-none px-6 py-5">
+          <BackdropPreview v-if="model instanceof Backdrop" class="h-21 w-28 rounded-1 bg-grey-300" :backdrop="model" />
+          <SpritePreview v-if="model instanceof Sprite" class="h-21 w-28 rounded-1 bg-grey-300" :sprite="model" />
+          <SoundPreview v-if="model instanceof Sound" class="h-21 w-28 rounded-1 bg-grey-300" :sound="model" />
         </div>
-        <div class="inputs">
+        <div class="flex-1 px-6 pt-5 pb-10">
           <UIFormItem path="name">
             <UITextInput
               v-model:value="form.value.name"
@@ -246,7 +246,7 @@ async function addAssetWithPartialData({
           </UIFormItem>
         </div>
       </main>
-      <footer class="footer">
+      <footer class="flex justify-center">
         <UIButton
           v-radar="{ name: 'Save button', desc: 'Click to save asset to the library' }"
           color="primary"
@@ -260,31 +260,3 @@ async function addAssetWithPartialData({
     </UIForm>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.main {
-  display: flex;
-}
-
-.sider {
-  flex: 0 0 auto;
-  padding: 20px 24px;
-
-  .preview {
-    width: 112px;
-    height: 84px;
-    border-radius: 8px;
-    background-color: var(--ui-color-grey-300);
-  }
-}
-
-.inputs {
-  flex: 1 1 0;
-  padding: 20px 24px 40px;
-}
-
-.footer {
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/SoundPreview.vue b/spx-gui/src/components/asset/library/SoundPreview.vue
index fe340c530..11f33759f 100644
--- a/spx-gui/src/components/asset/library/SoundPreview.vue
+++ b/spx-gui/src/components/asset/library/SoundPreview.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="sound-preview">
-    <SoundPlayer class="player" :src="audioSrc" color="primary" />
+  <div class="flex items-center justify-center">
+    <SoundPlayer :src="audioSrc" color="primary" />
   </div>
 </template>
 
@@ -22,16 +22,3 @@ const sound = useAsyncComputedLegacy(async () => {
 })
 const [audioSrc] = useFileUrl(() => sound.value?.file)
 </script>
-
-<style scoped lang="scss">
-.sound-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.player {
-  width: 36px;
-  height: 36px;
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/management/AssetEditModal.vue b/spx-gui/src/components/asset/library/management/AssetEditModal.vue
index 77d4bf13b..9f8183dc4 100644
--- a/spx-gui/src/components/asset/library/management/AssetEditModal.vue
+++ b/spx-gui/src/components/asset/library/management/AssetEditModal.vue
@@ -53,13 +53,21 @@ const handleSubmit = useMessageHandle(
     @update:visible="emit('cancelled')"
   >
     <UIForm :form="form" @submit="handleSubmit.fn">
-      <main class="main">
-        <div class="sider">
-          <BackdropPreview v-if="assetType === AssetType.Backdrop" class="preview" :backdrop="asset" />
-          <SpritePreview v-if="assetType === AssetType.Sprite" class="preview" :sprite="asset" />
-          <SoundPreview v-if="assetType === AssetType.Sound" class="preview" :sound="asset" />
+      <main class="flex">
+        <div class="flex-none px-6 py-5">
+          <BackdropPreview
+            v-if="assetType === AssetType.Backdrop"
+            class="h-21 w-28 rounded-1 bg-grey-300"
+            :backdrop="asset"
+          />
+          <SpritePreview
+            v-if="assetType === AssetType.Sprite"
+            class="h-21 w-28 rounded-1 bg-grey-300"
+            :sprite="asset"
+          />
+          <SoundPreview v-if="assetType === AssetType.Sound" class="h-21 w-28 rounded-1 bg-grey-300" :sound="asset" />
         </div>
-        <div class="inputs">
+        <div class="flex-1 px-6 pt-5 pb-10">
           <UIFormItem path="name">
             <UITextInput
               v-model:value="form.value.name"
@@ -73,7 +81,7 @@ const handleSubmit = useMessageHandle(
           </UIFormItem>
         </div>
       </main>
-      <footer class="footer">
+      <footer class="flex justify-center">
         <UIButton
           v-radar="{ name: 'Save button', desc: 'Click to save asset changes' }"
           color="primary"
@@ -86,31 +94,3 @@ const handleSubmit = useMessageHandle(
     </UIForm>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.main {
-  display: flex;
-}
-
-.sider {
-  flex: 0 0 auto;
-  padding: 20px 24px;
-
-  .preview {
-    width: 112px;
-    height: 84px;
-    border-radius: 8px;
-    background-color: var(--ui-color-grey-300);
-  }
-}
-
-.inputs {
-  flex: 1 1 0;
-  padding: 20px 24px 40px;
-}
-
-.footer {
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue b/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
index 87e117508..281d3966e 100644
--- a/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
+++ b/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
@@ -186,16 +186,16 @@ const handleRemove = useMessageHandle(
       <UITextInput
         v-model:value="searchInput"
         v-radar="{ name: 'Search input', desc: 'Input to search library assets' }"
-        class="search-input"
+        class="w-80"
         clearable
         :placeholder="$t({ en: 'Search', zh: '搜索' })"
         @keypress.enter="handleSearch"
       >
-        <template #prefix><UIIcon class="search-icon" type="search" /></template>
+        <template #prefix><UIIcon class="text-grey-700" type="search" /></template>
       </UITextInput>
     </template>
-    <section class="body">
-      <div class="sider">
+    <section class="flex">
+      <div class="min-w-0 w-42 flex-none flex-col gap-3 border-r border-grey-400 p-middle flex">
         <UIChip
           v-for="c in categories"
           :key="c.value"
@@ -205,12 +205,12 @@ const handleRemove = useMessageHandle(
           {{ $t(c.message) }}
         </UIChip>
       </div>
-      <main class="main">
-        <h3 class="title">{{ $t(category.message) }}</h3>
-        <div class="content">
+      <main class="flex flex-1 flex-col">
+        <h3 class="px-6 pt-5 text-grey-900">{{ $t(category.message) }}</h3>
+        <div class="px-6 pt-2 pb-5">
           <ListResultWrapper v-slot="slotProps" :query-ret="queryRet" :height="584">
             <!-- fixed asset-list height to keep the layout stable -->
-            <ul class="asset-list" style="height: 584px">
+            <ul class="flex flex-wrap content-start gap-2" style="height: 584px">
               <ItemComponent
                 v-for="asset in slotProps.data.data"
                 :key="asset.id"
@@ -230,55 +230,9 @@ const handleRemove = useMessageHandle(
               </ItemComponent>
             </ul>
           </ListResultWrapper>
-          <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+          <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 justify-center" :total="pageTotal" />
         </div>
       </main>
     </section>
   </UISearchableModal>
 </template>
-
-<style lang="scss" scoped>
-.search-input {
-  width: 320px;
-}
-.search-icon {
-  color: var(--ui-color-grey-700);
-}
-.body {
-  display: flex;
-  justify-content: stretch;
-}
-.sider {
-  flex: 0 0 168px;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  padding: var(--ui-gap-middle);
-  gap: 12px;
-
-  border-right: 1px solid var(--ui-color-grey-400);
-}
-.main {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
-}
-.title {
-  padding: 20px 24px 0;
-  color: var(--ui-color-grey-900);
-}
-.content {
-  padding: 8px 24px 20px;
-}
-.asset-list {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  align-content: flex-start;
-}
-.pagination {
-  justify-content: center;
-  margin: 36px 0 0;
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/management/VisibilityIcon.vue b/spx-gui/src/components/asset/library/management/VisibilityIcon.vue
index 73c09f035..ee1bf3b7c 100644
--- a/spx-gui/src/components/asset/library/management/VisibilityIcon.vue
+++ b/spx-gui/src/components/asset/library/management/VisibilityIcon.vue
@@ -7,8 +7,8 @@ defineProps<{
 </script>
 
 <template>
-  <div class="visibility-icon">
-    <i v-if="visibility === Visibility.Public" class="icon" :title="$t({ en: 'Public', zh: '公开' })">
+  <div class="absolute top-1.5 left-1.5 flex h-6 w-6 items-center justify-center rounded-full bg-grey-100">
+    <i v-if="visibility === Visibility.Public" class="h-4 w-4" :title="$t({ en: 'Public', zh: '公开' })">
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           fill-rule="evenodd"
@@ -31,7 +31,7 @@ defineProps<{
         </defs>
       </svg>
     </i>
-    <i v-else class="icon" :title="$t({ en: 'Private', zh: '私有' })">
+    <i v-else class="h-4 w-4" :title="$t({ en: 'Private', zh: '私有' })">
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           fill-rule="evenodd"
@@ -47,22 +47,3 @@ defineProps<{
     </i>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.visibility-icon {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  left: 6px;
-  top: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--ui-color-grey-100);
-  border-radius: 50%;
-}
-.icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
diff --git a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
index 14716c37e..a2120f0ea 100644
--- a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
+++ b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
@@ -10,13 +10,13 @@
     :body-style="{ padding: '0' }"
     @update:visible="emit('cancelled')"
   >
-    <main class="main">
+    <main class="flex items-stretch" style="height: 475px">
       <div
         v-radar="{
           name: 'Preprocessing method entries',
           desc: 'Sidebar which contains entries for preprocessing methods'
         }"
-        class="sider"
+        class="flex flex-none flex-col gap-3 border-r border-dividing-line-2 px-4 py-3"
       >
         <ProcessItem
           v-radar="{
@@ -43,7 +43,7 @@
           @click="handleMethodClick(method.value)"
         />
       </div>
-      <div class="detail">
+      <div class="min-w-0 flex-1">
         <!-- Use `v-show` instead of `v-if` to avoid exception. See details in https://github.com/goplus/builder/issues/2022 -->
         <ProcessDetail
           v-show="activeMethod == null"
@@ -73,11 +73,14 @@
         />
       </div>
     </main>
-    <footer class="footer">
+    <footer
+      class="flex items-end gap-5 border-r border-dividing-line-2 p-4"
+      :style="{ boxShadow: '0px -2px 12px 0px rgba(51, 51, 51, 0.08)' }"
+    >
       <div class="footer-main">
-        <h4 class="footer-title">{{ $t({ en: 'Costumes', zh: '造型' }) }}</h4>
+        <h4 class="text-title">{{ $t({ en: 'Costumes', zh: '造型' }) }}</h4>
         <div class="costume-wrapper">
-          <ul class="costume-list">
+          <ul class="flex gap-2">
             <CostumeItem
               v-for="costume in costumes"
               :key="costume.id"
@@ -297,51 +300,20 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped>
-.main {
-  height: 475px;
-  display: flex;
-  align-items: stretch;
-}
-.footer {
-  padding: 16px;
-  display: flex;
-  gap: 20px;
-  align-items: flex-end;
-  border-right: 1px solid var(--ui-color-dividing-line-2);
-  box-shadow: 0px -2px 12px 0px rgba(51, 51, 51, 0.08);
-}
+<style scoped>
 .footer-main {
   flex: 1 1 0;
   min-width: 0;
 
-  // negative margin & fixed height to allow optional scrollbar of .costume-wrapper
+  /* negative margin & fixed height to allow optional scrollbar of .costume-wrapper */
   height: 135px;
   margin-bottom: -16px;
 }
-.footer-title {
-  color: var(--ui-color-title);
-}
+
 .costume-wrapper {
   width: 100%;
   padding-top: 9px;
   overflow-x: auto;
   scrollbar-width: thin;
 }
-.costume-list {
-  display: flex;
-  gap: 8px;
-}
-.sider {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  padding: 12px 16px;
-  gap: 12px;
-  border-right: 1px solid var(--ui-color-dividing-line-2);
-}
-.detail {
-  flex: 1 1 0;
-  min-width: 0;
-}
 </style>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
index 834f1e8b0..f9d346446 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
@@ -1,6 +1,6 @@
 <template>
-  <section ref="wrapperRef" class="img-preview" :style="wrapperStyle">
-    <canvas ref="canvasRef" class="canvas"></canvas>
+  <section ref="wrapperRef" class="img-preview flex w-full items-center justify-center" :style="wrapperStyle">
+    <canvas ref="canvasRef" class="bg-bottom-left bg-repeat bg-[url('./img-bg.svg')]"></canvas>
   </section>
 </template>
 
@@ -67,19 +67,8 @@ defineExpose({
 })
 </script>
 
-<style lang="scss" scoped>
-.img-preview {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  & + .img-preview {
-    margin-top: 20px;
-  }
-}
-
-.canvas {
-  background: left bottom repeat url('./img-bg.svg');
+<style scoped>
+.img-preview + .img-preview {
+  margin-top: 20px;
 }
 </style>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
index da2b3f054..edae01f79 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
@@ -1,7 +1,7 @@
 <template>
-  <section class="process-detail">
-    <header>
-      <div class="title">
+  <section class="relative flex h-full flex-col gap-2.5 px-5 py-2.5">
+    <header class="flex">
+      <div class="flex h-8 flex-1 items-center gap-3">
         <slot name="header"></slot>
       </div>
       <UIButton
@@ -10,17 +10,19 @@
         color="success"
         :loading="handleApply.isLoading.value"
         @click="handleApply.fn"
-        >{{ $t({ en: 'Apply', zh: '应用' }) }}</UIButton
       >
+        {{ $t({ en: 'Apply', zh: '应用' }) }}
+      </UIButton>
       <UIButton
         v-show="cancelFn && applied"
         color="boring"
         :loading="handleCancel.isLoading.value"
         @click="handleCancel.fn"
-        >{{ $t({ en: 'Cancel', zh: '取消' }) }}</UIButton
       >
+        {{ $t({ en: 'Cancel', zh: '取消' }) }}
+      </UIButton>
     </header>
-    <main>
+    <main class="flex-1 overflow-y-auto rounded-1 bg-grey-300">
       <slot></slot>
     </main>
   </section>
@@ -46,32 +48,3 @@ const handleCancel = useMessageHandle(() => props.cancelFn!(), {
   zh: '取消失败'
 })
 </script>
-
-<style lang="scss" scoped>
-.process-detail {
-  position: relative;
-  padding: 10px 20px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-header {
-  display: flex;
-
-  .title {
-    flex: 1 1 0;
-    height: var(--ui-line-height-2);
-    display: flex;
-    gap: 12px;
-    align-items: center;
-  }
-}
-main {
-  flex: 1 1 0;
-  overflow-y: auto;
-
-  border-radius: var(--ui-border-radius-1);
-  background-color: var(--ui-color-grey-300);
-}
-</style>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
index 17510a439..a0037f6bb 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
@@ -1,10 +1,17 @@
 <template>
-  <li class="process-item" :class="{ active, applied }">
-    <UIImg class="img" :src="imgSrc" />
-    <div class="applied-icon">
+  <li class="relative flex h-fit w-22 cursor-pointer flex-col items-center">
+    <UIImg
+      class="h-16.5 w-22 rounded-1"
+      :style="active ? { boxShadow: 'inset 0 0 0 2px var(--ui-color-primary-main)' } : null"
+      :src="imgSrc"
+    />
+    <div
+      class="absolute top-5.25 left-8 flex h-6 w-6 items-center justify-center rounded-full bg-green-main text-grey-100 transition-opacity duration-200"
+      :class="applied ? 'opacity-100' : 'opacity-0'"
+    >
       <UIIcon color="sprite" type="check" />
     </div>
-    <p class="name">{{ name }}</p>
+    <p class="w-full px-[1em] py-0.5 text-center text-10/[1.4] text-title">{{ name }}</p>
   </li>
 </template>
 
@@ -19,56 +26,3 @@ defineProps<{
   active: boolean
 }>()
 </script>
-
-<style lang="scss" scoped>
-.process-item {
-  display: flex;
-  flex-direction: column;
-  width: 88px;
-  height: fit-content;
-  position: relative;
-  align-items: center;
-  cursor: pointer;
-
-  &.active .img {
-    box-shadow: inset 0 0 0 2px var(--ui-color-primary-main);
-  }
-
-  &.applied .applied-icon {
-    opacity: 1;
-  }
-}
-
-.img {
-  border-radius: var(--ui-border-radius-1);
-  width: 88px;
-  height: 66px;
-}
-
-.applied-icon {
-  position: absolute;
-  top: 21px;
-  left: 32px;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  transition: 0.2s;
-  opacity: 0;
-  color: var(--ui-color-grey-100);
-  border-radius: 50%;
-  background-color: var(--ui-color-green-main);
-}
-
-.name {
-  width: 100%;
-  padding: 2px 1em;
-  font-size: 10px;
-  line-height: 1.4;
-
-  text-align: center;
-  color: var(--ui-color-title);
-}
-</style>
diff --git a/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
index be0ecbb46..7c1fffb4a 100644
--- a/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
+++ b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
@@ -2,10 +2,10 @@
   <ProcessDetail v-show="active" :applied="applied && !dirty" :apply-fn="apply" :cancel-fn="cancel">
     <template #header>
       {{ $t({ en: 'Split sprite sheet', zh: '切分精灵表' }) }}
-      <UINumberInput v-model:value="rowNum" class="num-input" :min="1" :max="maxGridSize">
+      <UINumberInput v-model:value="rowNum" class="w-30" :min="1" :max="maxGridSize">
         <template #prefix>{{ $t({ en: 'Rows', zh: '行数' }) }}</template>
       </UINumberInput>
-      <UINumberInput v-model:value="colNum" class="num-input" :min="1" :max="maxGridSize">
+      <UINumberInput v-model:value="colNum" class="w-30" :min="1" :max="maxGridSize">
         <template #prefix>{{ $t({ en: 'Columns', zh: '列数' }) }}</template>
       </UINumberInput>
     </template>
@@ -137,9 +137,3 @@ async function cancel() {
   emit('cancel')
 }
 </script>
-
-<style lang="scss" scoped>
-.num-input {
-  width: 120px;
-}
-</style>
diff --git a/spx-gui/src/components/asset/scratch/LoadFromScratch.vue b/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
index 4d824c4ff..3afea1677 100644
--- a/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
+++ b/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="container">
+  <div class="flex flex-col gap-5 text-grey-1000">
     <div v-if="scratchAssets.sprites.length">
-      <h4 class="title">{{ $t({ en: 'Sprites', zh: '精灵' }) }}</h4>
+      <h4 class="mb-2">{{ $t({ en: 'Sprites', zh: '精灵' }) }}</h4>
       <NGrid cols="6" x-gap="8" y-gap="8">
         <NGridItem v-for="asset in scratchAssets.sprites" :key="asset.name" @click="selectSprite(asset)">
           <SpriteItem :asset="asset" :selected="selected.sprites.has(asset)" />
@@ -9,7 +9,7 @@
       </NGrid>
     </div>
     <div v-if="scratchAssets.sounds.length">
-      <h4 class="title">{{ $t({ en: 'Sounds', zh: '声音' }) }}</h4>
+      <h4 class="mb-2">{{ $t({ en: 'Sounds', zh: '声音' }) }}</h4>
       <NGrid cols="6" x-gap="8" y-gap="8">
         <NGridItem v-for="asset in scratchAssets.sounds" :key="asset.name" @click="selectSound(asset)">
           <SoundItem :asset="asset" :selected="selected.sounds.has(asset)" />
@@ -18,7 +18,7 @@
     </div>
 
     <div v-if="scratchAssets.backdrops.length">
-      <h4 class="title">{{ $t({ en: 'Backdrops', zh: '背景' }) }}</h4>
+      <h4 class="mb-2">{{ $t({ en: 'Backdrops', zh: '背景' }) }}</h4>
       <NGrid cols="6" x-gap="8" y-gap="8">
         <NGridItem v-for="asset in scratchAssets.backdrops" :key="asset.name" @click="selectBackdrop(asset)">
           <BackdropItem :asset="asset" :selected="selected.backdrops.has(asset)" />
@@ -28,7 +28,7 @@
     <UIButton
       v-radar="{ name: 'Import button', desc: 'Click to import selected assets from Scratch' }"
       size="large"
-      class="import-button"
+      class="self-end"
       :loading="importSelected.isLoading.value"
       @click="importSelected.fn"
     >
@@ -169,20 +169,3 @@ const importSelected = useMessageHandle(
   { en: 'Assets imported', zh: '素材导入成功' }
 )
 </script>
-
-<style lang="scss" scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  color: var(--ui-color-grey-1000);
-}
-
-.title {
-  margin-bottom: 8px;
-}
-
-.import-button {
-  align-self: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/common/CostumesPlayer.vue b/spx-gui/src/components/common/CostumesPlayer.vue
index 81351f87f..1759e2a57 100644
--- a/spx-gui/src/components/common/CostumesPlayer.vue
+++ b/spx-gui/src/components/common/CostumesPlayer.vue
@@ -129,7 +129,7 @@ defineExpose({ load, play })
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .frames-player {
   position: relative;
 }
diff --git a/spx-gui/src/components/common/ModificationWarningModal.vue b/spx-gui/src/components/common/ModificationWarningModal.vue
index 806e2d9e5..461262651 100644
--- a/spx-gui/src/components/common/ModificationWarningModal.vue
+++ b/spx-gui/src/components/common/ModificationWarningModal.vue
@@ -39,76 +39,25 @@ function handleCancel() {
     :mask-closable="false"
     @update:visible="handleCancel"
   >
-    <div class="warn-content">
-      <div class="warn-tip">
-        <span class="warn-tip-icon">!</span>
+    <div class="flex flex-col gap-2 text-body/[1.6] text-grey-800">
+      <div class="flex items-center gap-2 font-semibold text-yellow-500">
+        <span
+          class="inline-flex h-5 w-5 flex-none items-center justify-center rounded-full bg-yellow-500 text-14 font-bold leading-none text-grey-100"
+        >
+          !
+        </span>
         <span>{{ $t(props.tip) }}</span>
       </div>
-      <ul class="warn-lines">
+      <ul class="m-0 flex list-none flex-col gap-0.5 pl-0 text-grey-800">
         <li v-for="(item, index) in props.items" :key="index">
           {{ $t(item) }}
         </li>
       </ul>
     </div>
-    <footer class="footer center">
+    <footer class="mt-large flex justify-center gap-middle pb-1">
       <UIButton v-radar="props.confirmRadar" color="danger" @click="emit('resolved')">
         {{ $t(props.confirmText) }}
       </UIButton>
     </footer>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.warn-content {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  color: var(--ui-color-grey-800);
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.warn-tip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--ui-color-yellow-500);
-  font-weight: 600;
-}
-
-.warn-tip-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--ui-color-yellow-500);
-  color: var(--ui-color-grey-100);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  font-size: 14px;
-  font-weight: 700;
-  flex: 0 0 auto;
-}
-
-.warn-lines {
-  margin: 0;
-  padding-left: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  color: var(--ui-color-grey-800);
-}
-
-.footer {
-  display: flex;
-  gap: var(--ui-gap-middle);
-  margin-top: var(--ui-gap-large);
-  padding-bottom: 4px;
-}
-
-.center {
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/components/common/RenameModal.vue b/spx-gui/src/components/common/RenameModal.vue
index 10a5466d5..eb080a17a 100644
--- a/spx-gui/src/components/common/RenameModal.vue
+++ b/spx-gui/src/components/common/RenameModal.vue
@@ -70,11 +70,11 @@ function validateName(name: string) {
         />
         <template #tip>{{ $t(target.inputTip) }}</template>
       </UIFormItem>
-      <p v-if="target.warning != null" class="warning">
-        <UIIcon class="icon" type="warning" />
+      <p v-if="target.warning != null" class="mt-3 flex items-start gap-2 text-yellow-500">
+        <UIIcon style="height: 22px; flex: 0 0 auto" type="warning" />
         {{ $t(target.warning) }}
       </p>
-      <footer class="footer">
+      <footer class="mt-10 flex justify-end gap-middle">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel renaming' }"
           color="boring"
@@ -94,25 +94,3 @@ function validateName(name: string) {
     </UIForm>
   </UIFormModal>
 </template>
-
-<style lang="scss" scoped>
-.warning {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-  color: var(--ui-color-yellow-500);
-  align-items: flex-start;
-
-  .icon {
-    flex: 0 0 auto;
-    height: 22px;
-  }
-}
-
-.footer {
-  margin-top: 40px;
-  display: flex;
-  gap: var(--ui-gap-middle);
-  justify-content: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/community/CommunityHeader.vue b/spx-gui/src/components/community/CommunityHeader.vue
index a27db5fa4..a760bbeb8 100644
--- a/spx-gui/src/components/community/CommunityHeader.vue
+++ b/spx-gui/src/components/community/CommunityHeader.vue
@@ -3,10 +3,10 @@
 <template>
   <section class="flex-none bg-grey-100">
     <CenteredWrapper class="flex h-16 items-center justify-between gap-5">
-      <h1 class="min-w-0 flex-1 truncate text-16/6.5 text-title">
+      <h1 class="min-w-0 flex-[1_1_0] truncate text-16/6.5 text-title">
         <slot></slot>
       </h1>
-      <label class="shrink-0">
+      <label class="flex-[0_0_auto]">
         <slot name="options"></slot>
       </label>
     </CenteredWrapper>
diff --git a/spx-gui/src/components/community/footer/CommunityFooter.vue b/spx-gui/src/components/community/footer/CommunityFooter.vue
index 8fd6ec239..e44d65dc2 100644
--- a/spx-gui/src/components/community/footer/CommunityFooter.vue
+++ b/spx-gui/src/components/community/footer/CommunityFooter.vue
@@ -6,7 +6,7 @@ import { UILink } from '@/components/ui'
 <template>
   <footer
     v-if="showLicense"
-    class="flex h-12.5 w-full shrink-0 items-center justify-center gap-6 text-12 text-grey-700"
+    class="flex h-12.5 w-full flex-[0_0_auto] items-center justify-center gap-6 text-12 text-grey-700"
   >
     <span class="flex items-center justify-center">{{ $t({ en: '© 2025 Qiniu Cloud.', zh: '© 2025 七牛云' }) }}</span>
     <UILink
diff --git a/spx-gui/src/components/community/user/UserHeader.vue b/spx-gui/src/components/community/user/UserHeader.vue
index ec56e5f74..ba9ef4765 100644
--- a/spx-gui/src/components/community/user/UserHeader.vue
+++ b/spx-gui/src/components/community/user/UserHeader.vue
@@ -79,7 +79,7 @@ const handleEditProfile = useMessageHandle(
       <UIImg class="h-full w-full rounded-full border-2 border-grey-100 bg-grey-100" :src="avatarUrl" />
     </div>
     <div class="flex items-end gap-25 px-5 pt-5 pb-5 pl-48">
-      <div class="flex flex-1 flex-col gap-3">
+      <div class="flex-[1_1_0] flex flex-col gap-3">
         <div class="flex flex-wrap items-center gap-middle">
           <h2 class="m-0 text-20/7 text-title">{{ user.displayName }}</h2>
           <UserUsernameInline :username="user.username" />
@@ -87,7 +87,7 @@ const handleEditProfile = useMessageHandle(
         </div>
         <TextView style="max-height: 66px" :text="user.description" />
       </div>
-      <div class="flex shrink-0 basis-27.5 justify-end">
+      <div class="flex-[0_0_110px] flex justify-end">
         <UIButton
           v-if="isSignedInUser"
           v-radar="{ name: 'Edit profile button', desc: 'Click to edit user profile' }"
diff --git a/spx-gui/src/components/editor/map-editor/MapEditor.vue b/spx-gui/src/components/editor/map-editor/MapEditor.vue
index 98f8fedfc..c91c7ed51 100644
--- a/spx-gui/src/components/editor/map-editor/MapEditor.vue
+++ b/spx-gui/src/components/editor/map-editor/MapEditor.vue
@@ -26,14 +26,14 @@ function handleSpriteSelect(sprite: Sprite | null) {
 </script>
 
 <template>
-  <div class="flex flex-1 flex-row gap-middle">
+  <div class="flex-[1_1_0] flex flex-row gap-middle">
     <div class="flex w-0 min-w-0 flex-1 items-center justify-center">
       <MapViewer :project="project" :selected-sprite="selectedSprite" @update:selected-sprite="handleSpriteSelect" />
     </div>
-    <div class="flex basis-100 grow-0 shrink-0 flex-col gap-middle desktop-large:basis-124">
+    <div class="flex-[0_0_400px] flex flex-col gap-middle desktop-large:basis-124">
       <UICard>
         <UICardHeader>
-          <div class="flex w-full items-center justify-between">
+          <div class="w-full flex items-center justify-between">
             {{
               $t({
                 en: 'Global Config',
@@ -56,7 +56,7 @@ function handleSpriteSelect(sprite: Sprite | null) {
         <MapBasicConfig v-if="!collapsed" class="p-4" :project="project" />
       </UICard>
       <SpritesPanel
-        class="min-h-0 flex-1 basis-0"
+        class="min-h-0 flex-[1_1_0]"
         :project="project"
         :selected-sprite="selectedSprite"
         @update:selected-sprite="handleSpriteSelect"
diff --git a/spx-gui/src/components/ui/modal/UIModal.vue b/spx-gui/src/components/ui/modal/UIModal.vue
index d215bf1fa..e95b6c4e5 100644
--- a/spx-gui/src/components/ui/modal/UIModal.vue
+++ b/spx-gui/src/components/ui/modal/UIModal.vue
@@ -12,7 +12,7 @@
     <div
       ref="containerRef"
       v-radar="radar ?? { name: 'Modal', desc: 'A modal dialog for specific purpose' }"
-      :class="['container', `ui-modal-size-${size || 'medium'}`]"
+      :class="['ui-modal-container', `ui-modal-size-${size || 'medium'}`]"
     >
       <slot></slot>
     </div>
@@ -107,7 +107,7 @@ useModalEsc(
 </script>
 
 <style lang="scss" scoped>
-.container {
+.ui-modal-container {
   display: flex;
   flex-direction: column;
   box-shadow: var(--ui-box-shadow-big);
diff --git a/spx-gui/src/pages/community/search.vue b/spx-gui/src/pages/community/search.vue
index 1f6fba613..c8d9601d4 100644
--- a/spx-gui/src/pages/community/search.vue
+++ b/spx-gui/src/pages/community/search.vue
@@ -52,7 +52,7 @@
     </ListResultWrapper>
     <footer
       v-show="pageTotal > 1"
-      class="flex h-14 w-full shrink-0 items-center justify-center rounded-2 border border-grey-400 bg-grey-100"
+      class="flex flex-[0_0_56px] w-full items-center justify-center rounded-2 border border-grey-400 bg-grey-100"
     >
       <UIPagination v-model:current="page" :total="pageTotal" />
     </footer>
diff --git a/spx-gui/src/pages/community/user/index.vue b/spx-gui/src/pages/community/user/index.vue
index c42a52353..78b9213f0 100644
--- a/spx-gui/src/pages/community/user/index.vue
+++ b/spx-gui/src/pages/community/user/index.vue
@@ -30,14 +30,14 @@ watch(user, (currentUser) => {
 
 <template>
   <CenteredWrapper class="flex flex-[1_0_auto] flex-col gap-5 pt-6 pb-10" size="large">
-    <UIError v-if="error != null" class="flex flex-1 rounded-2 bg-grey-100" :retry="refetch">
+    <UIError v-if="error != null" class="flex flex-[1_1_0] rounded-2 bg-grey-100" :retry="refetch">
       {{ $t(error.userMessage) }}
     </UIError>
     <template v-else-if="user != null">
       <UserHeader :user="user" />
       <div class="flex items-start gap-5">
-        <UserSidebar class="shrink-0" :username="user.username" />
-        <div class="min-w-0 flex-1">
+        <UserSidebar class="flex-[0_0_auto]" :username="user.username" />
+        <div class="min-w-0 flex-[1_1_0]">
           <router-view />
         </div>
       </div>
diff --git a/spx-gui/src/pages/docs/ui-design.vue b/spx-gui/src/pages/docs/ui-design.vue
index bcf7e076e..de9923d7d 100644
--- a/spx-gui/src/pages/docs/ui-design.vue
+++ b/spx-gui/src/pages/docs/ui-design.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="ui-design-wrapper">
+  <div class="flex h-full w-full flex-col overflow-y-auto bg-grey-500">
     <CommunityNavbar />
 
-    <CenteredWrapper class="wrapper">
-      <div class="component-wrapper">
+    <CenteredWrapper class="my-7.5 flex flex-col gap-8">
+      <div class="flex flex-col gap-middle">
         <h3>UIButton</h3>
-        <div class="setting-wrapper">
+        <div class="flex items-center gap-3">
           <div>
             variant:
             <UISelect v-model:value="buttonVariant">
@@ -30,8 +30,8 @@
             </UISelect>
           </div>
         </div>
-        <div class="content-wrapper">
-          <div class="item">
+        <div class="flex flex-col gap-3">
+          <div class="flex gap-2">
             <UIButton :variant="buttonVariant" :shape="buttonShape" :size="buttonSize" color="primary"
               >primary</UIButton
             >
@@ -47,7 +47,7 @@
             <UIButton :variant="buttonVariant" :shape="buttonShape" :size="buttonSize" color="blue">blue</UIButton>
             <UIButton :variant="buttonVariant" :shape="buttonShape" :size="buttonSize" color="purple">purple</UIButton>
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UIButton :variant="buttonVariant" :shape="buttonShape" :size="buttonSize" color="primary" icon="play"
               >primary</UIButton
             >
@@ -74,7 +74,7 @@
             >
           </div>
 
-          <div class="item">
+          <div class="flex gap-2">
             <UIButton
               :variant="buttonVariant"
               :shape="buttonShape"
@@ -142,7 +142,7 @@
               >purple</UIButton
             >
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UIButton
               :variant="buttonVariant"
               :shape="buttonShape"
@@ -204,7 +204,7 @@
               >purple</UIButton
             >
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UIButton
               :variant="buttonVariant"
               :shape="buttonShape"
@@ -264,9 +264,9 @@
           </div>
         </div>
       </div>
-      <div class="component-wrapper">
+      <div class="flex flex-col gap-middle">
         <h3>UITag</h3>
-        <div class="setting-wrapper">
+        <div class="flex items-center gap-3">
           <div>
             variant:
             <UISelect v-model:value="tagVariant">
@@ -275,20 +275,20 @@
             </UISelect>
           </div>
         </div>
-        <div class="content-wrapper">
-          <div class="item">
+        <div class="flex flex-col gap-3">
+          <div class="flex gap-2">
             <UITag :variant="tagVariant" color="default">default</UITag>
             <UITag :variant="tagVariant" color="primary">primary</UITag>
             <UITag :variant="tagVariant" color="warning">warning</UITag>
             <UITag :variant="tagVariant" color="error">error</UITag>
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UITag :variant="tagVariant" color="default" closable @close="message.success('default')">default</UITag>
             <UITag :variant="tagVariant" color="primary" closable @close="message.info('primary')">primary</UITag>
             <UITag :variant="tagVariant" color="warning" closable @close="message.warning('warning')">warning</UITag>
             <UITag :variant="tagVariant" color="error" closable @close="message.error('error')">error</UITag>
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UITag
               v-for="value in ['up', 'right', 'down', 'left']"
               :key="value"
@@ -299,7 +299,7 @@
               >{{ value }}</UITag
             >
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UITag
               v-for="value in ['up', 'right', 'down', 'left']"
               :key="value"
@@ -312,7 +312,7 @@
               >{{ value }}</UITag
             >
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UITag :variant="tagVariant" color="default" disabled>default</UITag>
             <UITag :variant="tagVariant" color="primary" disabled>primary</UITag>
             <UITag :variant="tagVariant" color="warning" disabled>warning</UITag>
@@ -348,44 +348,3 @@ const message = useMessage()
 const tagValue = ref('up')
 const tagsValue = ref(new Set())
 </script>
-
-<style lang="scss" scoped>
-.ui-design-wrapper {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ui-color-grey-500);
-}
-
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  margin: 30px auto;
-  gap: 32px;
-}
-
-.component-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.setting-wrapper {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.content-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .item {
-    display: flex;
-    gap: 8px;
-  }
-}
-</style>
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index d3e9644fb..325f3ba36 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -1,9 +1,10 @@
 <template>
-  <section class="editor-home">
-    <header class="editor-header">
+  <!-- TODO: review this background color and promote it to a shared UI token if it becomes reused. -->
+  <section class="flex min-h-full w-full flex-col bg-[#e9fcff]">
+    <header class="flex-[0_0_auto]">
       <EditorNavbar :project="state?.project ?? null" :state="state" />
     </header>
-    <main class="editor-main">
+    <main class="flex-[1_1_0] flex gap-middle p-middle">
       <UIDetailedLoading v-if="allQueryRet.isLoading.value" :percentage="allQueryRet.progress.value.percentage">
         <span>{{ $t(allQueryRet.progress.value.desc ?? { en: 'Loading...', zh: '加载中...' }) }}</span>
       </UIDetailedLoading>
@@ -268,25 +269,3 @@ function openProject(owner: string, name: string) {
   router.push(getProjectEditorRoute(owner, name))
 }
 </script>
-
-<style scoped lang="scss">
-.editor-home {
-  width: 100%;
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  background-color: #e9fcff; // TODO: define as UI vars
-}
-
-.editor-header {
-  flex: 0 0 auto;
-}
-
-.editor-main {
-  flex: 1 1 0;
-  display: flex;
-  gap: var(--ui-gap-middle);
-  padding: 16px;
-}
-</style>

From 02fc528daed7a9ebca8348a3a2e934c9d5a2d359 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Wed, 1 Apr 2026 15:58:46 +0800
Subject: [PATCH 06/29] copilot

---
 .../src/components/copilot/CopilotInput.vue   | 212 ++++-----
 .../src/components/copilot/CopilotRound.vue   |  13 +-
 spx-gui/src/components/copilot/CopilotUI.vue  | 445 +++++++++---------
 .../src/components/copilot/MarkdownView.vue   | 163 ++++---
 .../src/components/copilot/UserMessage.vue    |  53 +--
 .../copilot/custom-elements/CodeBlock.vue     |  17 +-
 .../copilot/custom-elements/CodeChange.vue    |  36 +-
 .../copilot/custom-elements/HighlightLink.vue |  29 +-
 .../custom-elements/common/BlockActionBtn.vue |  31 +-
 .../custom-elements/common/BlockFooter.vue    |  14 +-
 .../custom-elements/common/BlockWrapper.vue   |  15 +-
 .../copilot/feedback/BaseCancelled.vue        |   8 +-
 .../copilot/feedback/BaseFailed.vue           |   8 +-
 .../copilot/feedback/RetryableWrapper.vue     |  50 +-
 .../feedback/api-exception/QuotaExceeded.vue  |   8 +-
 .../feedback/api-exception/SignInTip.vue      |  17 +-
 spx-gui/src/components/ui/dialog/UIDialog.vue |   4 +-
 .../src/components/ui/modal/UIFormModal.vue   |   4 +-
 .../components/ui/modal/UIFullScreenModal.vue |   4 +-
 .../components/ui/modal/UISearchableModal.vue |   4 +-
 20 files changed, 444 insertions(+), 691 deletions(-)

diff --git a/spx-gui/src/components/copilot/CopilotInput.vue b/spx-gui/src/components/copilot/CopilotInput.vue
index 9a9afc975..ce0575259 100644
--- a/spx-gui/src/components/copilot/CopilotInput.vue
+++ b/spx-gui/src/components/copilot/CopilotInput.vue
@@ -40,23 +40,27 @@ defineExpose({ focus })
 </script>
 
 <template>
-  <div class="copilot-input" :class="{ loading }" @click="focus">
-    <div class="content">
-      <div v-if="loading" class="dot-loading">
+  <div class="group" :class="{ loading }" @click="focus">
+    <div class="content flex h-full items-center gap-2.5 bg-grey-100 px-3.5 py-3">
+      <div v-if="loading" class="dot-loading flex items-center justify-between gap-0.5">
         <div class="dot"></div>
       </div>
-      <div class="input-wrapper" :data-value="inputStr">
+      <div class="input-wrapper relative min-h-5 min-w-0 flex-[1_1_0] text-13/5" :data-value="inputStr">
         <textarea
           ref="textareaRef"
           v-model="inputStr"
-          class="textarea"
+          class="absolute h-full w-full resize-none border-none bg-transparent p-0 text-title outline-none placeholder:text-hint-2"
           rows="1"
           :disabled="loading"
           :placeholder="$t(placeholder)"
           @keypress.enter.prevent="handleSubmit"
         ></textarea>
       </div>
-      <button class="submit-btn" :class="{ disabled: inputStr.length === 0 }" @click="handleSubmit">
+      <button
+        class="submit-btn flex h-8 w-8 flex-none cursor-pointer items-center justify-center rounded-full border-none p-1.5 outline-none group-[.loading]:hidden"
+        :class="{ disabled: inputStr.length === 0 }"
+        @click="handleSubmit"
+      >
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
           <path
             d="M10 16.6665L10 3.33317M10 3.33317L5 8.33317M10 3.33317L15 8.33317"
@@ -66,8 +70,18 @@ defineExpose({ focus })
           />
         </svg>
       </button>
-      <button class="cancel-btn" @click="handleAbort">
-        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <button
+        class="hidden h-8 w-8 flex-none cursor-pointer rounded-full border-none bg-transparent p-0 outline-none group-[.loading]:flex"
+        @click="handleAbort"
+      >
+        <svg
+          class="h-full w-full"
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          fill="none"
+        >
           <rect x="1" y="1" width="30" height="30" rx="15" stroke="#E2D4FF" stroke-width="2" />
           <rect x="11" y="11" width="10" height="10" rx="2" fill="#A074FF" />
         </svg>
@@ -76,148 +90,80 @@ defineExpose({ focus })
   </div>
 </template>
 
-<style lang="scss" scoped>
-.content {
-  display: flex;
-  padding: 12px 14px;
-  align-items: center;
-  gap: 10px;
-  height: 100%;
-  background: var(--ui-color-grey-100);
-
-  .dot-loading {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 2px;
-    --speed: 1.3s;
-
-    &::after,
-    &::before,
-    .dot {
-      background-color: var(--ui-color-grey-700);
-      border-radius: 50%;
-      content: '';
-      display: block;
-      height: 6px;
-      width: 6px;
-      transform: scale(0);
-      transition: background-color 0.3s ease;
-    }
-
-    &::after {
-      animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.125) infinite;
-    }
-    &::before {
-      animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.375) infinite;
-    }
-    .dot {
-      animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.25) infinite both;
-    }
-
-    @keyframes pulse {
-      0%,
-      100% {
-        transform: scale(0);
-      }
-      50% {
-        transform: scale(1);
-      }
-    }
-  }
+<style scoped>
+.dot-loading {
+  --speed: 1.3s;
+}
+
+.dot-loading::after,
+.dot-loading::before,
+.dot-loading .dot {
+  background-color: var(--ui-color-grey-700);
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 6px;
+  width: 6px;
+  transform: scale(0);
+  transition: background-color 0.3s ease;
+}
+
+.dot-loading::after {
+  animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.125) infinite;
 }
 
-.input-wrapper {
-  flex: 1 1 0;
-  position: relative;
-  min-width: 0;
-  min-height: 20px;
-
-  font-size: 13px;
-  line-height: 20px;
-
-  // auto resize based on content height
-  &::after {
-    display: block;
-    content: attr(data-value) ' ';
-    pointer-events: none;
-    max-height: 40px; // 2 rows
-    overflow: hidden;
-    visibility: hidden;
-    position: static;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
+.dot-loading::before {
+  animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.375) infinite;
+}
+
+.dot-loading .dot {
+  animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.25) infinite both;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(0);
   }
 
-  .textarea {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    scrollbar-width: thin;
-    font-size: inherit;
-    line-height: inherit;
+  50% {
+    transform: scale(1);
   }
 }
 
-.textarea {
-  font-family: inherit;
-  border: none;
-  resize: none;
-  outline: none;
-  color: var(--ui-color-title);
-  background: none;
-
-  &::placeholder {
-    color: var(--ui-color-hint-2);
-  }
+.input-wrapper::after {
+  /* auto resize based on content height */
+  display: block;
+  content: attr(data-value) ' ';
+  pointer-events: none;
+  max-height: 40px;
+  overflow: hidden;
+  visibility: hidden;
+  position: static;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
 }
 
-.submit-btn,
-.cancel-btn {
-  outline: none;
-  width: 32px;
-  height: 32px;
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  cursor: pointer;
-  border-radius: 32px;
+.input-wrapper > textarea {
+  font-family: inherit;
+  scrollbar-width: thin;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .submit-btn {
-  padding: 6px;
   background: var(--Gradient, linear-gradient(180deg, #9a77ff 0%, #735ffa 100%));
-  stroke: var(--ui-color-grey-100);
-  display: flex;
-
-  &.disabled {
-    background: var(--ui-color-grey-400);
-    & > svg {
-      stroke: var(--ui-color-grey-800);
-    }
-  }
 }
 
-.cancel-btn {
-  padding: 0;
-  display: none;
-  background: transparent;
+.submit-btn.disabled {
+  background: var(--ui-color-grey-400);
+}
 
-  & > svg {
-    width: 100%;
-    height: 100%;
-  }
+.submit-btn > svg {
+  stroke: var(--ui-color-grey-100);
 }
 
-.copilot-input.loading {
-  .submit-btn {
-    display: none;
-  }
-  .cancel-btn {
-    display: flex;
-  }
+.submit-btn.disabled > svg {
+  stroke: var(--ui-color-grey-800);
 }
 </style>
diff --git a/spx-gui/src/components/copilot/CopilotRound.vue b/spx-gui/src/components/copilot/CopilotRound.vue
index e43468219..58133e2f1 100644
--- a/spx-gui/src/components/copilot/CopilotRound.vue
+++ b/spx-gui/src/components/copilot/CopilotRound.vue
@@ -33,8 +33,8 @@ const resultContent = computed<string | null>(() => {
 </script>
 
 <template>
-  <section class="copilot-round">
-    <MarkdownView v-if="resultContent != null" class="answer" :value="resultContent" />
+  <section>
+    <MarkdownView v-if="resultContent != null" class="self-stretch" :value="resultContent" />
     <div v-if="round.state !== RoundState.Initialized">
       <template v-if="round.state === RoundState.Failed">
         <SignInTip v-if="round.apiExceptionCode === ApiExceptionCode.errorUnauthorized" :round="round" />
@@ -48,12 +48,3 @@ const resultContent = computed<string | null>(() => {
     </div>
   </section>
 </template>
-
-<style lang="scss" scoped>
-.copilot-round {
-}
-
-.answer {
-  align-self: stretch;
-}
-</style>
diff --git a/spx-gui/src/components/copilot/CopilotUI.vue b/spx-gui/src/components/copilot/CopilotUI.vue
index b9c4e0653..3b830ee9a 100644
--- a/spx-gui/src/components/copilot/CopilotUI.vue
+++ b/spx-gui/src/components/copilot/CopilotUI.vue
@@ -562,14 +562,7 @@ onMounted(async () => {
   </div>
 </template>
 
-<style lang="scss" scoped>
-$fromColor: #72bbff;
-$toColor: #c390ff;
-
-@mixin copilotBaseLinearBackground($from: $fromColor, $to: $toColor) {
-  background: linear-gradient(90deg, $from 0%, $to 100%);
-}
-
+<style scoped>
 .copilot-trigger {
   position: absolute;
   width: fit-content;
@@ -585,71 +578,76 @@ $toColor: #c390ff;
   transition:
     transform ease 0.4s,
     opacity ease 0.4s;
+}
 
-  .stop-start {
-    stop-color: #9a77ff;
-  }
-  .stop-end {
-    stop-color: #735ffa;
-  }
+.copilot-trigger .stop-start {
+  stop-color: #9a77ff;
+}
 
-  &:hover {
-    .stop-start {
-      stop-color: #ae92ff;
-    }
-    .stop-end {
-      stop-color: #9181fb;
-    }
-  }
+.copilot-trigger .stop-end {
+  stop-color: #735ffa;
+}
 
-  &.visible {
-    pointer-events: all;
-    opacity: 1;
-  }
+.copilot-trigger:hover .stop-start {
+  stop-color: #ae92ff;
+}
 
-  &.left {
-    @include copilotBaseLinearBackground($toColor, $fromColor);
-    padding-left: 0px;
-    right: 1px;
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    &.visible {
-      transform: translate(100%, -50%);
-    }
-    .copilot-trigger-content {
-      padding: 0 5px 0 10px;
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-    }
-  }
-  &.right {
-    @include copilotBaseLinearBackground($toColor, $fromColor);
-    padding-right: 0px;
-    left: 1px;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-    &.visible {
-      transform: translate(-100%, -50%);
-    }
-    .copilot-trigger-content {
-      padding: 0 10px 0 5px;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-  }
+.copilot-trigger:hover .stop-end {
+  stop-color: #9181fb;
+}
 
-  .copilot-trigger-content {
-    display: flex;
-    border-radius: 16px;
-    height: 100%;
-    align-items: center;
-    background: var(--ui-color-grey-100);
-  }
+.copilot-trigger.visible {
+  pointer-events: all;
+  opacity: 1;
+}
+
+.copilot-trigger.left {
+  background: linear-gradient(90deg, #c390ff 0%, #72bbff 100%);
+  padding-left: 0;
+  right: 1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.copilot-trigger.left.visible {
+  transform: translate(100%, -50%);
+}
+
+.copilot-trigger.left .copilot-trigger-content {
+  padding: 0 5px 0 10px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.copilot-trigger.right {
+  background: linear-gradient(90deg, #c390ff 0%, #72bbff 100%);
+  padding-right: 0;
+  left: 1px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.copilot-trigger.right.visible {
+  transform: translate(-100%, -50%);
+}
+
+.copilot-trigger.right .copilot-trigger-content {
+  padding: 0 10px 0 5px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.copilot-trigger .copilot-trigger-content {
+  display: flex;
+  border-radius: 16px;
+  height: 100%;
+  align-items: center;
+  background: var(--ui-color-grey-100);
 }
 
 .copilot-panel {
   position: fixed;
-  z-index: 9999; // TODO
+  z-index: 9999;
   right: 10px;
   bottom: 20px;
   width: 340px;
@@ -658,31 +656,30 @@ $toColor: #c390ff;
   justify-content: center;
   align-items: stretch;
   gap: 8px;
+}
 
-  &.animated {
-    transition:
-      right ease 0.4s,
-      bottom ease 0.4s;
-  }
+.copilot-panel.animated {
+  transition:
+    right ease 0.4s,
+    bottom ease 0.4s;
 }
 
 .body {
   position: relative;
   border-radius: 16px;
-  box-shadow: 0px 16px 32px 0px rgba(36, 41, 47, 0.1);
+  box-shadow: 0 16px 32px 0 rgba(36, 41, 47, 0.1);
   padding: 1px;
-  @include copilotBaseLinearBackground();
+  background: linear-gradient(90deg, #72bbff 0%, #c390ff 100%);
+}
 
-  &:has(.only-input):has(.visible) {
-    &.left,
-    &.left .body-wrapper {
-      border-radius: 16px 0 0 16px;
-    }
-    &.right,
-    &.right .body-wrapper {
-      border-radius: 0 16px 16px 0;
-    }
-  }
+.body:has(.only-input):has(.visible).left,
+.body:has(.only-input):has(.visible).left .body-wrapper {
+  border-radius: 16px 0 0 16px;
+}
+
+.body:has(.only-input):has(.visible).right,
+.body:has(.only-input):has(.visible).right .body-wrapper {
+  border-radius: 0 16px 16px 0;
 }
 
 .body-wrapper {
@@ -691,165 +688,171 @@ $toColor: #c390ff;
   transition: opacity ease 0.4s;
   border-radius: 16px;
   z-index: 2;
+}
 
-  &.out-of-bounds::after {
-    content: '';
-    position: absolute;
-    top: 14px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    backdrop-filter: blur(1px);
-  }
+.body-wrapper.out-of-bounds::after {
+  content: '';
+  position: absolute;
+  top: 14px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  backdrop-filter: blur(1px);
+}
 
-  .dragger {
-    position: absolute;
-    height: 14px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: move;
-    background-color: var(--ui-color-grey-100);
-    transition: background-color ease-in-out 0.3s;
-    z-index: 1;
-
-    &:hover {
-      background-color: var(--ui-color-grey-300);
-    }
-  }
+.body-wrapper .dragger {
+  position: absolute;
+  height: 14px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: move;
+  background-color: var(--ui-color-grey-100);
+  transition: background-color ease-in-out 0.3s;
+  z-index: 1;
+}
 
-  .output {
-    background: var(--ui-color-grey-100);
-    max-height: 300px;
-    font-size: 13px;
-    overflow-y: auto;
-    scrollbar-width: thin;
+.body-wrapper .dragger:hover {
+  background-color: var(--ui-color-grey-300);
+}
 
-    &:not(:empty) {
-      margin-top: 14px;
-      padding: 12px 16px 24px 16px;
-    }
+.body-wrapper .output {
+  background: var(--ui-color-grey-100);
+  max-height: 300px;
+  font-size: 13px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
 
-    .hi {
-      font-size: 20px;
-      color: var(--ui-color-grey-1000);
-    }
-    .tips {
-      margin-top: 4px;
-      color: var(--ui-color-grey-700);
-    }
-    .suggested-questions-wrapper {
-      width: 100%;
-      margin-top: 24px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-
-      .suggested-question {
-        width: 100%;
-        padding: 9px 12px;
-      }
-    }
+.body-wrapper .output:not(:empty) {
+  margin-top: 14px;
+  padding: 12px 16px 24px 16px;
+}
 
-    .quick-inputs {
-      padding-top: 20px;
-      display: flex;
-      flex-direction: row;
-      gap: 8px;
-      background: var(--ui-color-grey-100);
-    }
+.body-wrapper .output .hi {
+  font-size: 20px;
+  color: var(--ui-color-grey-1000);
+}
 
-    .flat-button {
-      --bg-color: var(--ui-color-grey-300);
-      border-radius: var(--ui-border-radius-2);
-      background: var(--bg-color);
-      border: 1px solid var(--bg-color);
-      color: var(--ui-color-grey-900);
-      font-size: 13px;
-      line-height: inherit;
-      white-space: normal;
-      text-align: left;
-      transition: 0.3s;
-      cursor: pointer;
-
-      &:hover {
-        --bg-color: var(--ui-color-grey-200);
-      }
-      &:active {
-        --bg-color: var(--ui-color-grey-400);
-      }
-      &:focus {
-        --bg-color: var(--ui-color-grey-500);
-      }
-    }
-  }
+.body-wrapper .output .tips {
+  margin-top: 4px;
+  color: var(--ui-color-grey-700);
+}
 
-  .divider {
-    @include copilotBaseLinearBackground();
-    height: 1px;
-  }
+.body-wrapper .output .suggested-questions-wrapper {
+  width: 100%;
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
-  .input {
-    height: 62px;
-    overflow: hidden;
-  }
+.body-wrapper .output .suggested-questions-wrapper .suggested-question {
+  width: 100%;
+  padding: 9px 12px;
+}
+
+.body-wrapper .output .quick-inputs {
+  padding-top: 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  background: var(--ui-color-grey-100);
+}
+
+.body-wrapper .output .flat-button {
+  --bg-color: var(--ui-color-grey-300);
+  border-radius: var(--ui-border-radius-2);
+  background: var(--bg-color);
+  border: 1px solid var(--bg-color);
+  color: var(--ui-color-grey-900);
+  font-size: 13px;
+  line-height: inherit;
+  white-space: normal;
+  text-align: left;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.body-wrapper .output .flat-button:hover {
+  --bg-color: var(--ui-color-grey-200);
+}
+
+.body-wrapper .output .flat-button:active {
+  --bg-color: var(--ui-color-grey-400);
+}
+
+.body-wrapper .output .flat-button:focus {
+  --bg-color: var(--ui-color-grey-500);
+}
+
+.body-wrapper .divider {
+  background: linear-gradient(90deg, #72bbff 0%, #c390ff 100%);
+  height: 1px;
+}
+
+.body-wrapper .input {
+  height: 62px;
+  overflow: hidden;
 }
 
 .footer {
   display: flex;
   justify-content: center;
-  .footer-wrapper {
-    z-index: 1;
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    height: 36px;
-    padding: 0 3px;
-    border-radius: 100px;
-    border: 1px solid var(--ui-color-grey-400);
-    background: var(--ui-color-grey-100);
-    box-shadow: 0px 1px 8px 0px rgba(10, 13, 20, 0.05);
-  }
+}
 
-  .v-line {
-    border-right: 1px solid var(--ui-color-grey-400);
-    height: 12px;
-  }
+.footer .footer-wrapper {
+  z-index: 1;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  height: 36px;
+  padding: 0 3px;
+  border-radius: 100px;
+  border: 1px solid var(--ui-color-grey-400);
+  background: var(--ui-color-grey-100);
+  box-shadow: 0 1px 8px 0 rgba(10, 13, 20, 0.05);
+}
 
-  .fold {
-    width: 28px;
-    height: 28px;
-    border-radius: 28px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: transform 0.3s ease-in;
-    stroke: var(--ui-color-grey-800);
-    cursor: pointer;
-
-    @keyframes nudge {
-      from {
-        transform: translateX(-3px);
-      }
-      to {
-        transform: translateX(1px);
-      }
-    }
+.footer .v-line {
+  border-right: 1px solid var(--ui-color-grey-400);
+  height: 12px;
+}
 
-    .animating {
-      animation: nudge 0.5s ease-in-out infinite alternate;
-    }
+.footer .fold {
+  width: 28px;
+  height: 28px;
+  border-radius: 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.3s ease-in;
+  stroke: var(--ui-color-grey-800);
+  cursor: pointer;
+}
 
-    &.left {
-      transform: rotate(180deg);
-    }
+@keyframes nudge {
+  from {
+    transform: translateX(-3px);
+  }
 
-    &:hover {
-      cursor: pointer;
-      stroke: var(--ui-color-primary-500);
-      background: var(--ui-color-primary-200);
-    }
+  to {
+    transform: translateX(1px);
   }
 }
+
+.footer .fold .animating {
+  animation: nudge 0.5s ease-in-out infinite alternate;
+}
+
+.footer .fold.left {
+  transform: rotate(180deg);
+}
+
+.footer .fold:hover {
+  cursor: pointer;
+  stroke: var(--ui-color-primary-500);
+  background: var(--ui-color-primary-200);
+}
 </style>
diff --git a/spx-gui/src/components/copilot/MarkdownView.vue b/spx-gui/src/components/copilot/MarkdownView.vue
index 982c57ae4..38252ad4b 100644
--- a/spx-gui/src/components/copilot/MarkdownView.vue
+++ b/spx-gui/src/components/copilot/MarkdownView.vue
@@ -47,7 +47,7 @@ const components = computed(() => getComponents(copilot))
   <MarkdownView class="markdown-view" :value="value" :components="components" />
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .markdown-view {
   display: flex;
   flex-direction: column;
@@ -56,92 +56,99 @@ const components = computed(() => getComponents(copilot))
   font-size: 13px;
   line-height: 1.7;
   color: inherit;
+}
 
-  :deep(h1, h2, h3, h4, h5, h6) {
-    margin: 1em 0;
-    color: var(--ui-color-title);
-  }
+.markdown-view :deep(h1, h2, h3, h4, h5, h6) {
+  margin: 1em 0;
+  color: var(--ui-color-title);
+}
 
-  :deep(h1) {
-    font-size: 20px;
-    line-height: 1.4;
-  }
+.markdown-view :deep(h1) {
+  font-size: 20px;
+  line-height: 1.4;
+}
 
-  :deep(h2) {
-    font-size: 16px;
-    line-height: 1.625;
-  }
+.markdown-view :deep(h2) {
+  font-size: 16px;
+  line-height: 1.625;
+}
 
-  :deep(h3) {
-    font-size: 14px;
-    line-height: 1.57143;
-  }
+.markdown-view :deep(h3) {
+  font-size: 14px;
+  line-height: 1.57143;
+}
 
-  :deep(h4, h5, h6) {
-    font-size: 13px;
-    line-height: 1.53846;
-  }
+.markdown-view :deep(h4, h5, h6) {
+  font-size: 13px;
+  line-height: 1.53846;
+}
 
-  :deep(ul),
-  :deep(ol) {
-    display: flex;
-    flex-direction: column;
-    padding-left: 1.5em;
-    gap: 8px;
-  }
-  :deep(ul) {
-    list-style: square;
-  }
-  :deep(ol) {
-    list-style: decimal;
-  }
-  :deep(li > *:not(:last-child)) {
-    margin-bottom: 8px;
-  }
+.markdown-view :deep(ul),
+.markdown-view :deep(ol) {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1.5em;
+  gap: 8px;
+}
 
-  :deep(a) {
-    color: var(--ui-color-turquoise-500);
-    text-decoration: underline;
-    &:hover {
-      color: var(--ui-color-turquoise-400);
-    }
-    &:active {
-      color: var(--ui-color-turquoise-600);
-    }
-  }
+.markdown-view :deep(ul) {
+  list-style: square;
+}
 
-  :deep(blockquote) {
-    position: relative;
-    padding-left: 20px;
-    &:before {
-      content: '';
-      position: absolute;
-      left: 9px;
-      top: 0;
-      width: 2px;
-      height: 100%;
-      border-radius: 1px;
-      background-color: var(--ui-color-grey-800);
-    }
-  }
+.markdown-view :deep(ol) {
+  list-style: decimal;
+}
 
-  :deep(code) {
-    font-family: var(--ui-font-family-code);
-  }
-  :deep(:not(pre) > code) {
-    // TODO: keep consistent with component `UICode`
-    font-size: 0.92em;
-    line-height: 2;
-    padding: 2px 4px;
-    border-radius: 4px;
-    border: 1px solid var(--ui-color-grey-500);
-    background: var(--ui-color-grey-300);
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
+.markdown-view :deep(li > *:not(:last-child)) {
+  margin-bottom: 8px;
+}
 
-  :deep(strong) {
-    font-weight: bold;
-  }
+.markdown-view :deep(a) {
+  color: var(--ui-color-turquoise-500);
+  text-decoration: underline;
+}
+
+.markdown-view :deep(a:hover) {
+  color: var(--ui-color-turquoise-400);
+}
+
+.markdown-view :deep(a:active) {
+  color: var(--ui-color-turquoise-600);
+}
+
+.markdown-view :deep(blockquote) {
+  position: relative;
+  padding-left: 20px;
+}
+
+.markdown-view :deep(blockquote::before) {
+  content: '';
+  position: absolute;
+  left: 9px;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  border-radius: 1px;
+  background-color: var(--ui-color-grey-800);
+}
+
+.markdown-view :deep(code) {
+  font-family: var(--ui-font-family-code);
+}
+
+.markdown-view :deep(:not(pre) > code) {
+  /* TODO: keep consistent with component `UICode` */
+  font-size: 0.92em;
+  line-height: 2;
+  padding: 2px 4px;
+  border-radius: 4px;
+  border: 1px solid var(--ui-color-grey-500);
+  background: var(--ui-color-grey-300);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.markdown-view :deep(strong) {
+  font-weight: bold;
 }
 </style>
diff --git a/spx-gui/src/components/copilot/UserMessage.vue b/spx-gui/src/components/copilot/UserMessage.vue
index 26fe90514..e09a595a5 100644
--- a/spx-gui/src/components/copilot/UserMessage.vue
+++ b/spx-gui/src/components/copilot/UserMessage.vue
@@ -13,49 +13,18 @@ const avatarUrl = useAvatarUrl(() => signedInUser.value?.avatar)
 </script>
 
 <template>
-  <section class="user-message" :class="`type-${message.type}`">
-    <img class="avatar" :src="avatarUrl ?? undefined" />
-    <MarkdownView v-if="message.type === 'text'" class="content" :value="message.content" />
-    <div v-else-if="message.type === 'event'" class="content">
+  <section
+    class="self-stretch px-4 py-5"
+    :class="message.type === 'text' ? 'flex flex-col items-start gap-2' : 'flex flex-row items-center gap-2'"
+  >
+    <img class="h-8 w-8 rounded-full" :src="avatarUrl ?? undefined" />
+    <MarkdownView
+      v-if="message.type === 'text'"
+      class="self-stretch rounded-r-1 rounded-b-1 rounded-tl-none bg-[#e9ecf7] p-2"
+      :value="message.content"
+    />
+    <div v-else-if="message.type === 'event'" class="flex-[1_1_0]">
       {{ $t(message.name) }}
     </div>
   </section>
 </template>
-
-<style lang="scss" scoped>
-.user-message {
-  padding: 20px 16px;
-  display: flex;
-  align-self: stretch;
-}
-
-.avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-}
-
-.type-text {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-
-  .content {
-    padding: 8px;
-    align-self: stretch;
-
-    border-radius: 0px var(--ui-border-radius-1) var(--ui-border-radius-1) var(--ui-border-radius-1);
-    background: #e9ecf7;
-  }
-}
-
-.type-event {
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-
-  .content {
-    flex: 1 1 0;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue b/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue
index a8ba3fcd2..6978ae922 100644
--- a/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue
+++ b/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue
@@ -38,8 +38,10 @@ const handleCopy = useMessageHandle(
 
 <template>
   <BlockWrapper>
-    <div class="body">
-      <CodeView class="code" :language="language" mode="block" line-numbers>{{ code }}</CodeView>
+    <div class="py-3 pl-3">
+      <CodeView class="min-w-0 overflow-x-auto pr-3" :language="language" mode="block" line-numbers>
+        {{ code }}
+      </CodeView>
     </div>
     <BlockFooter>
       <BlockActionBtn icon="insert" @click="handleInsert">
@@ -51,14 +53,3 @@ const handleCopy = useMessageHandle(
     </BlockFooter>
   </BlockWrapper>
 </template>
-
-<style lang="scss" scoped>
-.body {
-  padding: 12px 0 12px 12px;
-}
-.code {
-  padding-right: 12px;
-  min-width: 0;
-  overflow-x: auto;
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/CodeChange.vue b/spx-gui/src/components/copilot/custom-elements/CodeChange.vue
index 5ee6ece72..c7ad557d6 100644
--- a/spx-gui/src/components/copilot/custom-elements/CodeChange.vue
+++ b/spx-gui/src/components/copilot/custom-elements/CodeChange.vue
@@ -108,14 +108,14 @@ const handleApply = useMessageHandle(
 <template>
   <BlockWrapper>
     <template v-if="target != null">
-      <div class="header">
-        <CodeLink class="link" :file="target.textDocument.id" :range="target.range" />
+      <div class="p-2">
+        <CodeLink :file="target.textDocument.id" :range="target.range" />
       </div>
-      <div class="body">
-        <div class="code-wrapper">
+      <div class="min-w-0 overflow-x-auto pb-2 pl-2">
+        <div class="min-w-fit">
           <!-- TODO: Consider using [transformerNotationDiff](https://shiki.style/packages/transformers#transformernotationdiff) instead -->
-          <CodeView class="code" mode="block" deletion>{{ codeToDelete }}</CodeView>
-          <CodeView class="code" mode="block" addition>{{ codeToAdd }}</CodeView>
+          <CodeView class="pr-2" mode="block" deletion>{{ codeToDelete }}</CodeView>
+          <CodeView class="pr-2" mode="block" addition>{{ codeToAdd }}</CodeView>
         </div>
       </div>
       <BlockFooter>
@@ -124,30 +124,8 @@ const handleApply = useMessageHandle(
         </BlockActionBtn>
       </BlockFooter>
     </template>
-    <div v-else class="invalid">
+    <div v-else class="p-2 text-center text-hint-2">
       <p>{{ $t({ en: 'Invalid code change', zh: '无效的代码变更' }) }}</p>
     </div>
   </BlockWrapper>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  padding: 8px;
-}
-.body {
-  padding: 0 0 8px 8px;
-  min-width: 0;
-  overflow-x: auto;
-}
-.code-wrapper {
-  min-width: fit-content;
-}
-.code {
-  padding-right: 8px;
-}
-.invalid {
-  padding: 8px;
-  text-align: center;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue b/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
index 7c857c2cb..f1c6fa9cf 100644
--- a/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
+++ b/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
@@ -59,30 +59,11 @@ const { fn: handleClick } = useMessageHandle(
 </script>
 
 <template>
-  <button type="button" class="highlight-link" @click="handleClick">
+  <button
+    type="button"
+    class="inline-block w-fit cursor-pointer rounded-[4px] border-none bg-turquoise-main px-1.25 py-0.5 text-13 font-semibold text-grey-100 outline-none hover:bg-turquoise-400 active:bg-turquoise-600"
+    @click="handleClick"
+  >
     <slot></slot>
   </button>
 </template>
-
-<style lang="scss" scoped>
-.highlight-link {
-  border-radius: 4px;
-  border: none;
-  width: fit-content;
-  display: inline-block;
-  padding: 2px 5px;
-  color: var(--ui-color-grey-100);
-  font-size: 13px;
-  font-weight: 600;
-  outline: none;
-  background-color: var(--ui-color-turquoise-main);
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--ui-color-turquoise-400);
-  }
-  &:active {
-    background-color: var(--ui-color-turquoise-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue b/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue
index 5e92d0d14..44eb993e0 100644
--- a/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue
+++ b/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue
@@ -7,33 +7,10 @@ defineProps<{
 </script>
 
 <template>
-  <button class="block-action-btn">
-    <UIIcon class="icon" :type="icon" />
+  <button
+    class="flex h-4.5 cursor-pointer items-center gap-1 rounded border-none bg-transparent p-0 text-12 text-text hover:text-grey-700"
+  >
+    <UIIcon :type="icon" />
     <slot></slot>
   </button>
 </template>
-
-<style lang="scss" scoped>
-.block-action-btn {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  border: none;
-  background: none;
-  padding: 0;
-  height: 18px;
-  border-radius: 4px;
-  font-size: 12px;
-  color: var(--ui-color-text);
-  cursor: pointer;
-
-  &:hover {
-    color: var(--ui-color-grey-700);
-  }
-
-  .icon {
-    width: 16px;
-    height: 16px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue b/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue
index 7b28ce06c..56a84ec25 100644
--- a/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue
+++ b/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue
@@ -1,19 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <footer class="block-footer">
+  <footer class="flex items-center gap-5 rounded-b-2 border-t border-dividing-line-2 bg-grey-200 px-3 py-1.5">
     <slot></slot>
   </footer>
 </template>
-
-<style lang="scss" scoped>
-.block-footer {
-  padding: 6px 12px;
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  border-top: 1px solid var(--ui-color-dividing-line-2);
-  border-radius: 0 0 var(--ui-border-radius-2) var(--ui-border-radius-2);
-  background: var(--ui-color-grey-200);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue b/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue
index 51a6b621a..d267a4244 100644
--- a/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue
+++ b/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue
@@ -1,20 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="block-wrapper">
+  <div class="self-stretch flex flex-col items-stretch rounded-2 border border-dividing-line-1 bg-grey-100">
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.block-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  align-self: stretch;
-
-  border-radius: var(--ui-border-radius-2);
-  border: 1px solid var(--ui-color-dividing-line-1);
-  background: var(--ui-color-grey-100);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/feedback/BaseCancelled.vue b/spx-gui/src/components/copilot/feedback/BaseCancelled.vue
index 52e5a417f..d7b2bdfa0 100644
--- a/spx-gui/src/components/copilot/feedback/BaseCancelled.vue
+++ b/spx-gui/src/components/copilot/feedback/BaseCancelled.vue
@@ -10,14 +10,8 @@ defineProps<{
 </script>
 
 <template>
-  <RetryableWrapper class="cancelled" :round="round" :is-last-round="isLastRound">
+  <RetryableWrapper class="text-yellow-main" :round="round" :is-last-round="isLastRound">
     <UIIcon type="warning" />
     {{ $t({ en: 'Cancelled', zh: '已取消' }) }}
   </RetryableWrapper>
 </template>
-
-<style lang="scss" scoped>
-.cancelled {
-  color: var(--ui-color-yellow-main);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/feedback/BaseFailed.vue b/spx-gui/src/components/copilot/feedback/BaseFailed.vue
index 198f3fd9c..387549a6a 100644
--- a/spx-gui/src/components/copilot/feedback/BaseFailed.vue
+++ b/spx-gui/src/components/copilot/feedback/BaseFailed.vue
@@ -10,14 +10,8 @@ defineProps<{
 </script>
 
 <template>
-  <RetryableWrapper class="failed" :round="round" :is-last-round="isLastRound">
+  <RetryableWrapper class="text-red-main" :round="round" :is-last-round="isLastRound">
     <UIIcon type="errorTriangle" />
     {{ $t(round.error!) }}
   </RetryableWrapper>
 </template>
-
-<style lang="scss" scoped>
-.failed {
-  color: var(--ui-color-red-main);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue b/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue
index 1ab75d4b3..c8ee149be 100644
--- a/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue
+++ b/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue
@@ -18,11 +18,15 @@ function handleRetry() {
 </script>
 
 <template>
-  <div class="retryable-wrapper">
-    <div class="tip">
+  <div class="flex flex-col gap-2 text-12/4.5">
+    <div class="flex items-center gap-2">
       <slot />
     </div>
-    <button v-if="retryable" class="retry" @click="handleRetry">
+    <button
+      v-if="retryable"
+      class="ml-6 flex w-fit items-center gap-1 rounded border-none bg-transparent px-0 py-0.75 text-grey-800 transition-colors duration-200 hover:text-grey-700 active:text-grey-900"
+      @click="handleRetry"
+    >
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
         <path
           d="M11.6107 3.44482C11.8473 3.44482 12.0304 3.44304 12.1928 3.46436C13.2398 3.6022 14.0646 4.42616 14.2025 5.47314C14.2239 5.63566 14.2221 5.8194 14.2221 6.05615V9.22217C14.2221 9.67751 14.2221 10.0594 14.1967 10.3706C14.1706 10.6897 14.1148 10.9939 13.9682 11.2817C13.7445 11.7206 13.3875 12.0776 12.9486 12.3013C12.6607 12.448 12.3566 12.5047 12.0375 12.5308C11.7263 12.5562 11.3445 12.5562 10.8891 12.5562H8.49844L9.02676 13.0845C9.28688 13.3448 9.28703 13.7666 9.02676 14.0269C8.76649 14.2871 8.34473 14.2869 8.08438 14.0269L6.41739 12.3608C6.15706 12.1005 6.1571 11.6778 6.41739 11.4175L8.08438 9.75146C8.34473 9.49112 8.76641 9.49112 9.02676 9.75146C9.28686 10.0118 9.28703 10.4336 9.02676 10.6938L8.49844 11.2222H10.8891C11.3664 11.2222 11.6847 11.2216 11.9291 11.2017C12.1656 11.1823 12.2746 11.1477 12.3432 11.1128C12.5311 11.0169 12.6839 10.8642 12.7797 10.6763C12.8146 10.6077 12.8492 10.4995 12.8686 10.2632C12.8885 10.0188 12.8891 9.69973 12.8891 9.22217V6.05615C12.8891 5.7782 12.8873 5.70196 12.8803 5.64795C12.8212 5.19922 12.4677 4.8457 12.019 4.78662C11.9649 4.77955 11.8893 4.77783 11.6107 4.77783C11.2427 4.77764 10.9448 4.47889 10.9447 4.11084C10.9449 3.74289 11.2428 3.44501 11.6107 3.44482ZM6.97305 1.97314C7.23335 1.71284 7.65507 1.71294 7.91544 1.97314L9.58243 3.64014C9.84258 3.9005 9.84271 4.32224 9.58243 4.58252L7.91544 6.24951C7.65512 6.50941 7.23329 6.50953 6.97305 6.24951C6.71271 5.98917 6.71273 5.5665 6.97305 5.30615L7.50137 4.77783H5.11075C4.63325 4.77783 4.31512 4.77837 4.07071 4.79834C3.83479 4.81762 3.72627 4.85139 3.65762 4.88623C3.46959 4.98205 3.316 5.13574 3.22012 5.32373C3.18522 5.39236 3.15056 5.50147 3.13126 5.73779C3.11132 5.98221 3.11075 6.30042 3.11075 6.77783V9.94482C3.11075 10.2235 3.11244 10.299 3.11954 10.353C3.17878 10.8016 3.53227 11.1553 3.98087 11.2144C4.0349 11.2214 4.11056 11.2222 4.38907 11.2222C4.75716 11.2223 5.05606 11.521 5.05606 11.8892C5.05589 12.2571 4.75705 12.556 4.38907 12.5562C4.15226 12.5562 3.9686 12.557 3.80606 12.5356C2.75938 12.3976 1.93625 11.5735 1.79825 10.5269C1.7769 10.3645 1.77774 10.1813 1.77774 9.94482V6.77783C1.77774 6.32215 1.77672 5.93977 1.80215 5.62842C1.82824 5.30942 1.886 5.00604 2.03262 4.71826C2.25633 4.27942 2.61327 3.92237 3.05215 3.69873C3.33991 3.55219 3.64335 3.49531 3.96231 3.46924C4.27354 3.44383 4.65534 3.44482 5.11075 3.44482H7.50137L6.97305 2.91553C6.71287 2.65519 6.71281 2.23345 6.97305 1.97314Z"
@@ -33,43 +37,3 @@ function handleRetry() {
     </button>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.retryable-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.tip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.retry {
-  margin-left: 24px;
-  padding: 3px 0px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: inherit;
-  line-height: 18px;
-  width: fit-content;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--ui-color-grey-800);
-  border-radius: 4px;
-  transition: 0.2s;
-
-  &:hover {
-    color: var(--ui-color-grey-700);
-  }
-  &:active {
-    color: var(--ui-color-grey-900);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/copilot/feedback/api-exception/QuotaExceeded.vue b/spx-gui/src/components/copilot/feedback/api-exception/QuotaExceeded.vue
index 720dbab54..d3afd0168 100644
--- a/spx-gui/src/components/copilot/feedback/api-exception/QuotaExceeded.vue
+++ b/spx-gui/src/components/copilot/feedback/api-exception/QuotaExceeded.vue
@@ -72,7 +72,7 @@ onMounted(updateRetryAfterTime)
 </script>
 
 <template>
-  <RetryableWrapper class="quota-exceeded" :round="round" :is-last-round="isLastRound">
+  <RetryableWrapper class="text-yellow-main" :round="round" :is-last-round="isLastRound">
     <UIIcon type="warning" />
     {{
       $t({
@@ -87,9 +87,3 @@ onMounted(updateRetryAfterTime)
     </template>
   </RetryableWrapper>
 </template>
-
-<style lang="scss" scoped>
-.quota-exceeded {
-  color: var(--ui-color-yellow-main);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue b/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
index 11181305d..b0e8dd1d3 100644
--- a/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
+++ b/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
@@ -17,21 +17,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="sign-in-container">
-    <div class="message">{{ $t({ en: 'Please sign in to continue.', zh: '请先登录并继续' }) }}</div>
-    <UIButton variant="flat" class="sign-in-btn" @click="initiateSignIn()">
+  <div class="text-13/[1.7]">
+    <div>{{ $t({ en: 'Please sign in to continue.', zh: '请先登录并继续' }) }}</div>
+    <UIButton variant="flat" class="mt-4" @click="initiateSignIn()">
       {{ $t({ en: 'Sign in', zh: '登录' }) }}
     </UIButton>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.sign-in-container {
-  font-size: 13px;
-  line-height: 1.7;
-
-  .sign-in-btn {
-    margin-top: 16px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/dialog/UIDialog.vue b/spx-gui/src/components/ui/dialog/UIDialog.vue
index 7447d572d..5d38e1ba8 100644
--- a/spx-gui/src/components/ui/dialog/UIDialog.vue
+++ b/spx-gui/src/components/ui/dialog/UIDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <UIModal>
-    <div class="container">
+    <div class="ui-dialog-container">
       <UIIcon class="icon" :type="type" />
       <div class="main">
         <div class="title">
@@ -43,7 +43,7 @@ defineProps<{
   flex-direction: column;
 }
 
-.container {
+.ui-dialog-container {
   padding: 20px 24px 24px;
   display: flex;
   gap: 12px;
diff --git a/spx-gui/src/components/ui/modal/UIFormModal.vue b/spx-gui/src/components/ui/modal/UIFormModal.vue
index 646b60c1d..f8bac348e 100644
--- a/spx-gui/src/components/ui/modal/UIFormModal.vue
+++ b/spx-gui/src/components/ui/modal/UIFormModal.vue
@@ -6,7 +6,7 @@
     :mask-closable="maskClosable"
     @update:visible="handleUpdateShow"
   >
-    <div class="container">
+    <div class="ui-form-modal-container">
       <div class="header">
         <div :class="['title', { center: centerTitle }]">
           {{ title }}
@@ -64,7 +64,7 @@ const handleCloseButton = () => {
 </script>
 
 <style scoped lang="scss">
-.container {
+.ui-form-modal-container {
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
diff --git a/spx-gui/src/components/ui/modal/UIFullScreenModal.vue b/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
index 53fd26e70..0cc5554a9 100644
--- a/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
+++ b/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
@@ -50,7 +50,7 @@ useModalEsc(
       <div v-if="visible" class="ui-full-screen-modal" :style="modalTransformStyle">
         <div
           v-radar="{ name: 'Full screen modal', desc: 'A full screen modal dialog for specific purpose' }"
-          class="container"
+          class="ui-full-screen-modal-container"
         >
           <slot></slot>
         </div>
@@ -82,7 +82,7 @@ useModalEsc(
   }
 }
 
-.container {
+.ui-full-screen-modal-container {
   display: flex;
   flex-direction: column;
   height: 100vh;
diff --git a/spx-gui/src/components/ui/modal/UISearchableModal.vue b/spx-gui/src/components/ui/modal/UISearchableModal.vue
index ce789f614..6e92e95df 100644
--- a/spx-gui/src/components/ui/modal/UISearchableModal.vue
+++ b/spx-gui/src/components/ui/modal/UISearchableModal.vue
@@ -4,7 +4,7 @@
 
 <template>
   <UIModal :radar="radar" :visible="visible" :auto-focus="false" mask-closable @update:visible="handleUpdateShow">
-    <div class="container">
+    <div class="ui-searchable-modal-container">
       <div class="header">
         <h4 class="title">
           {{ title }}
@@ -43,7 +43,7 @@ const handleCloseButton = () => {
 </script>
 
 <style scoped lang="scss">
-.container {
+.ui-searchable-modal-container {
   display: flex;
   flex-direction: column;
 }

From 45de46752ede196f904a976cfba58135e12ed412 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Wed, 1 Apr 2026 22:43:18 +0800
Subject: [PATCH 07/29] editor - wip

---
 docs/develop/tailwind-css-migration.md        |  25 +++
 spx-gui/AGENTS.md                             |   2 +
 spx-gui/src/app.css                           |   3 +
 .../course/management/CourseItemMini.vue      |   2 +-
 .../course/management/CourseSelector.vue      |   8 +-
 .../src/components/editor/ProjectEditor.vue   |  23 +--
 .../definition/DefinitionOverviewWrapper.vue  |  34 ++--
 .../components/editor/common/AnglePicker.vue  |  54 +------
 .../components/editor/common/EditorHeader.vue |  13 +-
 .../editor/common/EditorItemDetail.vue        |  36 +----
 .../components/editor/common/EditorList.vue   |  84 +++-------
 .../components/editor/common/PlayControl.vue  | 117 +++++++-------
 .../common/config/sprite/SpriteDirection.vue  |  20 +--
 .../common/config/sprite/SpritePhysics.vue    |   8 +-
 .../config/sprite/SpritePositionSize.vue      |  10 +-
 .../common/config/sprite/SpriteVisible.vue    |   2 -
 .../common/viewer/PositionIndicator.vue       |  28 +---
 .../quick-config/QuickConfigWrapper.vue       |   9 +-
 .../viewer/quick-config/SpriteQuickConfig.vue |   2 -
 .../viewer/quick-config/WidgetQuickConfig.vue |   2 -
 .../viewer/quick-config/common/ConfigItem.vue |  36 +----
 .../quick-config/common/ConfigPanel.vue       |  13 +-
 .../common/PositionConfigPanel.vue            |  18 +--
 .../quick-config/common/SizeConfigPanel.vue   |  16 +-
 .../common/ZorderConfigDropdown.vue           |  15 +-
 .../sprite/DefaultConfigPanel.vue             |  10 +-
 .../sprite/RotationConfigPanel.vue            |  23 +--
 .../widget/DefaultConfigPanel.vue             |  10 +-
 .../editor/map-editor/MapBasicConfig.vue      |  32 +---
 .../editor/map-editor/MapLayerSortInput.vue   |   2 -
 .../editor/map-editor/MapPhysicsInput.vue     |   2 -
 .../editor/map-editor/MapSizeInput.vue        |  10 +-
 .../editor/map-editor/SpriteBasicConfig.vue   |  66 ++------
 .../editor/map-editor/SpritesPanel.vue        |  44 +----
 .../map-editor/map-viewer/MapViewer.vue       |  36 +----
 .../components/editor/panels/ConsolePanel.vue |  93 +++++------
 .../components/editor/panels/EditorPanels.vue |  34 +---
 .../editor/panels/common/PanelFooter.vue      |  21 +--
 .../editor/panels/common/PanelHeader.vue      |  70 ++------
 .../editor/panels/sprite/SpritesPanel.vue     |  22 +--
 .../editor/panels/stage/StagePanel.vue        | 152 +++---------------
 .../preview/stage-viewer/StageViewer.vue      |  53 +++---
 .../editor/sprite/AnimationDetail.vue         |  16 +-
 .../editor/sprite/AnimationEditor.vue         |   6 -
 .../editor/sprite/AnimationRemoveModal.vue    |  15 +-
 .../editor/sprite/SpriteCollisionEditor.vue   |  32 +---
 .../sprite/SpriteCollisionEditorModal.vue     |  11 +-
 .../components/editor/sprite/SpriteList.vue   |  35 ++--
 .../sprite/animation/AnimationPlayer.vue      |  35 +---
 .../sprite/animation/AnimationSettings.vue    |  87 +++-------
 .../editor/sprite/animation/MuteSwitch.vue    |  22 +--
 .../editor/sprite/animation/SoundEditor.vue   |  41 ++---
 .../animation/state/BoundStateEditor.vue      |  59 +++----
 .../stage/backdrop/BackdropModeSelector.vue   |  18 +--
 .../editor/stage/sound/SoundDetail.vue        | 106 +++---------
 .../editor/stage/sound/SoundRecorder.vue      |  87 ++--------
 .../editor/stage/sound/VolumeSlider.vue       |  20 +--
 .../sound/waveform/WaveformRangeControl.vue   |  33 ++--
 .../sound/waveform/WaveformWithControls.vue   |  48 ++----
 .../stage/widget/detail/MonitorDetail.vue     |  98 +++--------
 60 files changed, 510 insertions(+), 1519 deletions(-)

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
index f5b4dc556..92d48d0e6 100644
--- a/docs/develop/tailwind-css-migration.md
+++ b/docs/develop/tailwind-css-migration.md
@@ -396,6 +396,7 @@ Token usage preference:
 
 - in Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`
 - in local CSS or SCSS rules, prefer using the original `--ui-*` variables directly, because `--ui-*` remains the source of truth and the Tailwind bridge exists primarily for utility-class authoring
+- when a Tailwind utility needs to reference a CSS custom property directly, prefer the Tailwind v4 shorthand such as `text-(--token)`, `bg-(--token)`, `border-(--token)`, or `shadow-(--token)` over older forms like `text-[var(--token)]` or `bg-[var(--token)]`
 
 Bridge naming and text-token preference:
 
@@ -529,6 +530,30 @@ Preferred style:
 - if the wrapper already owns the root layout semantics, use an outer wrapper for positioning concerns such as `absolute`, `top`, `left`, and `z-index`
 - for one-off width/height overrides on wrapper roots such as `UIIcon`, prefer inline `style` when that is the shortest and clearest way to win the cascade
 
+### 10.5. Keep Scrollbar-Reserve Padding And Its Comments In Local CSS
+
+Some scroll containers use asymmetric padding together with `scrollbar-width: thin` so optional scrollbars do not overlap content.
+
+Preferred style:
+
+- when the original local CSS includes a comment that explains scrollbar-reserve padding, keep that padding in local CSS instead of moving it fully into Tailwind utilities
+- preserve comments such as "no right padding to allow optional scrollbar" when they still describe a real layout constraint
+- this applies especially to scroll wrappers like list panels or sidebars where `padding-right: 0` is intentional rather than a generic spacing choice
+
+Rule of thumb:
+
+- if `scrollbar-width: thin` and asymmetric padding belong to the same layout constraint, keep them together in the local CSS block
+
+### 10.6. Flatten `:deep(...)` Selectors In Plain Scoped CSS
+
+When a file is migrated from SCSS to plain scoped CSS, nested `:deep(...)` forms should not be carried over mechanically.
+
+Preferred style:
+
+- in plain `<style scoped>`, write explicit flat selectors such as `.preview :deep(svg)` instead of nested forms like `.preview { :deep(svg) { ... } }`
+- be especially careful in `v-html` or raw-SVG cases, where the descendant content does not receive the component's scoped attribute and depends on the `:deep(...)` selector being compiled correctly
+- keep SCSS-style nesting only in files that still explicitly use SCSS
+
 ### 11. Keep Exact Local Values Local, With A Visible TODO
 
 Some migrated components still need exact local visual values that are not part of the current token system.
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 3fb2a4822..f968cabdb 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -108,6 +108,8 @@ When working with backend unique string identifiers such as `username`, project
 * Use `:style` for one-off values that are clearer inline than as Tailwind arbitrary values or custom utilities.
 * For important or non-obvious background assets, prefer TypeScript imports plus inline `backgroundImage` binding over Tailwind `bg-[url(...)]` classes.
 * Before styling `UIImg`, `UIIcon`, or similar wrappers with root-level positioning or sizing utilities, check whether the component already styles its own root element. If those internal root styles conflict, prefer an outer wrapper for layout and inline `style` for one-off width/height overrides.
+* If a scroll container keeps `scrollbar-width: thin` together with asymmetric padding to reserve optional scrollbar space, keep that padding in local CSS and preserve any existing explanatory comment instead of forcing the padding into template utilities.
+* In plain `<style scoped>`, flatten `:deep(...)` selectors such as `.preview :deep(svg)` instead of carrying over nested SCSS-style forms like `.preview { :deep(svg) { ... } }`, especially for `v-html` or injected SVG content.
 * Do not introduce setup variables for single-use style values unless they are reused, computed, or materially improve readability.
 * When a non-token visual value needs to remain exact and local, keep it local instead of forcing it into the global token bridge. Add a nearby comment such as `TODO: review this ... value` so it is visible in later design cleanup or tokenization work.
 * When extending the Tailwind theme bridge in `src/app.css`, choose token names that do not collide with Tailwind defaults or existing UI-library class names. Define text-size tokens before using named utilities like `text-24`, and use `--text-*-line-height` when a named text utility should carry a default line-height.
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 77763fb95..16b5bf6f0 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -195,6 +195,9 @@
   --color-dividing-line-2: var(--ui-color-dividing-line-2, #eaeff3);
   --color-border: var(--ui-color-border, #cbd2d8);
 
+  --color-black: #000;
+  --color-white: #fff;
+
   /* Typography tokens bridged from the UI token layer. */
   --font-sans: var(
     --ui-font-family-main,
diff --git a/spx-gui/src/components/course/management/CourseItemMini.vue b/spx-gui/src/components/course/management/CourseItemMini.vue
index c8952cc94..1c1e67f87 100644
--- a/spx-gui/src/components/course/management/CourseItemMini.vue
+++ b/spx-gui/src/components/course/management/CourseItemMini.vue
@@ -20,7 +20,7 @@ const thumbnailUrl = useAsyncComputedLegacy(async (onCleanup) => {
 
 <template>
   <div
-    class="course-item-mini flex items-center rounded-1 border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
+    class="flex items-center rounded-1 border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
     :class="{
       'cursor-pointer hover:bg-primary-100': interactive,
       'border-grey-400 bg-grey-100': highlighted,
diff --git a/spx-gui/src/components/course/management/CourseSelector.vue b/spx-gui/src/components/course/management/CourseSelector.vue
index 937d92436..275c5839f 100644
--- a/spx-gui/src/components/course/management/CourseSelector.vue
+++ b/spx-gui/src/components/course/management/CourseSelector.vue
@@ -51,16 +51,20 @@ const availableCourses = computed(() => {
             : $t({ en: 'All courses have been selected', zh: '所有课程都已选择' })
         "
       />
-      <div v-else class="flex flex-col gap-2 [&_.course-item-mini:hover_.action-icon]:text-primary-600">
+      <div v-else class="flex flex-col gap-2">
         <CourseItemMini
           v-for="course in availableCourses"
           :key="course.id"
           :course="course"
           interactive
+          class="group"
           @click="emit('select', course.id)"
         >
           <template #suffix>
-            <UIIcon class="action-icon shrink-0 text-grey-400 transition-colors duration-200" type="plus" />
+            <UIIcon
+              class="shrink-0 text-grey-400 transition-colors duration-200 group-hover:text-primary-600"
+              type="plus"
+            />
           </template>
         </CourseItemMini>
       </div>
diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index 5e13274e9..c487d7310 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -1,9 +1,10 @@
 <template>
   <!-- Using v-show preserves some page states, e.g. code editor scroll pos -->
+  <!-- overflow-visible: avoid cutting dropdown menu of CodeTextEditor (monaco) -->
   <UICard
     v-show="isPreviewMode"
     v-radar="{ name: `Editor for ${selected.type}`, desc: `Main editor panel for editing ${selected.type}` }"
-    class="main"
+    class="relative flex min-w-0 flex-[1_1_0] flex-col overflow-visible!"
   >
     <!--
       TODO: optimize performance for switching between editors, which corresponds to selection change.
@@ -21,7 +22,7 @@
     <StageEditor v-else-if="selected.type === 'stage'" :stage="project.stage" :state="editorCtx.state.stageState" />
     <EditorPlaceholder v-else />
   </UICard>
-  <div v-show="isPreviewMode" class="sider">
+  <div v-show="isPreviewMode" class="flex min-w-0 shrink-0 grow-0 basis-[496px] flex-col gap-middle">
     <EditorPreview />
     <EditorPanels />
   </div>
@@ -55,21 +56,3 @@ function handleSpriteSelect(spriteId: string | null) {
   editorCtx.state.selectSprite(spriteId)
 }
 </script>
-
-<style scoped lang="scss">
-.main {
-  position: relative;
-  flex: 1 1 0;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: visible; // avoid cutting dropdown menu of CodeTextEditor (monaco)
-}
-.sider {
-  flex: 0 0 496px;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-gap-middle);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
index 3b88d749b..53ae32f46 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
@@ -9,30 +9,22 @@ defineProps<{
 </script>
 
 <template>
-  <div class="definition-overview-wrapper">
-    <CodeView class="code" mode="inline" :inlay-hints="inlayHints"><slot></slot></CodeView>
+  <div class="flex text-12/[1.75] text-title">
+    <CodeView class="def-overview-code" mode="inline" :inlay-hints="inlayHints"><slot></slot></CodeView>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.definition-overview-wrapper {
-  display: flex;
-  color: var(--ui-color-title);
+<style scoped>
+.def-overview-code {
+  flex: 1 1 0;
+  word-break: break-word;
 
-  font-size: 12px;
-  line-height: 1.75;
-
-  .code {
-    flex: 1 1 0;
-    word-break: break-word;
-
-    // Clear style from `code` in `MarkdownView`
-    font-size: inherit;
-    line-height: inherit;
-    padding: 0;
-    border-radius: 0;
-    border: none;
-    background: none;
-  }
+  /* Clear style from `code` in `MarkdownView`. */
+  font-size: inherit;
+  line-height: inherit;
+  padding: 0;
+  border-radius: 0;
+  border: none;
+  background: none;
 }
 </style>
diff --git a/spx-gui/src/components/editor/common/AnglePicker.vue b/spx-gui/src/components/editor/common/AnglePicker.vue
index 620f0721b..0d200c398 100644
--- a/spx-gui/src/components/editor/common/AnglePicker.vue
+++ b/spx-gui/src/components/editor/common/AnglePicker.vue
@@ -30,11 +30,16 @@ watch(angle, (v) => (modelValue.value = normalizeDegree(v)))
 </script>
 
 <template>
-  <div class="angle-picker">
+  <div class="grid grid-cols-[1fr_max-content_1fr] content-center justify-center text-center">
     <UITag
       v-for="direction in specialDirections"
       :key="direction.name"
-      :class="[direction.name.toLowerCase()]"
+      :class="{
+        'col-start-2 row-start-1 justify-self-center': direction.name.toLowerCase() === 'up',
+        'col-start-2 row-start-3 justify-self-center': direction.name.toLowerCase() === 'down',
+        'col-start-1 row-start-2 self-center justify-self-end': direction.name.toLowerCase() === 'left',
+        'col-start-3 row-start-2 self-center': direction.name.toLowerCase() === 'right'
+      }"
       :checkable="{ checked: modelValue === direction.value }"
       variant="none"
       @click="modelValue = direction.value"
@@ -42,7 +47,7 @@ watch(angle, (v) => (modelValue.value = normalizeDegree(v)))
     >
     <svg
       ref="svgEl"
-      class="picker"
+      class="col-start-2 row-start-2 m-1 self-center justify-self-center"
       width="140"
       height="140"
       viewBox="0 0 140 140"
@@ -122,46 +127,3 @@ watch(angle, (v) => (modelValue.value = normalizeDegree(v)))
     </svg>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.angle-picker {
-  display: grid;
-  grid-template-columns: 1fr max-content 1fr;
-  justify-content: center;
-  align-content: center;
-  text-align: center;
-}
-
-.picker {
-  grid-column: 2;
-  grid-row: 2;
-  margin: 4px;
-  justify-self: center;
-  align-self: center;
-}
-
-.up {
-  grid-column: 2;
-  grid-row: 1;
-  justify-self: center;
-}
-
-.down {
-  grid-column: 2;
-  grid-row: 3;
-  justify-self: center;
-}
-
-.left {
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-  justify-self: right;
-}
-
-.right {
-  grid-column: 3;
-  grid-row: 2;
-  align-self: center;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/EditorHeader.vue b/spx-gui/src/components/editor/common/EditorHeader.vue
index f0632a70b..32ed86df0 100644
--- a/spx-gui/src/components/editor/common/EditorHeader.vue
+++ b/spx-gui/src/components/editor/common/EditorHeader.vue
@@ -1,21 +1,10 @@
 <!-- Header for Sprite/Sound/Stage Editor -->
 
 <template>
-  <div class="editor-header">
+  <div class="flex h-11 items-center justify-between border-b border-grey-400 pr-middle">
     <slot></slot>
     <div class="extra">
       <slot name="extra"></slot>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.editor-header {
-  height: 44px;
-  display: flex;
-  padding-right: var(--ui-gap-middle);
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--ui-color-grey-400);
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/EditorItemDetail.vue b/spx-gui/src/components/editor/common/EditorItemDetail.vue
index ac5a598fe..55723c9d0 100644
--- a/spx-gui/src/components/editor/common/EditorItemDetail.vue
+++ b/spx-gui/src/components/editor/common/EditorItemDetail.vue
@@ -1,13 +1,13 @@
 <template>
   <main
     v-radar="{ name: `Detail for \u0022${name}\u0022`, desc: `Detail view of the selected item \u0022${name}\u0022` }"
-    class="editor-item-detail"
+    class="flex-[1_1_0] flex flex-col gap-5 rounded-br-3 bg-grey-200 px-5 py-6"
   >
-    <h4 class="name">
+    <h4 class="flex items-center justify-center gap-1">
       <AssetName>{{ name }}</AssetName>
       <UIIcon
         v-radar="{ name: 'Rename button', desc: 'Click to rename the selected item' }"
-        class="edit-icon"
+        class="cursor-pointer text-grey-900 transition-colors hover:text-grey-800 active:text-grey-1000"
         :title="$t({ en: 'Rename', zh: '重命名' })"
         type="edit"
         @click="emit('rename')"
@@ -29,33 +29,3 @@ const emit = defineEmits<{
   rename: []
 }>()
 </script>
-
-<style lang="scss" scoped>
-.editor-item-detail {
-  flex: 1 1 0;
-  padding: 24px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  background-color: var(--ui-color-grey-200);
-  border-bottom-right-radius: var(--ui-border-radius-3);
-}
-
-.name {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-
-.edit-icon {
-  cursor: pointer;
-  color: var(--ui-color-grey-900);
-  &:hover {
-    color: var(--ui-color-grey-800);
-  }
-  &:active {
-    color: var(--ui-color-grey-1000);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/EditorList.vue b/spx-gui/src/components/editor/common/EditorList.vue
index c6aa21e0f..b0d3d408c 100644
--- a/spx-gui/src/components/editor/common/EditorList.vue
+++ b/spx-gui/src/components/editor/common/EditorList.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="editor-list" :style="cssVars">
-    <div class="sider">
-      <div ref="itemsWrapper" v-radar="listRadarInfo" class="items">
+  <div class="flex-[1_1_0] flex" :style="cssVars">
+    <div class="flex-[0_0_auto] flex flex-col border-r border-dividing-line-2">
+      <div
+        ref="itemsWrapper"
+        v-radar="listRadarInfo"
+        class="items mx-1.5 flex-[1_1_0] flex flex-col gap-2 overflow-y-auto"
+      >
         <slot></slot>
       </div>
       <UIDropdownWithTooltip>
@@ -12,7 +16,10 @@
           {{ $t(addText) }}
         </template>
         <template #trigger>
-          <button v-radar="addButtonRadarInfo" class="add">
+          <button
+            v-radar="addButtonRadarInfo"
+            class="relative z-1 h-11 flex-[0_0_auto] cursor-pointer flex items-center justify-center rounded-bl-3 border-none bg-(--editor-list-color-main) text-grey-100 hover:bg-(--editor-list-color-400) active:bg-(--editor-list-color-600)"
+          >
             <UIIcon type="plus" />
           </button>
         </template>
@@ -78,66 +85,23 @@ useDragSortable(sortableList, itemsWrapper, {
 })
 </script>
 
-<style scoped lang="scss">
-.editor-list {
-  flex: 1 1 0;
-  display: flex;
-  justify-content: stretch;
-}
-
-.sider {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--ui-color-dividing-line-2);
-}
-
+<style scoped>
 .items {
-  flex: 1 1 0;
-  overflow-y: auto;
-  margin: 0 6px;
-  // Here we keep the horizontal padding no more than `10px`,
-  // as SortableJS uses `10` as `spacer` when deciding whether to put dragging item to the end of the list.
-  // Padding no more than `10px` disables the `_ghostIsLast` check.
-  // See details in https://github.com/SortableJS/Sortable/blob/ddd059717333d07b5b1125b7e1dc89514734bcf0/src/Sortable.js#L1822
+  /* Here we keep the horizontal padding no more than `10px`, */
+  /* as SortableJS uses `10` as `spacer` when deciding whether to put dragging item to the end of the list. */
+  /* Padding no more than `10px` disables the `_ghostIsLast` check. */
+  /* See details in https://github.com/SortableJS/Sortable/blob/ddd059717333d07b5b1125b7e1dc89514734bcf0/src/Sortable.js#L1822 */
   padding: 12px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  :deep(.sortable-ghost-item) {
-    // Shadow-like effect
-    // TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem`
-    border-color: var(--ui-color-grey-400) !important;
-    background-color: var(--ui-color-grey-400) !important;
-    * {
-      visibility: hidden;
-    }
-  }
 }
 
-.add {
-  flex: 0 0 auto;
-  justify-self: stretch;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-bottom-left-radius: var(--ui-border-radius-3);
-  cursor: pointer;
-  color: var(--ui-color-grey-100);
-  background: var(--editor-list-color-main);
-
-  // ensure the button's outline not covered by detail content on the right side
-  position: relative;
-  z-index: 1;
+.items:deep(.sortable-ghost-item) {
+  /* Shadow-like effect */
+  /* TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem` */
+  border-color: var(--ui-color-grey-400) !important;
+  background-color: var(--ui-color-grey-400) !important;
+}
 
-  &:hover {
-    background: var(--editor-list-color-400);
-  }
-  &:active {
-    background: var(--editor-list-color-600);
-  }
+.items:deep(.sortable-ghost-item *) {
+  visibility: hidden;
 }
 </style>
diff --git a/spx-gui/src/components/editor/common/PlayControl.vue b/spx-gui/src/components/editor/common/PlayControl.vue
index dc2a76e89..f1e44c648 100644
--- a/spx-gui/src/components/editor/common/PlayControl.vue
+++ b/spx-gui/src/components/editor/common/PlayControl.vue
@@ -1,19 +1,19 @@
 <!-- Sound / video play control (only UI) -->
 
 <template>
-  <div class="play-control" :class="[`container-size-${props.size}`]" :style="colorCssVars">
-    <div v-show="!playing" class="play" @click.stop="handlePlay.fn">
-      <UIIcon class="icon" type="play" />
+  <div class="play-control" :class="[`play-control--${props.size}`]" :style="colorCssVars">
+    <div v-show="!playing" class="play-control-play" @click.stop="handlePlay.fn">
+      <UIIcon type="play" class="play-control-icon" />
     </div>
-    <div v-show="playing" class="stop" @click.stop="emit('stop')">
+    <div v-show="playing" class="play-control-stop" @click.stop="emit('stop')">
       <svg viewBox="0 0 36 36" class="progress" :style="playCssVars">
         <circle class="bg"></circle>
         <circle class="fg"></circle>
       </svg>
-      <UIIcon class="icon" type="stop" />
+      <UIIcon type="stop" class="play-control-icon" />
     </div>
     <!-- TODO: style optimization for play control -->
-    <UILoading :visible="loading" cover class="loading" />
+    <UILoading :visible="loading" cover class="play-control-loading" />
   </div>
 </template>
 
@@ -75,58 +75,65 @@ const colorCssVars = computed(() => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .play-control {
   position: relative;
+}
 
-  &.container-size-medium {
-    width: 36px;
-    height: 36px;
-  }
+.play-control--medium {
+  width: 36px;
+  height: 36px;
+}
 
-  &.container-size-large {
-    width: 48px;
-    height: 48px;
-    .icon {
-      width: 20px;
-      height: 20px;
-    }
-  }
+.play-control--large {
+  width: 48px;
+  height: 48px;
 }
 
-.play,
-.stop {
+.play-control-play,
+.play-control-stop {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-
   border-radius: 50%;
   cursor: pointer;
-
   transition: transform 0.2s;
   --color: var(--color-main);
-  &:hover {
-    transform: scale(1.15);
-    --color: var(--color-400);
-  }
-  &:active {
-    transform: scale(1.15);
-    --color: var(--color-600);
-  }
 }
 
-.play {
+.play-control-play:hover,
+.play-control-stop:hover {
+  transform: scale(1.15);
+  --color: var(--color-400);
+}
+
+.play-control-play:active,
+.play-control-stop:active {
+  transform: scale(1.15);
+  --color: var(--color-600);
+}
+
+.play-control-play {
   color: var(--ui-color-grey-100);
   background-color: var(--color);
 }
 
-.stop {
-  position: relative;
+.play-control-stop {
   color: var(--color);
 }
 
+.play-control-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.play-control--large .play-control-icon {
+  width: 20px;
+  height: 20px;
+}
+
 .progress {
   position: absolute;
   width: 100%;
@@ -137,30 +144,30 @@ const colorCssVars = computed(() => {
   --radius: calc((var(--size) - var(--stroke-width)) / 2);
   --circumference: calc(var(--radius) * pi * 2);
   --dash: calc((var(--progress) * var(--circumference)));
+}
 
-  circle {
-    cx: var(--half-size);
-    cy: var(--half-size);
-    r: var(--radius);
-    stroke-width: var(--stroke-width);
-    fill: none;
-    stroke-linecap: round;
-
-    &.bg {
-      stroke: var(--color-300);
-    }
-
-    &.fg {
-      transform: rotate(-90deg);
-      transform-origin: var(--half-size) var(--half-size);
-      stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
-      transition: stroke-dasharray var(--progress-interval) linear 0s;
-      stroke: var(--color);
-    }
-  }
+.progress circle {
+  cx: var(--half-size);
+  cy: var(--half-size);
+  r: var(--radius);
+  stroke-width: var(--stroke-width);
+  fill: none;
+  stroke-linecap: round;
+}
+
+.progress circle.bg {
+  stroke: var(--color-300);
+}
+
+.progress circle.fg {
+  transform: rotate(-90deg);
+  transform-origin: var(--half-size) var(--half-size);
+  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
+  transition: stroke-dasharray var(--progress-interval) linear 0s;
+  stroke: var(--color);
 }
 
-.loading {
+.play-control-loading {
   border-radius: 50%;
 }
 </style>
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue b/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
index 5be4eba7e..c75b5fb4c 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
@@ -61,7 +61,7 @@ const handleHeadingUpdate = wrapUpdateHandler(
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="content">
+  <div class="flex items-center gap-3">
     <UIButtonGroup
       v-radar="{ name: 'Rotation style control', desc: 'Control to set sprite rotation style' }"
       :value="sprite.rotationStyle"
@@ -113,7 +113,7 @@ const handleHeadingUpdate = wrapUpdateHandler(
           <template #prefix>{{ $t({ en: 'Heading', zh: '朝向' }) }}</template>
         </UINumberInput>
       </template>
-      <div class="rotation-heading-container">
+      <div class="flex flex-col items-center gap-3 p-3">
         <AnglePicker :model-value="sprite.heading" @update:model-value="handleHeadingUpdate" />
       </div>
     </UIDropdown>
@@ -133,19 +133,3 @@ const handleHeadingUpdate = wrapUpdateHandler(
     </UIButtonGroup>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.content {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.rotation-heading-container {
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue b/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue
index 466b92ed3..aba9e0a58 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue
@@ -90,7 +90,7 @@ function getCheckedPhysicsFlags(physicsMode: PhysicsMode): PhysicsFlag[] {
 </script>
 
 <template>
-  <UICheckboxGroup class="check-group" :value="checkedPhysicsFlags" @update:value="handlePhysicsFlagsChange">
+  <UICheckboxGroup class="whitespace-nowrap" :value="checkedPhysicsFlags" @update:value="handlePhysicsFlagsChange">
     <UITooltip>
       <template #trigger>
         <UICheckbox
@@ -139,9 +139,3 @@ function getCheckedPhysicsFlags(physicsMode: PhysicsMode): PhysicsFlag[] {
     </UITooltip>
   </UICheckboxGroup>
 </template>
-
-<style lang="scss" scoped>
-.check-group {
-  white-space: nowrap;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue b/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue
index b5c766eee..43bed64dc 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue
@@ -35,7 +35,7 @@ const handleSizePercentUpdate = wrapUpdateHandler((sizeInPercent: number | null)
 </script>
 
 <template>
-  <div class="content">
+  <div class="flex items-center gap-3">
     <UINumberInput
       v-radar="{ name: 'X position input', desc: 'Input to set sprite X position' }"
       :value="sprite.x"
@@ -61,11 +61,3 @@ const handleSizePercentUpdate = wrapUpdateHandler((sizeInPercent: number | null)
     </UINumberInput>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.content {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue b/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue
index bb3c585f7..728a2e075 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue
@@ -39,5 +39,3 @@ const handleVisibleUpdate = wrapUpdateHandler(
     </UIButtonGroupItem>
   </UIButtonGroup>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/common/viewer/PositionIndicator.vue b/spx-gui/src/components/editor/common/viewer/PositionIndicator.vue
index 95c83b6e9..3cdc74594 100644
--- a/spx-gui/src/components/editor/common/viewer/PositionIndicator.vue
+++ b/spx-gui/src/components/editor/common/viewer/PositionIndicator.vue
@@ -26,26 +26,10 @@ watch(
 </script>
 
 <template>
-  <div class="position-indicator" :class="{ visible }">{{ position?.x ?? 0 }}, {{ position?.y ?? 0 }}</div>
+  <div
+    class="pointer-events-none absolute top-2 left-1/2 rounded-[4px] bg-black/30 px-1.5 py-0.5 text-12 text-white transition-opacity -translate-x-1/2"
+    :class="visible ? 'opacity-100' : 'opacity-0'"
+  >
+    {{ position?.x ?? 0 }}, {{ position?.y ?? 0 }}
+  </div>
 </template>
-
-<style lang="scss" scoped>
-.position-indicator {
-  position: absolute;
-  top: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 2px 6px;
-  background: rgba(0, 0, 0, 0.3);
-  color: white;
-  font-size: 12px;
-  border-radius: 4px;
-  pointer-events: none;
-
-  transition: opacity 0.2s;
-  opacity: 0;
-  &.visible {
-    opacity: 1;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue b/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue
index 1c89ab77f..03aae2e9f 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue
@@ -97,7 +97,7 @@ onBeforeUnmount(() => clearTimeout(timer))
 <template>
   <div
     ref="quickConfigRef"
-    class="quick-config"
+    class="p-1"
     @focusin="handleInteractionStart"
     @focusout="handleInteractionEnd"
     @mouseenter="handleInteractionStart"
@@ -106,10 +106,3 @@ onBeforeUnmount(() => clearTimeout(timer))
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss">
-.quick-config {
-  position: absolute;
-  padding: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue b/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
index cb1229d5c..76a43ba67 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
@@ -37,5 +37,3 @@ function backToDefault() {
   />
   <DefaultConfigPanel v-else-if="configType === 'default'" :local-config="localConfig" :project="project" />
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue b/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue
index 89206f7cd..98879e017 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue
@@ -35,5 +35,3 @@ function backToDefault() {
   />
   <DefaultConfigPanel v-else-if="configType === 'default'" :local-config="localConfig" :project="project" />
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
index b4bb3e22f..7fa9487da 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
@@ -8,34 +8,14 @@ const slots = useSlots()
 </script>
 
 <template>
-  <div class="config-item">
-    <UIIcon v-if="slots.default == null && icon != null" class="icon" :type="icon" />
+  <div
+    class="group flex h-8 w-8 cursor-pointer items-center justify-center rounded-[10px] text-center hover:bg-turquoise-200 [&.active]:bg-turquoise-200"
+  >
+    <UIIcon
+      v-if="slots.default == null && icon != null"
+      class="text-grey-1000 group-hover:text-turquoise-500 group-[.active]:text-turquoise-500"
+      :type="icon"
+    />
     <slot v-else></slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.config-item {
-  width: 32px;
-  height: 32px;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  cursor: pointer;
-
-  .icon {
-    color: var(--ui-color-grey-1000);
-  }
-
-  &:hover,
-  &.active {
-    background: var(--ui-color-turquoise-200);
-
-    .icon {
-      color: var(--ui-color-turquoise-500);
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
index 6280dd384..1d0d65939 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
@@ -1,18 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="config-panel">
+  <div class="h-9 w-fit rounded-2 border-2 border-grey-100 bg-grey-100 shadow-big">
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.config-panel {
-  width: fit-content;
-  height: 36px;
-  border: 2px solid var(--ui-color-grey-100);
-  border-radius: var(--ui-border-radius-2);
-  background: var(--ui-color-grey-100);
-  box-shadow: var(--ui-box-shadow-big);
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue
index a4b96f14d..fd2fd76c3 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue
@@ -32,10 +32,10 @@ onBeforeUnmount(() => {
 
 <template>
   <ConfigPanel>
-    <div class="position-config-wrapper">
+    <div class="flex items-center gap-1">
       <UINumberInput
         v-radar="{ name: 'X position input', desc: `Input to set ${name} X position` }"
-        class="position-input"
+        class="w-18"
         :value="localConfig.x"
         @update:value="handleUpdateX($event ?? 0)"
       >
@@ -43,7 +43,7 @@ onBeforeUnmount(() => {
       </UINumberInput>
       <UINumberInput
         v-radar="{ name: 'Y position input', desc: `Input to set ${name} Y position` }"
-        class="position-input"
+        class="w-18"
         :value="localConfig.y"
         @update:value="handleUpdateY($event ?? 0)"
       >
@@ -59,15 +59,3 @@ onBeforeUnmount(() => {
     </div>
   </ConfigPanel>
 </template>
-
-<style lang="scss" scoped>
-.position-config-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.position-input {
-  width: 72px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue
index 954eee00b..8e841872e 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue
@@ -27,10 +27,10 @@ onBeforeUnmount(() => handleSizePercentUpdate.cancel())
 
 <template>
   <ConfigPanel>
-    <div class="size-config-wrapper">
+    <div class="flex items-center gap-1">
       <UINumberInput
         v-radar="{ name: 'Size input', desc: `Input to set ${name} size percentage` }"
-        class="size-input"
+        class="w-25.5"
         :min="0"
         :value="round(localConfig.size * 100)"
         @update:value="handleSizePercentUpdate"
@@ -48,15 +48,3 @@ onBeforeUnmount(() => handleSizePercentUpdate.cancel())
     </div>
   </ConfigPanel>
 </template>
-
-<style lang="scss" scoped>
-.size-config-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.size-input {
-  width: 102px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigDropdown.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigDropdown.vue
index adba8a8aa..4496cdb2b 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigDropdown.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigDropdown.vue
@@ -30,35 +30,28 @@ function moveZorder(action: MoveAction) {
     <UIMenu>
       <UIMenuItem
         v-radar="{ name: 'Move up', desc: `Click to move ${type} up in z-order` }"
-        class="item"
+        class="w-full whitespace-nowrap"
         @click="moveZorder('up')"
         >{{ $t(moveActionNames.up) }}</UIMenuItem
       >
       <UIMenuItem
         v-radar="{ name: 'Move to top', desc: `Click to move ${type} to top in z-order` }"
-        class="item"
+        class="w-full whitespace-nowrap"
         @click="moveZorder('top')"
         >{{ $t(moveActionNames.top) }}</UIMenuItem
       >
       <UIMenuItem
         v-radar="{ name: 'Move down', desc: `Click to move ${type} down in z-order` }"
-        class="item"
+        class="w-full whitespace-nowrap"
         @click="moveZorder('down')"
         >{{ $t(moveActionNames.down) }}</UIMenuItem
       >
       <UIMenuItem
         v-radar="{ name: 'Move to bottom', desc: `Click to move ${type} to bottom in z-order` }"
-        class="item"
+        class="w-full whitespace-nowrap"
         @click="moveZorder('bottom')"
         >{{ $t(moveActionNames.bottom) }}</UIMenuItem
       >
     </UIMenu>
   </UIDropdown>
 </template>
-
-<style lang="scss" scoped>
-.item {
-  width: 100%;
-  white-space: nowrap;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue
index d7b9f0aed..c7c6e25d9 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue
@@ -43,7 +43,7 @@ async function moveZorder(direction: MoveAction) {
       desc: 'Quick config for sprite position, rotation, size and layer order'
     }"
   >
-    <div class="default-config-wrapper">
+    <div class="flex items-center gap-1">
       <UITooltip>
         {{ $t({ en: 'Position', zh: '位置' }) }}
         <template #trigger>
@@ -73,11 +73,3 @@ async function moveZorder(direction: MoveAction) {
     </div>
   </ConfigPanel>
 </template>
-
-<style lang="scss" scoped>
-.default-config-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/sprite/RotationConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/RotationConfigPanel.vue
index 138279650..6335b84e1 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/sprite/RotationConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/RotationConfigPanel.vue
@@ -86,7 +86,7 @@ onBeforeUnmount(() => handleUpdateHeadingDebounced.cancel())
       desc: 'Quick config for sprite rotation style and values'
     }"
   >
-    <div class="rotation-config-wrapper">
+    <div class="flex items-center gap-1">
       <UIButtonGroup
         v-radar="{ name: 'Rotation style control', desc: 'Control to set sprite rotation style' }"
         :value="localConfig.rotationStyle"
@@ -111,7 +111,7 @@ onBeforeUnmount(() => handleUpdateHeadingDebounced.cancel())
         <template #trigger>
           <UINumberInput
             v-radar="{ name: 'Heading input', desc: 'Input to set sprite heading angle' }"
-            class="heading-input"
+            class="w-30"
             :min="-180"
             :max="180"
             :value="localConfig.heading"
@@ -121,7 +121,7 @@ onBeforeUnmount(() => handleUpdateHeadingDebounced.cancel())
             <template #prefix>{{ $t({ en: 'Heading', zh: '朝向' }) }}</template>
           </UINumberInput>
         </template>
-        <div class="heading-picker-container">
+        <div class="w-max p-3">
           <AnglePicker
             :model-value="localConfig.heading"
             @update:model-value="handleUpdateHeadingDebounced($event ?? 0)"
@@ -152,20 +152,3 @@ onBeforeUnmount(() => handleUpdateHeadingDebounced.cancel())
     </div>
   </ConfigPanel>
 </template>
-
-<style lang="scss" scoped>
-.rotation-config-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.heading-input {
-  width: 120px;
-}
-
-.heading-picker-container {
-  padding: 12px;
-  width: max-content;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue
index 8616885cd..fcdb0dd29 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue
@@ -40,7 +40,7 @@ async function moveZorder(direction: MoveAction) {
   <ConfigPanel
     v-radar="{ name: 'Widget Quick Config Panel', desc: 'Quick config for widget position, size and layer order' }"
   >
-    <div class="default-config-wrapper">
+    <div class="flex items-center gap-1">
       <UITooltip>
         {{ $t({ en: 'Position', zh: '位置' }) }}
         <template #trigger>
@@ -64,11 +64,3 @@ async function moveZorder(direction: MoveAction) {
     </div>
   </ConfigPanel>
 </template>
-
-<style lang="scss" scoped>
-.default-config-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue b/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
index 29ae24f04..ab67c8256 100644
--- a/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
+++ b/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
@@ -11,36 +11,18 @@ defineProps<{
 </script>
 
 <template>
-  <div class="map-basic-config">
-    <div class="config-item">
-      <div class="label">{{ $t({ en: 'Map size', zh: '地图尺寸' }) }}</div>
+  <div class="flex flex-col gap-middle">
+    <div class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Map size', zh: '地图尺寸' }) }}</div>
       <MapSizeInput :project="project" />
     </div>
-    <div class="config-item">
-      <div class="label">{{ $t({ en: 'Physics', zh: '物理特性' }) }}</div>
+    <div class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Physics', zh: '物理特性' }) }}</div>
       <MapPhysicsInput :project="project" />
     </div>
-    <div v-if="project.stage.physics.enabled" class="config-item">
-      <div class="label">{{ $t({ en: 'Layer Sorting', zh: '层级排序' }) }}</div>
+    <div v-if="project.stage.physics.enabled" class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Layer Sorting', zh: '层级排序' }) }}</div>
       <MapLayerSortInput :project="project" />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.map-basic-config {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-gap-middle);
-}
-
-.config-item {
-  display: flex;
-  align-items: center;
-
-  .label {
-    white-space: nowrap;
-    margin-right: 16px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue b/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue
index 124d6772a..6d00f56fd 100644
--- a/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue
+++ b/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue
@@ -45,5 +45,3 @@ const handleLayerSortModeChange = (v: string | null) => {
     </UITooltip>
   </UIRadioGroup>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue b/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue
index 4a7064c1d..b82eb961e 100644
--- a/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue
+++ b/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue
@@ -31,5 +31,3 @@ const handlePhysicsEnabledChange = (v: boolean) => {
     @update:value="handlePhysicsEnabledChange"
   />
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/map-editor/MapSizeInput.vue b/spx-gui/src/components/editor/map-editor/MapSizeInput.vue
index c847a49fb..20ca5686b 100644
--- a/spx-gui/src/components/editor/map-editor/MapSizeInput.vue
+++ b/spx-gui/src/components/editor/map-editor/MapSizeInput.vue
@@ -26,7 +26,7 @@ const handleHeightChange = debounce((v: number | null) => {
 </script>
 
 <template>
-  <div class="inputs">
+  <div class="flex gap-2">
     <UINumberInput
       v-radar="{ name: 'width input', desc: 'Input to set map width' }"
       :value="project.stage.mapWidth"
@@ -43,11 +43,3 @@ const handleHeightChange = debounce((v: number | null) => {
     </UINumberInput>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.inputs {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue b/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
index 56762a704..892f48cef 100644
--- a/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
+++ b/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
@@ -46,21 +46,21 @@ const handleEditCollision = useMessageHandle(
 </script>
 
 <template>
-  <div class="header">
+  <div class="flex h-7 items-center text-title">
     <AssetName>{{ sprite.name }}</AssetName>
     <UIIcon
       v-radar="{ name: 'Rename button', desc: 'Button to rename the sprite' }"
-      class="icon"
+      class="cursor-pointer text-grey-900 transition-colors hover:text-grey-800 active:text-grey-1000"
       :title="$t({ en: 'Rename', zh: '重命名' })"
       type="edit"
       @click="handleNameEdit"
     />
-    <div class="spacer" />
+    <div class="flex-1" />
     <UITooltip>
       <template #trigger>
         <UIIcon
           v-radar="{ name: 'Collapse button', desc: 'Button to collapse the sprite basic configuration panel' }"
-          class="icon"
+          class="cursor-pointer text-grey-900 transition-colors hover:text-grey-800 active:text-grey-1000"
           type="doubleArrowDown"
           @click="emit('collapse')"
         />
@@ -73,63 +73,23 @@ const handleEditCollision = useMessageHandle(
       }}
     </UITooltip>
   </div>
-  <div class="config-wrapper">
+  <div class="flex flex-col gap-middle">
     <SpritePositionSize :sprite="sprite" :project="project" />
-    <div class="config-item">
-      <div class="label">{{ $t({ en: 'Rotation', zh: '旋转' }) }}</div>
+    <div class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Rotation', zh: '旋转' }) }}</div>
       <SpriteDirection :sprite="sprite" :project="project" />
     </div>
-    <div class="config-item">
-      <div class="label">{{ $t({ en: 'Show', zh: '显示' }) }}</div>
+    <div class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Show', zh: '显示' }) }}</div>
       <SpriteVisible :sprite="sprite" :project="project" />
     </div>
-    <div v-if="project.stage.physics.enabled" class="config-item">
-      <div class="label">{{ $t({ en: 'Physics', zh: '物理特性' }) }}</div>
+    <div v-if="project.stage.physics.enabled" class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Physics', zh: '物理特性' }) }}</div>
       <SpritePhysics :sprite="sprite" :project="project" />
     </div>
-    <div v-if="isCollisionSettingsEnabled" class="config-item">
-      <div class="label">{{ $t({ en: 'Collision settings', zh: '碰撞设置' }) }}</div>
+    <div v-if="isCollisionSettingsEnabled" class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Collision settings', zh: '碰撞设置' }) }}</div>
       <UIButton icon="setting" color="secondary" variant="flat" @click="handleEditCollision"></UIButton>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  height: 28px;
-  color: var(--ui-color-title);
-  display: flex;
-  align-items: center;
-}
-
-.icon {
-  cursor: pointer;
-  color: var(--ui-color-grey-900);
-  &:hover {
-    color: var(--ui-color-grey-800);
-  }
-  &:active {
-    color: var(--ui-color-grey-1000);
-  }
-}
-
-.spacer {
-  flex: 1;
-}
-
-.config-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-gap-middle);
-
-  .config-item {
-    display: flex;
-    align-items: center;
-
-    .label {
-      white-space: nowrap;
-      margin-right: 16px;
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
index 252b0f7e7..af72d7169 100644
--- a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
@@ -83,7 +83,7 @@ const handleGenerate = useMessageHandle(
 <template>
   <UICard
     v-radar="{ name: 'Map Editor\'s Sprite List', desc: 'List of all sprites in the Map Editor' }"
-    class="sprite-list-card"
+    class="relative flex flex-col"
     :style="cssVars"
   >
     <PanelHeader :active="selectedSprite != null">
@@ -112,7 +112,7 @@ const handleGenerate = useMessageHandle(
       </template>
     </PanelHeader>
 
-    <SpriteList class="list-wrapper" />
+    <SpriteList class="flex-1" />
 
     <PanelFooter
       v-if="footerExpanded && selectedSprite != null"
@@ -120,7 +120,7 @@ const handleGenerate = useMessageHandle(
         name: `Basic configuration for selected sprite`,
         desc: 'Panel for configuring sprite basic settings'
       }"
-      class="footer"
+      class="p-middle"
     >
       <SpriteBasicConfig :sprite="selectedSprite" :project="project" @collapse="footerExpanded = false" />
     </PanelFooter>
@@ -132,47 +132,13 @@ const handleGenerate = useMessageHandle(
             name: 'Expand button',
             desc: 'Button to expand the basic configuration panel for selected sprite'
           }"
-          class="footer-expand-button"
+          class="absolute right-3 bottom-0 flex h-6 w-6 cursor-pointer items-center justify-center bg-grey-300 shadow-small"
           @click="footerExpanded = true"
         >
-          <UIIcon class="footer-expand-icon" type="doubleArrowDown" />
+          <UIIcon class="rotate-180" type="doubleArrowDown" />
         </div>
       </template>
       {{ $t({ en: 'Expand', zh: '展开' }) }}
     </UITooltip>
   </UICard>
 </template>
-
-<style lang="scss" scoped>
-.sprite-list-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  .list-wrapper {
-    flex: 1;
-  }
-}
-
-.footer {
-  padding: 16px;
-}
-
-.footer-expand-button {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  right: 12px;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0px -2px 8px 0px rgba(51, 51, 51, 0.08);
-  background-color: var(--ui-color-grey-300);
-  cursor: pointer;
-}
-
-.footer-expand-icon {
-  transform: rotate(180deg);
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue b/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
index 47cd9d08a..90977a546 100644
--- a/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
+++ b/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
@@ -5,6 +5,7 @@ import Konva from 'konva'
 import type { KonvaEventObject } from 'konva/lib/Node'
 import type { LayerConfig } from 'konva/lib/Layer'
 
+import stageBgUrl from '@/assets/images/stage-bg.svg'
 import { UILoading } from '@/components/ui'
 import { useContentSize } from '@/utils/dom'
 import { useFileUrl } from '@/utils/file'
@@ -525,7 +526,8 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
       name: 'Map viewer',
       desc: 'View and manipulate the map and sprites on the map. Click on sprite to select it.'
     }"
-    class="map-viewer"
+    class="relative flex h-full w-full items-center justify-center overflow-hidden rounded-3 bg-center bg-repeat bg-contain"
+    :style="{ backgroundImage: `url(${stageBgUrl})` }"
     @mousemove="updateMousePos"
   >
     <v-stage v-if="stageConfig != null" ref="stageRef" :config="stageConfig" @wheel="handleWheel">
@@ -563,36 +565,14 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
         />
       </v-layer>
     </v-stage>
-    <QuickConfigWrapper v-if="!loading && localConfigRef != null" ref="quickConfigRef" class="quick-config">
-      <SpriteQuickConfig v-if="localConfigRef != null" :local-config="localConfigRef" :project="project" />
-    </QuickConfigWrapper>
+    <div v-if="!loading && localConfigRef != null" class="absolute left-0 top-0">
+      <QuickConfigWrapper ref="quickConfigRef">
+        <SpriteQuickConfig v-if="localConfigRef != null" :local-config="localConfigRef" :project="project" />
+      </QuickConfigWrapper>
+    </div>
 
     <PositionIndicator :position="mousePos" />
 
     <UILoading :visible="loading" cover />
   </div>
 </template>
-
-<style scoped>
-.map-viewer {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border-radius: var(--ui-border-radius-3);
-  overflow: hidden;
-  background-image: url(@/assets/images/stage-bg.svg);
-  background-position: center;
-  background-repeat: repeat;
-  background-size: contain;
-  position: relative;
-}
-
-.quick-config {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/ConsolePanel.vue b/spx-gui/src/components/editor/panels/ConsolePanel.vue
index 84a1c324d..f455b8b6e 100644
--- a/spx-gui/src/components/editor/panels/ConsolePanel.vue
+++ b/spx-gui/src/components/editor/panels/ConsolePanel.vue
@@ -48,79 +48,60 @@ const initializingError = computed(() => {
 </script>
 
 <template>
-  <UICard class="console-panel">
+  <UICard
+    class="flex flex-col"
+    style="--console-panel-text-color: var(--ui-color-grey-1000); --console-panel-tip-color: var(--ui-color-grey-700)"
+  >
     <UICardHeader>
       {{ $t({ en: 'Console', zh: '控制台' }) }}
     </UICardHeader>
-    <ul ref="outputContainerRef" class="output-container">
+    <ul ref="outputContainerRef" class="flex flex-[1_1_0] flex-col gap-1 overflow-y-auto p-3">
       <UIEmpty v-if="runtime.running.mode !== 'debug'" size="small">
         {{ $t({ en: 'Not running in debug mode', zh: '未处于调试模式' }) }}
       </UIEmpty>
       <UIEmpty v-else-if="runtime.running.initializing" size="small">
         {{ $t({ en: 'Initializing...', zh: '初始化中...' }) }}
       </UIEmpty>
-      <li v-else-if="initializingError != null" class="output kind-error">
+      <li
+        v-else-if="initializingError != null"
+        class="relative font-code text-12"
+        style="--console-panel-text-color: var(--ui-color-red-500); --console-panel-tip-color: var(--ui-color-red-300)"
+      >
         <!-- TODO: Optimize initializing-error displaying here -->
-        <span class="time">{{ humanizeTime(initializingError.time) }}</span>
-        <span class="message">{{ initializingError.message }}</span>
+        <span class="float-left mr-2 text-(--console-panel-tip-color)">
+          {{ humanizeTime(initializingError.time) }}
+        </span>
+        <span class="whitespace-pre-line break-all text-(--console-panel-text-color)">
+          {{ initializingError.message }}
+        </span>
       </li>
       <UIEmpty v-else-if="outputs.length === 0" size="small">
         {{ $t({ en: 'No output', zh: '无输出' }) }}
       </UIEmpty>
-      <li v-for="output in outputs" v-else :key="output.id" class="output" :class="`kind-${output.kind}`">
-        <span class="time">{{ humanizeTime(output.time) }}</span>
-        <CodeLink v-if="getOutputSourceLocation(output) != null" class="link" v-bind="getOutputSourceLocation(output)!">
+      <li
+        v-for="output in outputs"
+        v-else
+        :key="output.id"
+        class="relative font-code text-12"
+        :style="
+          output.kind === 'error'
+            ? {
+                '--console-panel-text-color': 'var(--ui-color-red-500)',
+                '--console-panel-tip-color': 'var(--ui-color-red-300)'
+              }
+            : null
+        "
+      >
+        <span class="float-left mr-2 text-(--console-panel-tip-color)">{{ humanizeTime(output.time) }}</span>
+        <CodeLink
+          v-if="getOutputSourceLocation(output) != null"
+          class="float-right ml-2 text-(--console-panel-tip-color)"
+          v-bind="getOutputSourceLocation(output)!"
+        >
           {{ getOutputSourceLocationText(output) }}
         </CodeLink>
-        <span class="message">{{ output.message }}</span>
+        <span class="whitespace-pre-line break-all text-(--console-panel-text-color)">{{ output.message }}</span>
       </li>
     </ul>
   </UICard>
 </template>
-
-<style lang="scss" scoped>
-.console-panel {
-  display: flex;
-  flex-direction: column;
-}
-
-.output-container {
-  padding: 12px;
-  flex: 1 1 0;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.output {
-  position: relative;
-  font-size: 12px;
-  font-family: var(--ui-font-family-code);
-
-  --console-panel-text-color: var(--ui-color-grey-1000);
-  --console-panel-tip-color: var(--ui-color-grey-700);
-  &.kind-error {
-    --console-panel-text-color: var(--ui-color-red-500);
-    --console-panel-tip-color: var(--ui-color-red-300);
-  }
-}
-
-.message {
-  white-space: pre-line;
-  word-break: break-all;
-  color: var(--console-panel-text-color);
-}
-
-.time {
-  float: left;
-  margin-right: 8px;
-  color: var(--console-panel-tip-color);
-}
-
-.link {
-  float: right;
-  margin-left: 8px;
-  color: var(--console-panel-tip-color);
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/EditorPanels.vue b/spx-gui/src/components/editor/panels/EditorPanels.vue
index 114eef299..6ca57aec1 100644
--- a/spx-gui/src/components/editor/panels/EditorPanels.vue
+++ b/spx-gui/src/components/editor/panels/EditorPanels.vue
@@ -1,6 +1,9 @@
 <template>
-  <div v-show="running.mode !== 'debug'" class="editor-panels">
-    <UICard v-radar="{ name: 'Sprites panel', desc: 'Panel containing sprites for the project' }" class="main">
+  <div v-show="running.mode !== 'debug'" class="flex flex-[1_1_0] gap-middle">
+    <UICard
+      v-radar="{ name: 'Sprites panel', desc: 'Panel containing sprites for the project' }"
+      class="flex min-w-0 flex-[1_1_0]"
+    >
       <SpritesPanel />
     </UICard>
     <UICard
@@ -8,7 +11,7 @@
         name: 'Stage panel',
         desc: 'Panel for stage of the project, with quick entries to widgets, sounds and backdrops tabs'
       }"
-      class="sider"
+      class="flex-[0_0_auto]"
     >
       <StagePanel />
     </UICard>
@@ -20,7 +23,7 @@
       desc: 'Console panel showing runtime output and errors',
       visible: running.mode === 'debug'
     }"
-    class="console-panel"
+    class="flex-[1_1_0]"
   />
 </template>
 
@@ -35,26 +38,3 @@ import ConsolePanel from './ConsolePanel.vue'
 const editorCtx = useEditorCtx()
 const running = computed(() => editorCtx.state.runtime.running)
 </script>
-
-<style scoped lang="scss">
-.editor-panels {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: row;
-  gap: var(--ui-gap-middle);
-}
-
-.console-panel {
-  flex: 1 1 0;
-}
-
-.main {
-  flex: 1 1 0;
-  min-width: 0;
-  display: flex;
-}
-
-.sider {
-  flex: 0 0 auto;
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/common/PanelFooter.vue b/spx-gui/src/components/editor/panels/common/PanelFooter.vue
index 375aa76f2..5e67e4640 100644
--- a/spx-gui/src/components/editor/panels/common/PanelFooter.vue
+++ b/spx-gui/src/components/editor/panels/common/PanelFooter.vue
@@ -1,22 +1,15 @@
 <!-- (floating) Footer for Sprite/Sound Panel -->
 
 <template>
-  <div class="panel-footer">
+  <div
+    class="flex flex-none flex-col gap-3 bg-grey-100 p-3"
+    :style="{
+      // slightly different with --ui-box-shadow-small
+      boxShadow: '0px -2px 8px 0px rgba(51, 51, 51, 0.08)'
+    }"
+  >
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.panel-footer {
-  flex: 0 0 auto;
-  display: flex;
-  padding: 12px;
-  flex-direction: column;
-  gap: 12px;
-
-  background: var(--ui-color-grey-100);
-  box-shadow: 0px -2px 8px 0px rgba(51, 51, 51, 0.08); // slightly different with --ui-box-shadow-small
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/common/PanelHeader.vue b/spx-gui/src/components/editor/panels/common/PanelHeader.vue
index 558b9fc11..efd339e4a 100644
--- a/spx-gui/src/components/editor/panels/common/PanelHeader.vue
+++ b/spx-gui/src/components/editor/panels/common/PanelHeader.vue
@@ -1,16 +1,24 @@
-<!-- Header for Sprite/Sound Panel -->
+<!-- Header for Sprite Panel -->
 
 <template>
   <!-- TODO: use UICardHeader? -->
-  <div class="panel-header" :class="{ active }">
-    <div class="main">
+  <div
+    class="flex h-11 items-center justify-between border-b border-grey-400 pr-2.5"
+    :class="active ? 'border-(--panel-color-main) bg-(--panel-color-main) text-grey-100' : 'text-title'"
+  >
+    <div class="flex h-full items-center px-middle text-16">
       <slot></slot>
     </div>
     <UIDropdown trigger="click" placement="bottom-end" :offset="{ x: 0, y: 16 }">
       <template #trigger>
         <div
           v-radar="{ name: 'Add', desc: 'Button to add a new item for current panel, click to view more options' }"
-          class="add"
+          class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full text-inherit transition-colors"
+          :class="
+            active
+              ? 'hover:bg-(--panel-color-400) active:bg-(--panel-color-600)'
+              : 'hover:bg-grey-400 active:bg-grey-500'
+          "
         >
           <UIIcon type="plus" />
         </div>
@@ -27,57 +35,3 @@ defineProps<{
   active: boolean
 }>()
 </script>
-
-<style scoped lang="scss">
-.panel-header {
-  height: 44px;
-  display: flex;
-  padding-right: 10px;
-  justify-content: space-between;
-  align-items: center;
-  color: var(--ui-color-title);
-  border-bottom: 1px solid var(--ui-color-grey-400);
-
-  &.active {
-    color: var(--ui-color-grey-100);
-    border-color: var(--panel-color-main);
-    background-color: var(--panel-color-main);
-  }
-}
-
-.main {
-  height: 100%;
-  padding: 0 var(--ui-gap-middle);
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-}
-
-.add {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-  border-radius: 14px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: var(--ui-color-grey-400);
-  }
-  &:active {
-    background-color: var(--ui-color-grey-500);
-  }
-}
-
-.panel-header.active .add {
-  &:hover {
-    background-color: var(--panel-color-400);
-  }
-  &:active {
-    background-color: var(--panel-color-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
index b67c833ee..f97ec75ed 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="sprites-panel" :style="cssVars">
-    <section v-radar="{ name: 'Sprites panel', desc: 'Panel for managing project sprites' }" class="details">
+  <div class="h-full w-full overflow-hidden" :style="cssVars">
+    <section
+      v-radar="{ name: 'Sprites panel', desc: 'Panel for managing project sprites' }"
+      class="flex h-full flex-col overflow-hidden"
+    >
       <PanelHeader :active="selectedSprite != null">
         {{ $t({ en: 'Sprites', zh: '精灵' }) }}
         <template #add-options>
@@ -89,18 +92,3 @@ const handleGenerate = useMessageHandle(
   }
 ).fn
 </script>
-
-<style scoped lang="scss">
-.sprites-panel {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.details {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/stage/StagePanel.vue b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
index 73d5ea438..368014189 100644
--- a/spx-gui/src/components/editor/panels/stage/StagePanel.vue
+++ b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
@@ -1,42 +1,47 @@
 <template>
-  <section class="stage-panel" :class="{ active }" :style="cssVars">
+  <section class="flex h-full flex-col overflow-hidden" :style="cssVars">
     <!-- TODO: use UICardHeader? -->
-    <h4 class="header">{{ $t({ en: 'Stage', zh: '舞台' }) }}</h4>
-    <main class="main">
-      <div class="stage">
+    <h4
+      class="flex h-11 w-20 items-center justify-center border-b border-grey-400 text-16"
+      :class="active ? 'border-stage-main bg-stage-main text-grey-100' : 'text-title'"
+    >
+      {{ $t({ en: 'Stage', zh: '舞台' }) }}
+    </h4>
+    <main class="flex flex-[1_1_0] flex-col items-center">
+      <div class="flex-[0_0_auto] p-3">
         <div
           v-radar="{ name: 'Stage overview', desc: 'Overview of the stage, click to view stage details' }"
-          class="overview"
-          :class="{ active }"
+          class="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-1 bg-grey-300"
+          :class="active ? 'border-2 border-stage-main bg-blue-200 p-0' : 'p-0.5 hover:bg-grey-400'"
           @click="activate"
         >
-          <UIImg class="img" :src="imgSrc" size="cover" :loading="imgLoading" />
+          <UIImg class="h-11 w-11 rounded-[4px] object-cover" :src="imgSrc" size="cover" :loading="imgLoading" />
         </div>
       </div>
-      <UIDivider class="divider" />
-      <div class="scroll-container">
-        <div class="quick-actions">
+      <UIDivider class="w-10" />
+      <div class="scroll-container w-full flex-[1_0_72px] overflow-y-auto">
+        <div class="flex flex-col items-start gap-2">
           <button
             v-radar="{
               name: 'Backdrops quick entry',
               desc: 'Quick entry to open backdrops management tab in stage editor'
             }"
-            class="quick-btn"
+            class="flex h-14 w-14 cursor-pointer flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('backdrops')"
           >
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <span class="icon" v-html="backdropSvg"></span>
+            <span class="h-6 w-6" v-html="backdropSvg"></span>
             <span>{{ $t({ en: 'Backdrops', zh: '背景' }) }}</span>
           </button>
           <button
             v-radar="{ name: 'Sounds quick entry', desc: 'Quick entry to open sounds management tab in stage editor' }"
-            class="quick-btn"
+            class="flex h-14 w-14 cursor-pointer flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('sounds')"
           >
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <span class="icon" v-html="soundSvg"></span>
+            <span class="h-6 w-6" v-html="soundSvg"></span>
             <span>{{ $t({ en: 'Sounds', zh: '声音' }) }}</span>
           </button>
           <button
@@ -44,12 +49,12 @@
               name: 'Widgets quick entry',
               desc: 'Quick entry to open widgets management tab in stage editor'
             }"
-            class="quick-btn"
+            class="flex h-14 w-14 cursor-pointer flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('widgets')"
           >
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <span class="icon" v-html="widgetSvg"></span>
+            <span class="h-6 w-6" v-html="widgetSvg"></span>
             <span>{{ $t({ en: 'Widgets', zh: '控件' }) }}</span>
           </button>
         </div>
@@ -88,120 +93,9 @@ const uiVariables = useUIVariables()
 const cssVars = getCssVars('--panel-color-', uiVariables.color.stage)
 </script>
 
-<style scoped lang="scss">
-.stage-panel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .header {
-    flex: 0 0 44px;
-    width: 80px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    font-size: 16px;
-    color: var(--ui-color-title);
-    border-bottom: 1px solid var(--ui-color-grey-400);
-  }
-
-  &.active {
-    .header {
-      color: var(--ui-color-grey-100);
-      background-color: var(--ui-color-stage-main);
-      border-color: var(--ui-color-stage-main);
-    }
-  }
-
-  .main {
-    flex: 1 1 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-}
-
-.stage {
-  flex: 0 0 auto;
-  padding: 12px;
-
-  .overview {
-    width: 56px;
-    height: 56px;
-    padding: 2px;
-    position: relative;
-    border-radius: var(--ui-border-radius-1);
-    background-color: var(--ui-color-grey-300);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    &:not(.active):hover {
-      background-color: var(--ui-color-grey-400);
-    }
-
-    &.active {
-      padding: 0;
-      background-color: var(--ui-color-blue-200);
-      border: 2px solid var(--ui-color-stage-main);
-    }
-
-    .img {
-      width: 44px;
-      height: 44px;
-      border-radius: 4px;
-      object-fit: cover;
-    }
-  }
-}
-
-.divider {
-  width: 40px;
-}
-
+<style scoped>
 .scroll-container {
-  flex: 1 0 72px;
-  overflow-y: auto;
-  width: 100%;
-  padding: 12px 0 12px 12px; // no right padding to allow optional scrollbar
+  padding: 12px 0 12px 12px; /* no right padding to allow optional scrollbar */
   scrollbar-width: thin;
 }
-
-.quick-actions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-
-  .quick-btn {
-    width: 56px;
-    height: 56px;
-    border-radius: var(--ui-border-radius-1);
-    background-color: var(--ui-color-grey-300);
-    border: none;
-    outline: none;
-    padding: 8px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: var(--ui-color-grey-1000);
-    font-size: 10px;
-    font-weight: 600;
-    line-height: 16px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--ui-color-grey-400);
-    }
-
-    .icon {
-      width: 24px;
-      height: 24px;
-    }
-  }
-}
 </style>
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index a23e6f776..4ff5f0640 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -5,7 +5,8 @@
       name: 'Stage viewer',
       desc: 'View and manipulate the stage and objects (sprites, widgets, etc.) on the stage. Click on object to select it.'
     }"
-    class="stage-viewer"
+    class="stage-viewer relative flex h-full w-full items-center justify-center bg-center bg-repeat bg-contain"
+    :style="{ backgroundImage: `url(${stageBgUrl})` }"
     @mousemove="updateMousePos"
   >
     <v-stage v-if="stageConfig != null" ref="stageRef" :config="stageConfig" @wheel="handleWheel">
@@ -61,18 +62,21 @@
         />
       </v-layer>
     </v-stage>
-    <QuickConfigWrapper v-if="localConfigRef != null" ref="quickConfigRef" class="quick-config">
-      <SpriteQuickConfig
-        v-if="localConfigRef instanceof SpriteLocalConfig"
-        :local-config="localConfigRef"
-        :project="editorCtx.project"
-      />
-      <WidgetQuickConfig
-        v-else-if="localConfigRef instanceof WidgetLocalConfig"
-        :local-config="localConfigRef"
-        :project="editorCtx.project"
-      />
-    </QuickConfigWrapper>
+    <div v-if="localConfigRef != null" class="absolute bottom-3 left-1/2 -translate-x-1/2">
+      <QuickConfigWrapper ref="quickConfigRef">
+        <SpriteQuickConfig
+          v-if="localConfigRef instanceof SpriteLocalConfig"
+          :local-config="localConfigRef"
+          :project="editorCtx.project"
+        />
+        <WidgetQuickConfig
+          v-else-if="localConfigRef instanceof WidgetLocalConfig"
+          :local-config="localConfigRef"
+          :project="editorCtx.project"
+        />
+      </QuickConfigWrapper>
+    </div>
+
     <PositionIndicator :position="mousePos" />
     <UILoading :visible="loading" cover />
   </div>
@@ -85,6 +89,8 @@ import Konva from 'konva'
 import type { KonvaEventObject } from 'konva/lib/Node'
 import type { StageConfig } from 'konva/lib/Stage'
 import type { LayerConfig } from 'konva/lib/Layer'
+
+import stageBgUrl from '@/assets/images/stage-bg.svg'
 import { UILoading } from '@/components/ui'
 import { useContentSize } from '@/utils/dom'
 import { useFileUrl } from '@/utils/file'
@@ -501,24 +507,3 @@ watchEffect((onCleanup) => {
   onCleanup(unbind)
 })
 </script>
-<style scoped>
-.stage-viewer {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background-image: url(@/assets/images/stage-bg.svg);
-  background-position: center;
-  background-repeat: repeat;
-  background-size: contain;
-  position: relative;
-}
-
-.quick-config {
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/AnimationDetail.vue b/spx-gui/src/components/editor/sprite/AnimationDetail.vue
index ce9809e83..628d5cd3e 100644
--- a/spx-gui/src/components/editor/sprite/AnimationDetail.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationDetail.vue
@@ -4,7 +4,7 @@
       :costumes="animation.costumes"
       :sound="sound"
       :duration="animation.duration"
-      class="animation-player"
+      class="w-full flex-[1_1_0]"
     />
     <AnimationSettings :animation="animation" :sound-editable="soundEditable" />
   </EditorItemDetail>
@@ -36,17 +36,3 @@ const emit = defineEmits<{
 const editorCtx = useEditorCtx()
 const sound = computed(() => editorCtx.project.sounds.find((sound) => sound.id === props.animation.sound) ?? null)
 </script>
-
-<style lang="scss" scoped>
-.animation-player {
-  width: 100%;
-  flex: 1 1 0;
-}
-
-.mute-switch {
-  position: absolute;
-  z-index: 20;
-  top: 12px;
-  right: 12px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/AnimationEditor.vue b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
index e6efbce01..4d817901c 100644
--- a/spx-gui/src/components/editor/sprite/AnimationEditor.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
@@ -157,9 +157,3 @@ const handleRename = useMessageHandle(renameAnimation, {
   zh: '重命名动画失败'
 }).fn
 </script>
-<style scoped lang="scss">
-.background {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
index 0094060c8..a699ff7cf 100644
--- a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
@@ -15,7 +15,7 @@
           })
         }}
       </div>
-      <UICheckbox v-model:checked="preserveCostumes" class="checkbox">
+      <UICheckbox v-model:checked="preserveCostumes" class="mt-5">
         {{
           $t({
             en: "Preserve (the costumes will be moved to the sprite's costume list)",
@@ -24,7 +24,7 @@
         }}
       </UICheckbox>
     </div>
-    <div class="action">
+    <div class="mt-10 flex justify-end gap-middle">
       <UIButton
         v-radar="{ name: 'Cancel button', desc: 'Click to cancel removing animation' }"
         color="boring"
@@ -87,14 +87,3 @@ const handleConfirm = async () => {
   emit('resolved')
 }
 </script>
-<style scoped lang="scss">
-.checkbox {
-  margin-top: 20px;
-}
-.action {
-  margin-top: 40px;
-  display: flex;
-  gap: var(--ui-gap-middle);
-  justify-content: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
index 3f6a74cce..6e7611ded 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
@@ -291,9 +291,9 @@ const { fn: handleConfirm } = useMessageHandle(
 </script>
 
 <template>
-  <div class="sprite-collision-editor">
-    <div ref="wrapper" class="wrapper">
-      <CheckerboardBackground class="background" />
+  <div class="flex h-full w-full flex-col items-center gap-middle">
+    <div ref="wrapper" class="relative h-full w-full flex-1 overflow-hidden rounded-2">
+      <CheckerboardBackground class="absolute inset-0" />
       <v-stage v-if="stageConfig != null" :config="stageConfig">
         <v-layer v-if="layerConfig != null" :config="layerConfig">
           <v-image v-if="imgConfig != null" :config="imgConfig" />
@@ -324,29 +324,3 @@ const { fn: handleConfirm } = useMessageHandle(
     </UIButton>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.sprite-collision-editor {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-  height: 100%;
-}
-.wrapper {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  border-radius: var(--ui-border-radius-2);
-  position: relative;
-  overflow: hidden;
-}
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
index 573b31ce4..e3b4d9960 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
@@ -29,15 +29,6 @@ const emit = defineEmits<{
     :visible="visible"
     @update:visible="emit('cancelled')"
   >
-    <SpriteCollisionEditor class="editor" :sprite="sprite" :project="project" @update-success="emit('resolved')" />
+    <SpriteCollisionEditor class="h-114" :sprite="sprite" :project="project" @update-success="emit('resolved')" />
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.checkbox {
-  margin-top: 20px;
-}
-.editor {
-  height: 456px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/SpriteList.vue b/spx-gui/src/components/editor/sprite/SpriteList.vue
index 93f97b6ad..aa10fcd0b 100644
--- a/spx-gui/src/components/editor/sprite/SpriteList.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteList.vue
@@ -105,7 +105,7 @@ const handleSpriteGenClick = useMessageHandle(
 </script>
 
 <template>
-  <div ref="listWrapper" class="sprite-list">
+  <div ref="listWrapper" class="sprite-list overflow-y-auto m-0 flex flex-wrap content-start gap-2">
     <UIEmpty v-if="list.length === 0" size="medium">
       {{ $t({ en: 'Click + to add sprite', zh: '点击 + 号添加精灵' }) }}
     </UIEmpty>
@@ -128,26 +128,21 @@ const handleSpriteGenClick = useMessageHandle(
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .sprite-list {
-  flex: 1 0 112px; // 112px: 1 row of sprite items height
-  overflow-y: auto;
-  margin: 0;
-  padding: 12px 0 12px 12px; // no right padding to allow optional scrollbar
+  flex: 1 0 112px; /* 112px: 1 row of sprite items height */
+  padding: 12px 0 12px 12px; /* no right padding to allow optional scrollbar */
   scrollbar-width: thin;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 8px;
-
-  :deep(.sortable-ghost-item) {
-    // Shadow-like effect
-    // TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem`
-    border-color: var(--ui-color-grey-400) !important;
-    background-color: var(--ui-color-grey-400) !important;
-    * {
-      visibility: hidden;
-    }
-  }
+}
+
+:deep(.sortable-ghost-item) {
+  /* Shadow-like effect */
+  /* TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem` */
+  border-color: var(--ui-color-grey-400) !important;
+  background-color: var(--ui-color-grey-400) !important;
+}
+
+:deep(.sortable-ghost-item *) {
+  visibility: hidden;
 }
 </style>
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue b/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
index af5e33671..9044a88ae 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
@@ -1,8 +1,11 @@
 <template>
-  <div v-radar="{ name: 'Animation player', desc: 'Provides preview for animation' }" class="animation-player">
-    <CheckerboardBackground class="background" />
-    <CostumesPlayer ref="costumesPlayerRef" class="costumes-player" />
-    <MuteSwitch v-if="sound != null" class="mute-switch" :muted="mutedRef" @click="setMuted(!mutedRef)" />
+  <div
+    v-radar="{ name: 'Animation player', desc: 'Provides preview for animation' }"
+    class="relative overflow-hidden rounded-1"
+  >
+    <CheckerboardBackground class="absolute inset-0" />
+    <CostumesPlayer ref="costumesPlayerRef" class="absolute h-full w-full" />
+    <MuteSwitch v-if="sound != null" class="absolute top-3 right-3" :muted="mutedRef" @click="setMuted(!mutedRef)" />
     <UILoading :visible="loading" cover />
   </div>
 </template>
@@ -107,27 +110,3 @@ watchEffect(async () => {
   }
 })
 </script>
-<style scoped lang="scss">
-.animation-player {
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-}
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-.costumes-player {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.mute-switch {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
index 1f6e49189..6b28d4715 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="wrapper">
+  <section class="flex justify-center">
     <UIDropdown
       trigger="manual"
       :visible="activeSetting != null"
@@ -8,37 +8,50 @@
       @update:visible="handleDropdownVisibleUpdate"
     >
       <template #trigger>
-        <ul class="settings">
+        <ul class="flex items-center gap-1 rounded-1 bg-grey-100 p-1 shadow-small">
           <li
             v-radar="{ name: 'Edit duration', desc: 'Click to edit animation duraion' }"
-            class="setting"
-            :class="{ active: activeSetting === 'duration' }"
+            class="flex h-8 cursor-pointer items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            :class="activeSetting === 'duration' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('duration')"
           >
             <UIIcon type="timer" />
             {{ $t({ en: 'Duration', zh: '时长' }) }}
-            <span class="value">{{ formatDuration(animation.duration, 2) }}</span>
+            <span
+              class="max-w-[5em] overflow-x-hidden rounded-full bg-grey-400 px-1.25 text-10/[1.6] whitespace-nowrap text-ellipsis text-grey-800"
+            >
+              {{ formatDuration(animation.duration, 2) }}
+            </span>
           </li>
           <li
             v-radar="{ name: 'Edit bound state', desc: 'Click to edit animation bound state' }"
-            class="setting"
-            :class="{ active: activeSetting === 'bound-state' }"
+            class="flex h-8 cursor-pointer items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            :class="activeSetting === 'bound-state' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('bound-state')"
           >
             <UIIcon type="status" />
             {{ $t({ en: 'Binding', zh: '绑定' }) }}
-            <span v-if="boundStateNum > 0" class="value">{{ boundStateNum }}</span>
+            <span
+              v-if="boundStateNum > 0"
+              class="max-w-[5em] overflow-x-hidden rounded-full bg-grey-400 px-1.25 text-10/[1.6] whitespace-nowrap text-ellipsis text-grey-800"
+            >
+              {{ boundStateNum }}
+            </span>
           </li>
           <li
             v-if="soundEditable"
             v-radar="{ name: 'Edit sound', desc: 'Click to edit animation sound' }"
-            class="setting"
-            :class="{ active: activeSetting === 'sound' }"
+            class="flex h-8 cursor-pointer items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            :class="activeSetting === 'sound' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('sound')"
           >
             <UIIcon type="sound" />
             {{ $t({ en: 'Sound', zh: '声音' }) }}
-            <span class="value">{{ soundName }}</span>
+            <span
+              class="max-w-[5em] overflow-x-hidden rounded-full bg-grey-400 px-1.25 text-10/[1.6] whitespace-nowrap text-ellipsis text-grey-800"
+            >
+              {{ soundName }}
+            </span>
           </li>
         </ul>
       </template>
@@ -97,55 +110,3 @@ function handleDropdownVisibleUpdate(visible: boolean) {
   if (!visible) activeSetting.value = null
 }
 </script>
-
-<style lang="scss" scoped>
-.wrapper {
-  display: flex;
-  justify-content: center;
-}
-
-.settings {
-  display: flex;
-  align-items: center;
-
-  padding: 4px;
-  gap: 4px;
-  border-radius: var(--ui-border-radius-1);
-  box-shadow: var(--ui-box-shadow-small);
-  background-color: var(--ui-color-grey-100);
-}
-
-.setting {
-  display: flex;
-  height: 32px;
-  padding: 4px 12px;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: var(--ui-border-radius-1);
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--ui-color-text-main);
-  cursor: pointer;
-  transition: 0.2s;
-
-  &.active {
-    color: var(--ui-color-primary-main);
-    background: var(--ui-color-primary-200);
-  }
-}
-
-.value {
-  padding: 0px 5px;
-  border-radius: 8px;
-  max-width: 5em;
-  overflow-x: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  font-size: 10px;
-  line-height: 1.6;
-  color: var(--ui-color-grey-800);
-  background-color: var(--ui-color-grey-400);
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue b/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
index fe3d26de3..4f685d29f 100644
--- a/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
+++ b/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
@@ -2,7 +2,9 @@
   <div>
     <UITooltip>
       <template #trigger>
-        <div class="mute-switch-button">
+        <div
+          class="cursor-pointer flex h-8 w-8 items-center justify-center rounded-full border border-grey-500 bg-white transition-colors hover:bg-grey-300"
+        >
           <UIIcon :type="muted ? 'volumeOff' : 'volumeUp'" />
         </div>
       </template>
@@ -21,21 +23,3 @@ defineProps<{
   muted: boolean
 }>()
 </script>
-<style scoped lang="scss">
-.mute-switch-button {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  border: 1px solid var(--ui-color-grey-500);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #fff;
-
-  &:hover {
-    background-color: var(--ui-color-grey-300);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue b/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
index ede49890f..6f6c7af86 100644
--- a/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
@@ -6,7 +6,7 @@
     @cancel="emit('close')"
     @confirm="handleConfirm"
   >
-    <ul class="sound-items">
+    <ul class="flex-[1_1_0] flex flex-wrap content-start gap-3">
       <SoundItem
         v-for="sound in editorCtx.project.sounds"
         :key="sound.id"
@@ -17,24 +17,30 @@
       />
       <UIDropdown trigger="click" placement="top">
         <template #trigger>
-          <UIBlockItem v-radar="{ name: 'Add sound button', desc: 'Click to add a new sound' }" class="add-sound">
-            <UIIcon class="icon" type="plus" />
+          <UIBlockItem
+            v-radar="{ name: 'Add sound button', desc: 'Click to add a new sound' }"
+            class="text-primary-main"
+            style="justify-content: center"
+          >
+            <UIIcon type="plus" style="width: 24px; height: 24px" />
           </UIBlockItem>
         </template>
         <UIMenu>
           <UIMenuItem
             v-radar="{ name: 'Add from local file', desc: 'Click to add sound from local file' }"
             @click="handleAddFromLocalFile"
-            >{{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}</UIMenuItem
           >
+            {{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}
+          </UIMenuItem>
           <UIMenuItem
             v-radar="{ name: 'Add from asset library', desc: 'Click to add sound from asset library' }"
             @click="handleAddFromAssetLibrary"
-            >{{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}</UIMenuItem
           >
-          <UIMenuItem v-radar="{ name: 'Record sound', desc: 'Click to record a new sound' }" @click="handleRecord">{{
-            $t({ en: 'Record', zh: '录音' })
-          }}</UIMenuItem>
+            {{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}
+          </UIMenuItem>
+          <UIMenuItem v-radar="{ name: 'Record sound', desc: 'Click to record a new sound' }" @click="handleRecord">
+            {{ $t({ en: 'Record', zh: '录音' }) }}
+          </UIMenuItem>
         </UIMenu>
       </UIDropdown>
     </ul>
@@ -102,22 +108,3 @@ async function handleConfirm() {
   emit('close')
 }
 </script>
-
-<style lang="scss" scoped>
-.sound-items {
-  flex: 1 1 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 12px;
-}
-
-.add-sound {
-  justify-content: center;
-  color: var(--ui-color-primary-main);
-  .icon {
-    width: 24px;
-    height: 24px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
index 3b4ef8d0c..d11461898 100644
--- a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
@@ -8,35 +8,44 @@
     @cancel="emit('close')"
     @confirm="handleConfirm"
   >
-    <ul class="state-items">
+    <ul class="flex-[1_1_0] flex flex-wrap content-start gap-3">
       <UIBlockItem
         v-radar="{ name: 'State default', desc: 'Click to select state \u0022default\u0022' }"
-        class="state-item"
         :active="isBound(State.Default)"
         @click="handleStateItemClick(State.Default)"
       >
-        <div class="icon" v-html="iconStateDefault"></div>
-        <p class="name">{{ $t({ en: 'Default', zh: '默认' }) }}</p>
+        <div class="mt-1 h-14 w-14" v-html="iconStateDefault"></div>
+        <p
+          class="mt-0.5 w-full overflow-hidden px-2 py-0.75 text-center text-10/[1.6] whitespace-nowrap text-ellipsis text-title"
+        >
+          {{ $t({ en: 'Default', zh: '默认' }) }}
+        </p>
         <UICornerIcon v-show="isBound(State.Default)" type="check" />
       </UIBlockItem>
       <UIBlockItem
         v-radar="{ name: 'State step', desc: 'Click to select state \u0022step\u0022' }"
-        class="state-item"
         :active="isBound(State.Step)"
         @click="handleStateItemClick(State.Step)"
       >
-        <div class="icon" v-html="iconStateStep"></div>
-        <p class="name">{{ $t({ en: 'Step', zh: '行走' }) }}</p>
+        <div class="mt-1 h-14 w-14" v-html="iconStateStep"></div>
+        <p
+          class="mt-0.5 w-full overflow-hidden px-2 py-0.75 text-center text-10/[1.6] whitespace-nowrap text-ellipsis text-title"
+        >
+          {{ $t({ en: 'Step', zh: '行走' }) }}
+        </p>
         <UICornerIcon v-show="isBound(State.Step)" type="check" />
       </UIBlockItem>
       <UIBlockItem
         v-radar="{ name: 'State die', desc: 'Click to select state \u0022die\u0022' }"
-        class="state-item"
         :active="isBound(State.Die)"
         @click="handleStateItemClick(State.Die)"
       >
-        <div class="icon" v-html="iconStateDie"></div>
-        <p class="name">{{ $t({ en: 'Die', zh: '死亡' }) }}</p>
+        <div class="mt-1 h-14 w-14" v-html="iconStateDie"></div>
+        <p
+          class="mt-0.5 w-full overflow-hidden px-2 py-0.75 text-center text-10/[1.6] whitespace-nowrap text-ellipsis text-title"
+        >
+          {{ $t({ en: 'Die', zh: '死亡' }) }}
+        </p>
         <UICornerIcon v-show="isBound(State.Die)" type="check" />
       </UIBlockItem>
     </ul>
@@ -84,33 +93,3 @@ async function handleConfirm() {
   emit('close')
 }
 </script>
-
-<style lang="scss" scoped>
-.state-items {
-  flex: 1 1 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 12px;
-}
-
-.icon {
-  margin-top: 4px;
-  width: 56px;
-  height: 56px;
-}
-
-.name {
-  margin-top: 2px;
-  font-size: 10px;
-  line-height: 1.6;
-  padding: 3px 8px 3px;
-
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-align: center;
-  text-overflow: ellipsis;
-  color: var(--ui-color-title);
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
index cb35696e5..ba2e55529 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div class="gap-4">
+  <div class="flex items-center gap-middle text-grey-800">
+    <div class="flex items-center gap-1">
       <div>
         {{ $t({ en: 'Backdrop Mode', zh: '背景模式' }) }}
       </div>
@@ -50,17 +50,3 @@ const handleUpdateMapMode = (mode: MapMode) => {
 
 const editorCtx = useEditorCtx()
 </script>
-<style scoped lang="scss">
-.container {
-  display: flex;
-  align-items: center;
-  color: var(--ui-color-grey-800);
-  gap: 16px;
-}
-
-.gap-4 {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/sound/SoundDetail.vue b/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
index 0430fb858..ebc91d184 100644
--- a/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
+++ b/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
@@ -1,44 +1,43 @@
 <template>
-  <div class="main">
-    <div class="header">
-      <div class="name">
+  <div class="flex w-full flex-col gap-large px-5 py-6">
+    <div class="flex flex-col items-center">
+      <div class="flex items-center gap-2 text-title">
         <AssetName>{{ sound.name }}</AssetName>
         <UIIcon
           v-radar="{ name: 'Rename sound', desc: 'Click to rename the sound' }"
-          class="edit-icon"
+          class="cursor-pointer text-grey-900 hover:text-grey-800 active:text-grey-1000"
           :title="$t({ en: 'Rename', zh: '重命名' })"
           type="edit"
           @click="handleNameEdit"
         />
       </div>
-      <div class="duration">
+      <div class="text-grey-700 leading-4.5">
         {{ formattedTrimmedDuration || '&nbsp;' }}
       </div>
     </div>
     <WaveformPlayer
       ref="waveformPlayerRef"
       v-model:range="audioRange"
-      class="waveform-player"
+      style="height: 222px"
       :audio-src="audioUrl || undefined"
       :gain="gain"
       @progress="handleProgress"
       @stop="handleStop"
       @play="handlePlay"
     />
-    <div class="operations">
-      <div class="play-btn">
-        <PlayControl
-          color="sound"
-          :playing="playing != null"
-          :progress="playing?.progress ?? 0"
-          :play-handler="handlePlayClick"
-          :loading="audioLoading"
-          @stop="handleStopClick"
-        />
-      </div>
-      <VolumeSlider class="volume-slider" :value="gain" @update:value="handleGainUpdate" />
-      <div class="spacer" />
-      <div v-if="editing" class="editing-buttons">
+    <div class="flex">
+      <PlayControl
+        class="flex-[0_0_auto]"
+        color="sound"
+        :playing="playing != null"
+        :progress="playing?.progress ?? 0"
+        :play-handler="handlePlayClick"
+        :loading="audioLoading"
+        @stop="handleStopClick"
+      />
+      <VolumeSlider class="mx-6 flex-[0_1_438px]" :value="gain" @update:value="handleGainUpdate" />
+      <div class="flex-[1_1_0]" />
+      <div v-if="editing" class="flex flex-[0_0_auto] items-center gap-2">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel sound editing' }"
           color="boring"
@@ -167,70 +166,3 @@ const handleSave = useMessageHandle(
   }
 )
 </script>
-
-<style scoped lang="scss">
-.main {
-  width: 100%;
-  padding: 24px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.duration {
-  color: var(--ui-color-grey-700);
-  line-height: 18px;
-}
-
-.name {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--ui-color-title);
-
-  .edit-icon {
-    cursor: pointer;
-    color: var(--ui-color-grey-900);
-    &:hover {
-      color: var(--ui-color-grey-800);
-    }
-    &:active {
-      color: var(--ui-color-grey-1000);
-    }
-  }
-}
-
-.operations {
-  display: flex;
-
-  .play-btn {
-    flex: 0 0 auto;
-  }
-
-  .volume-slider {
-    flex: 0 1 438px;
-    margin: 0 24px;
-  }
-
-  .spacer {
-    flex: 1 1 0;
-  }
-
-  .editing-buttons {
-    flex: 0 0 auto;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-}
-
-.waveform-player {
-  height: 222px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
index a2014368f..791fe9738 100644
--- a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
+++ b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div class="recorder-waveform-container">
+  <div class="flex flex-col">
+    <div class="relative h-40 overflow-hidden rounded-2 bg-grey-300">
       <WaveformRecorder
         v-if="recordingState === 'recording' || recordingState === 'recorded'"
         ref="waveformRecorderRef"
@@ -10,7 +10,10 @@
         @record-started="handleRecordStarted"
         @record-stopped="recordingState = 'recorded'"
       />
-      <div v-if="recordingState === 'yetStarted'" class="recorder-waveform-overlay">
+      <div
+        v-if="recordingState === 'yetStarted'"
+        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap text-grey-800"
+      >
         {{
           $t({
             en: 'Begin recording by clicking the button below',
@@ -19,11 +22,11 @@
         }}
       </div>
     </div>
-    <div v-if="recordingState === 'recorded'" class="volume-slider-container">
+    <div v-if="recordingState === 'recorded'" class="-mb-2 pt-6">
       <VolumeSlider :value="gain" @update:value="handleGainUpdate" />
     </div>
-    <div class="button-container">
-      <div v-if="recordingState === 'yetStarted'" class="icon-button">
+    <div class="mb-2 mt-8 flex justify-center gap-10">
+      <div v-if="recordingState === 'yetStarted'" class="flex flex-col items-center gap-2 text-body">
         <UIButton shape="circle" size="large" icon="microphone" color="danger" @click="recordingState = 'recording'" />
         <span>
           {{
@@ -34,7 +37,7 @@
           }}
         </span>
       </div>
-      <div v-else-if="recordingState === 'recording'" class="icon-button">
+      <div v-else-if="recordingState === 'recording'" class="flex flex-col items-center gap-2 text-body">
         <UIButton shape="circle" size="large" icon="stop" color="danger" @click="stopRecording" />
         <span>
           {{
@@ -46,8 +49,8 @@
         </span>
       </div>
       <template v-else>
-        <div class="icon-button">
-          <div class="icon-button-wrapper">
+        <div class="flex flex-col items-center gap-2 text-body">
+          <div class="flex h-14 items-center">
             <UIButton shape="circle" size="large" icon="reload" color="boring" @click="resetRecording" />
           </div>
           <span>
@@ -59,7 +62,7 @@
             }}
           </span>
         </div>
-        <div class="icon-button">
+        <div class="flex flex-col items-center gap-2 text-body">
           <UIButton
             style="width: 56px; height: 56px"
             shape="circle"
@@ -80,8 +83,8 @@
             }}
           </span>
         </div>
-        <div class="icon-button">
-          <div class="icon-button-wrapper">
+        <div class="flex flex-col items-center gap-2 text-body">
+          <div class="flex h-14 items-center">
             <UIButton shape="circle" size="large" icon="check" color="success" @click="saveRecording" />
           </div>
           <span>
@@ -158,63 +161,3 @@ const resetRecording = () => {
   audioRange.value = { left: 0, right: 1 }
 }
 </script>
-
-<style lang="scss" scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-}
-
-.recorder-waveform-container {
-  background-color: var(--ui-color-grey-300);
-  border-radius: var(--ui-border-radius-2);
-  height: 160px;
-  position: relative;
-  overflow: hidden;
-}
-
-.recorder-waveform-overlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: var(--ui-color-grey-800);
-  white-space: nowrap;
-}
-
-.recorder-waveform {
-  height: 160px;
-  padding: 0 16px;
-}
-
-.hidden {
-  opacity: 0;
-}
-
-.icon-button-wrapper {
-  display: flex;
-  align-items: center;
-  height: 56px;
-}
-
-.button-container {
-  display: flex;
-  margin-top: 32px;
-  margin-bottom: 8px;
-  gap: 40px;
-  justify-content: center;
-}
-
-.icon-button {
-  display: flex;
-  gap: 8px;
-  flex-direction: column;
-  font-size: 14px;
-  align-items: center;
-}
-
-.volume-slider-container {
-  padding-top: 24px;
-  margin-bottom: -8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue b/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue
index 07b37801c..b2c6a1a08 100644
--- a/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue
+++ b/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="volume-slider">
-    <UIIcon type="volumeOff" class="volume-icon" />
+  <div class="volume-slider flex items-center gap-2">
+    <UIIcon type="volumeOff" class="text-grey-800" style="width: 24px; height: 24px" />
     <UISlider
-      class="slider"
       color="sound"
       :min="0"
       :max="2"
@@ -11,7 +10,7 @@
       :tooltip="false"
       @update:value="(v) => emit('update:value', v)"
     />
-    <UIIcon type="volumeUp" class="volume-icon" />
+    <UIIcon type="volumeUp" class="text-grey-800" style="width: 24px; height: 24px" />
   </div>
 </template>
 <script setup lang="ts">
@@ -25,16 +24,3 @@ const emit = defineEmits<{
   'update:value': [number]
 }>()
 </script>
-<style scoped lang="scss">
-.volume-slider {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.volume-icon {
-  width: 24px;
-  height: 24px;
-  color: var(--ui-color-grey-800);
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/sound/waveform/WaveformRangeControl.vue b/spx-gui/src/components/editor/stage/sound/waveform/WaveformRangeControl.vue
index b624eb978..db4af5273 100644
--- a/spx-gui/src/components/editor/stage/sound/waveform/WaveformRangeControl.vue
+++ b/spx-gui/src/components/editor/stage/sound/waveform/WaveformRangeControl.vue
@@ -66,7 +66,7 @@ const onMouseMove = (event: MouseEvent) => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .record-control-container {
   position: absolute;
   top: 0;
@@ -83,21 +83,24 @@ const onMouseMove = (event: MouseEvent) => {
   background-color: var(--ui-color-yellow-400);
   height: 100%;
   position: absolute;
+}
 
-  &.left {
-    left: 0;
-  }
-  &.right {
-    right: 0;
-  }
-  &.left-fixed {
-    width: 16px;
-    left: -16px;
-  }
-  &.right-fixed {
-    width: 16px;
-    right: -16px;
-  }
+.shaded-area.left {
+  left: 0;
+}
+
+.shaded-area.right {
+  right: 0;
+}
+
+.shaded-area.left-fixed {
+  width: 16px;
+  left: -16px;
+}
+
+.shaded-area.right-fixed {
+  width: 16px;
+  right: -16px;
 }
 
 .selection-area {
diff --git a/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue b/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue
index 4ff854b8b..a4d09ee90 100644
--- a/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue
+++ b/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue
@@ -1,13 +1,18 @@
 <template>
-  <div class="container">
-    <WaveformDisplay class="waveform" :points="waveformData" :scale="gain" :draw-padding-right="drawPaddingRight" />
+  <div class="relative h-full w-full overflow-hidden rounded-2 bg-grey-300">
+    <WaveformDisplay
+      class="h-full w-full"
+      :points="waveformData"
+      :scale="gain"
+      :draw-padding-right="drawPaddingRight"
+    />
     <WaveformRangeControl
       :value="range"
       @update:value="emit('update:range', $event)"
       @stop-drag="emit('requestPlay')"
     />
-    <div class="cursor-container">
-      <div v-if="progress" class="cursor" :style="progressStyle" />
+    <div class="absolute top-0 right-4 bottom-0 left-4">
+      <div v-if="progress" class="absolute top-0 bottom-0 left-0 w-px bg-grey-800" :style="progressStyle" />
     </div>
   </div>
 </template>
@@ -36,38 +41,3 @@ const progressStyle = computed(() => {
   }
 })
 </script>
-<style lang="scss" scoped>
-.container {
-  position: relative;
-  .waveform {
-    width: 100%;
-    height: 100%;
-  }
-  .waveform-container {
-    padding: 0 16px;
-  }
-  border-radius: 12px;
-  background-color: var(--ui-color-grey-300);
-  overflow: hidden;
-
-  width: 100%;
-  height: 100%;
-}
-
-.cursor {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 1px;
-  background-color: var(--ui-color-grey-800);
-}
-
-.cursor-container {
-  position: absolute;
-  top: 0;
-  left: 16px;
-  bottom: 0;
-  right: 16px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
index b323373d4..617f9ffdc 100644
--- a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
+++ b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
@@ -1,26 +1,26 @@
 <template>
-  <EditorItemDetail class="wrapper" :name="monitor.name" @rename="handleRename">
-    <div class="content">
+  <EditorItemDetail style="background-color: var(--ui-color-grey-100)" :name="monitor.name" @rename="handleRename">
+    <div class="flex justify-center gap-8 py-5">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="preview" v-html="monitorIcon"></div>
-      <div class="controls">
-        <div class="line">
-          <p class="with-label">
+      <div class="monitor-icon flex h-24 w-24 items-center justify-center rounded-1 bg-grey-300" v-html="mntIcon"></div>
+      <div class="flex flex-col gap-middle">
+        <div class="flex items-center gap-middle">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Label', zh: '标签' }) }}
             <UITextInput
               v-radar="{ name: 'Label input', desc: 'Input field for monitor label' }"
-              class="input"
+              style="width: 180px"
               :value="monitor.label"
               @update:value="handleLabelUpdate"
             />
           </p>
         </div>
-        <div class="line">
-          <p class="with-label">
+        <div class="flex items-center gap-middle">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Target', zh: '对象' }) }}
             <UISelect
               v-radar="{ name: 'Target select', desc: 'Select target for monitor value' }"
-              class="input"
+              style="width: 180px"
               :value="monitor.target"
               @update:value="handleTargetUpdate"
             >
@@ -30,11 +30,11 @@
               </UISelectOption>
             </UISelect>
           </p>
-          <p class="with-label">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Value', zh: '值' }) }}
             <UISelect
               v-radar="{ name: 'Property select', desc: 'Select property for monitor value' }"
-              class="input"
+              style="width: 180px"
               :value="monitor.variableName || null"
               :placeholder="$t({ en: 'Select property', zh: '选择属性' })"
               @update:value="handlePropertyUpdate"
@@ -47,12 +47,12 @@
           </p>
         </div>
         <div class="divider"></div>
-        <div class="line">
-          <p class="with-label">
+        <div class="flex items-center gap-middle">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Position', zh: '位置' }) }}
             <UINumberInput
               v-radar="{ name: 'X position input', desc: 'Input field for monitor X position' }"
-              class="input"
+              style="width: 180px"
               :value="monitor.x"
               @update:value="handleXUpdate"
             >
@@ -60,7 +60,7 @@
             </UINumberInput>
             <UINumberInput
               v-radar="{ name: 'Y position input', desc: 'Input field for monitor Y position' }"
-              class="input"
+              style="width: 180px"
               :value="monitor.y"
               @update:value="handleYUpdate"
             >
@@ -68,12 +68,12 @@
             </UINumberInput>
           </p>
         </div>
-        <div class="line">
-          <p class="with-label">
+        <div class="flex items-center gap-middle">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Size', zh: '大小' }) }}
             <UINumberInput
               v-radar="{ name: 'Size input', desc: 'Input field for monitor size' }"
-              class="input"
+              style="width: 180px"
               :min="0"
               :value="sizePercent"
               @update:value="handleSizePercentUpdate"
@@ -82,8 +82,8 @@
             </UINumberInput>
           </p>
         </div>
-        <div class="line">
-          <p class="with-label">
+        <div class="flex items-center gap-middle">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Show', zh: '显示' }) }}
             <UIButtonGroup
               v-radar="{ name: 'Visibility control', desc: 'Control to set monitor visibility' }"
@@ -124,7 +124,7 @@ import { useRenameWidget } from '@/components/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { filterOwnProperties, useCodeEditor } from '@/components/editor/code-editor/spx-code-editor'
 import EditorItemDetail from '../../../common/EditorItemDetail.vue'
-import monitorIcon from '../monitor.svg?raw'
+import mntIcon from '../monitor.svg?raw'
 
 const props = defineProps<{
   monitor: Monitor
@@ -200,39 +200,10 @@ function wrapUpdateHandler<Args extends any[]>(
 }
 </script>
 
-<style lang="scss" scoped>
-.wrapper {
-  background-color: var(--ui-color-grey-100);
-}
-
-.content {
-  padding: 20px 0;
-  display: flex;
-  gap: 32px;
-  justify-content: center;
-}
-
-.preview {
-  flex: 0 0 auto;
-  width: 96px;
-  height: 96px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 8px;
-  background: var(--ui-color-grey-300);
-
-  :deep(svg) {
-    width: 44px;
-    height: 44px;
-  }
-}
-
-.controls {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+<style scoped>
+.monitor-icon :deep(svg) {
+  width: 44px;
+  height: 44px;
 }
 
 .divider {
@@ -241,21 +212,4 @@ function wrapUpdateHandler<Args extends any[]>(
   height: 1px;
   background: repeating-linear-gradient(90deg, var(--ui-color-grey-500) 0 4px, #0000 0 7px);
 }
-
-.line {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-}
-
-.input {
-  width: 180px;
-}
-
-.with-label {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  word-break: keep-all;
-}
 </style>

From 3162053072e4c13c37121f8fb3217fad3bf808cc Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Thu, 2 Apr 2026 10:55:45 +0800
Subject: [PATCH 08/29] almost done

---
 docs/develop/tailwind-css-migration.md        |  24 +-
 spx-gui/AGENTS.md                             |  74 +++--
 .../asset/preprocessing/common/ImgPreview.vue |  11 +-
 spx-gui/src/components/common/CodeView.vue    | 108 +++---
 .../copilot/custom-elements/HighlightLink.vue |   2 +-
 .../src/components/editor/ProjectEditor.vue   |   2 +-
 .../ui/input-helper/SpxDirectionInput.vue     |  26 +-
 .../ui/input-helper/SpxKeyInput.vue           |  24 +-
 .../spx-color-input/ColorSlider.vue           |   4 +-
 .../spx-color-input/SpxColorInput.vue         |  69 ++--
 .../spx-effect-input/SpxEffectKindInput.vue   |  15 +-
 .../ui/resource/SpxResourceItem.vue           |   2 -
 .../xgo-code-editor/ui/CodeEditorCard.vue     |  10 +-
 .../xgo-code-editor/ui/CodeEditorUI.vue       |  35 +-
 .../xgo-code-editor/ui/MonacoEditor.vue       |   4 +-
 .../xgo-code-editor/ui/ZoomControl.vue        |  31 +-
 .../ui/api-reference/APIReferenceItem.vue     |  67 ++--
 .../ui/api-reference/APIReferenceUI.vue       |  84 ++---
 .../ui/command/CommandIcon.vue                |  14 +-
 .../ui/completion/CompletionCard.vue          |  37 +--
 .../ui/context-menu/ContextMenuTrigger.vue    |  27 +-
 .../ui/definition/DefinitionDetailWrapper.vue |   8 +-
 .../ui/definition/DefinitionIcon.vue          |  14 +-
 .../ui/definition/DefinitionItem.vue          |  13 +-
 .../definition/DefinitionOverviewWrapper.vue  |   2 +-
 .../ui/diagnostics/DiagnosticsUI.vue          |   2 +-
 .../ui/document-tab/DocumentTab.vue           |  38 +--
 .../ui/document-tab/DocumentTabs.vue          |  60 +---
 .../ui/drop-indicator/DropIndicatorUI.vue     |  23 +-
 .../xgo-code-editor/ui/hover/ActionButton.vue |  14 +-
 .../xgo-code-editor/ui/hover/HoverCard.vue    |  34 +-
 .../ui/hover/HoverCardContent.vue             |   8 +-
 .../xgo-code-editor/ui/hover/HoverUI.vue      |   4 +-
 .../ui/inlay-hint/InlayHintUI.vue             |   2 +-
 .../ui/input-helper/BooleanInput.vue          |  37 +--
 .../ui/input-helper/DecimalInput.vue          |   2 +-
 .../ui/input-helper/InputHelper.vue           |  33 +-
 .../ui/input-helper/InputHelperUI.vue         |  26 +-
 .../ui/input-helper/IntegerInput.vue          |   2 +-
 .../ui/input-helper/ResourceInput.vue         |  31 +-
 .../xgo-code-editor/ui/markdown/CodeBlock.vue |  11 +-
 .../ui/markdown/DiagnosticItem.vue            |  38 +--
 .../ui/markdown/InputValuePreview.vue         |  60 +---
 .../ui/markdown/MarkdownView.vue              | 157 ++++-----
 .../components/editor/navbar/EditorNavbar.vue |  86 ++---
 .../navbar/EditorProjectDisplayName.vue       |  48 +--
 .../editor/preview/EditorPreview.vue          | 111 ++-----
 .../sprite/SpriteCollisionEditorModal.vue     |   7 +-
 .../src/components/navbar/NavbarWrapper.vue   |   2 +-
 .../project/runner/ProjectRunner.vue          |  58 +---
 .../project/runner/ProjectRunnerSurface.vue   | 258 ++++++---------
 spx-gui/src/components/ui/UIDivider.vue       |   4 +-
 spx-gui/src/pages/community/project.vue       | 312 +++++-------------
 spx-gui/src/utils/spotlight/SpotlightUI.vue   |  80 ++---
 54 files changed, 784 insertions(+), 1471 deletions(-)

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
index 92d48d0e6..1c745d0c0 100644
--- a/docs/develop/tailwind-css-migration.md
+++ b/docs/develop/tailwind-css-migration.md
@@ -530,21 +530,16 @@ Preferred style:
 - if the wrapper already owns the root layout semantics, use an outer wrapper for positioning concerns such as `absolute`, `top`, `left`, and `z-index`
 - for one-off width/height overrides on wrapper roots such as `UIIcon`, prefer inline `style` when that is the shortest and clearest way to win the cascade
 
-### 10.5. Keep Scrollbar-Reserve Padding And Its Comments In Local CSS
+### 11. Keep Exact Local Values Local, With A Visible TODO
 
-Some scroll containers use asymmetric padding together with `scrollbar-width: thin` so optional scrollbars do not overlap content.
+Some migrated components still need exact local visual values that are not part of the current token system.
 
 Preferred style:
 
-- when the original local CSS includes a comment that explains scrollbar-reserve padding, keep that padding in local CSS instead of moving it fully into Tailwind utilities
-- preserve comments such as "no right padding to allow optional scrollbar" when they still describe a real layout constraint
-- this applies especially to scroll wrappers like list panels or sidebars where `padding-right: 0` is intentional rather than a generic spacing choice
-
-Rule of thumb:
-
-- if `scrollbar-width: thin` and asymmetric padding belong to the same layout constraint, keep them together in the local CSS block
+- keep those values local instead of forcing them into the global theme bridge
+- add a nearby comment such as `TODO: review this ... value` so later cleanup can decide whether the value should remain local or become a token
 
-### 10.6. Flatten `:deep(...)` Selectors In Plain Scoped CSS
+### 12. Flatten `:deep(...)` Selectors In Plain Scoped CSS
 
 When a file is migrated from SCSS to plain scoped CSS, nested `:deep(...)` forms should not be carried over mechanically.
 
@@ -554,15 +549,6 @@ Preferred style:
 - be especially careful in `v-html` or raw-SVG cases, where the descendant content does not receive the component's scoped attribute and depends on the `:deep(...)` selector being compiled correctly
 - keep SCSS-style nesting only in files that still explicitly use SCSS
 
-### 11. Keep Exact Local Values Local, With A Visible TODO
-
-Some migrated components still need exact local visual values that are not part of the current token system.
-
-Preferred style:
-
-- keep those values local instead of forcing them into the global theme bridge
-- add a nearby comment such as `TODO: review this ... value` so later cleanup can decide whether the value should remain local or become a token
-
 ## Recommendation
 
 Tailwind CSS is worth evaluating in `spx-gui`, but only as a constrained utility layer.
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index f968cabdb..d87421191 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -82,38 +82,50 @@ When working with backend unique string identifiers such as `username`, project
 
 ## Styling Preferences
 
-* For business code outside `src/components/ui/`, prefer Tailwind as the default way to implement local layout and surface styling.
-* If business code still needs local authored styles, prefer plain CSS over SCSS.
+### Defaults
+
+* Outside `src/components/ui/`, use Tailwind as the default for local layout and surface styling.
+* Keep styles local to the page/feature/component. Do not move local styles into `src/app.css`.
+* Prefer readable template utilities and remove redundant local style blocks after migration.
+* If local authored styles are still needed, prefer plain CSS over SCSS.
+
+### Boundaries and Source of Truth
+
+* Keep `src/app.css` limited to Tailwind entry setup, theme bridge, and rare project-wide utilities.
+* Keep `src/components/ui/global.css` and `src/components/ui/reset.css` as the base reset/foundation layer (Tailwind preflight stays disabled).
+* Keep `--ui-*` tokens as the source of truth.
+* In Tailwind classes, prefer bridged semantic tokens (for example `text-text`, `text-title`, `bg-primary-100`).
+* In local CSS/SCSS, prefer direct `--ui-*` variables instead of bridged Tailwind variables.
+
+### Responsive and Theme Rules
+
+* Keep breakpoints in `src/app.css` aligned with `src/components/ui/responsive.ts`.
+* Use only `tablet`, `desktop`, and `desktop-large` responsive names.
+* Prefer responsive CSS/Tailwind variants over `useResponsive()`; keep `useResponsive()` for non-style runtime logic.
+* Keep Tailwind theme namespaces reset to project tokens only (color, shadow, font, text, radius, etc.).
+
+### When Local CSS/SCSS Is Better
+
+* Keep local CSS/SCSS for `:deep(...)`, generated content, third-party DOM overrides, and complex stateful widgets.
+* Prefer plain local CSS over complex Tailwind descendant/arbitrary selectors for cross-component or slot-content styling.
+* Preserve semantic hook classes used by parent selectors or slots (for example `.corner-menu`, `.course-item-mini`).
+* For newly added components, avoid introducing `:deep(...)` selectors and cross-file hook classes when possible, since they increase maintenance cost.
+* Do not force full Tailwind conversion when a small local style block is clearer.
+
+### Practical Migration Notes
+
+* Preserve exact `flex: <grow> <shrink> <basis>` semantics with `flex-[<grow>_<shrink>_<basis>]`.
+* Prefer `:style` for one-off values when clearer than Tailwind arbitrary utilities.
+* For important/non-obvious background assets, prefer TS imports and inline `backgroundImage` binding.
+* For `UIImg`, `UIIcon`, and similar wrappers, verify root-style conflicts; use an outer layout wrapper if needed.
+* In plain `<style scoped>`, flatten `:deep(...)` selectors (for example `.preview :deep(svg)`).
+* Keep single-use values local; only add setup variables when reused/computed or clearly improving readability.
+* Preserve meaningful existing comments/TODOs. For exact local non-token values, keep them local and add a nearby `TODO` for later tokenization review.
+
+### UI Package Transitional Rule
+
+* In `src/components/ui/`, the long-term direction is still Tailwind/plain CSS, but local SCSS is allowed temporarily when it is clearly the most readable option.
 * Do not add or keep business-code imports of SCSS helpers from `src/components/ui/`.
-* For `src/components/ui/`, the long-term direction is the same, but this phase still allows local SCSS where it remains the clearest implementation.
-* Keep [src/app.css](src/app.css) limited to Tailwind entry setup, the theme bridge, and rare project-wide utilities.
-* Tailwind preflight is intentionally disabled in `src/app.css`. Keep [src/components/ui/global.css](src/components/ui/global.css) and [src/components/ui/reset.css](src/components/ui/reset.css) as the project's base layer for reset and foundation styles.
-* Do not move page-local or feature-local styles into `src/app.css` just because they are written with Tailwind.
-* Keep page-specific dimensions, transforms, colors, and card/banner styling local to the relevant page or component.
-* Keep the existing `--ui-*` design token system as the source of truth.
-* In Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`.
-* In local CSS or SCSS rules, prefer using the original `--ui-*` variables directly instead of routing those rules back through Tailwind bridge variables.
-* For theme namespaces already covered by the design system, such as color, shadow, font, font-size, radius, and line-height, reset Tailwind's default values in `src/app.css` and expose only the project-specific values intended for use in this repo.
-* Keep the project breakpoint mapping in `src/app.css` aligned with `src/components/ui/responsive.ts`.
-* Reset Tailwind's default breakpoint names in `src/app.css` and use only the project-specific names `tablet`, `desktop`, and `desktop-large` in responsive classes.
-* For responsive styling, prefer Tailwind responsive variants over runtime `useResponsive()` checks.
-* Keep `useResponsive()` for non-style logic only, such as changing fetched counts or other runtime behavior that CSS cannot express.
-* Prefer Tailwind for straightforward layout and surface styling: flex, grid, spacing, sizing, alignment, overflow, simple typography, and simple hover states.
-* When original CSS uses `flex: <grow> <shrink> <basis>`, preserve it with `flex-[<grow>_<shrink>_<basis>]` instead of decomposing it into partial utilities such as `shrink-0`.
-* When Tailwind classes stay readable, write them directly in the template and remove the local style block after verification.
-* Keep local CSS or SCSS for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets.
-* Preserve semantic hook classes that are consumed by parent selectors, slot content, or `:deep(...)` rules. Do not remove classes such as `.corner-menu` or `.course-item-mini` just because the element's own visual styles moved to Tailwind.
-* Prefer plain local CSS over Tailwind arbitrary descendant selectors for cross-component styling, slot-content targeting, and `:deep(...)` behavior. Keep Tailwind for the authored layout, but keep these cross-component hooks easy to read and audit.
-* Do not force a file to become fully Tailwind if a small amount of local CSS or SCSS remains the clearest expression.
-* Use `:style` for one-off values that are clearer inline than as Tailwind arbitrary values or custom utilities.
-* For important or non-obvious background assets, prefer TypeScript imports plus inline `backgroundImage` binding over Tailwind `bg-[url(...)]` classes.
-* Before styling `UIImg`, `UIIcon`, or similar wrappers with root-level positioning or sizing utilities, check whether the component already styles its own root element. If those internal root styles conflict, prefer an outer wrapper for layout and inline `style` for one-off width/height overrides.
-* If a scroll container keeps `scrollbar-width: thin` together with asymmetric padding to reserve optional scrollbar space, keep that padding in local CSS and preserve any existing explanatory comment instead of forcing the padding into template utilities.
-* In plain `<style scoped>`, flatten `:deep(...)` selectors such as `.preview :deep(svg)` instead of carrying over nested SCSS-style forms like `.preview { :deep(svg) { ... } }`, especially for `v-html` or injected SVG content.
-* Do not introduce setup variables for single-use style values unless they are reused, computed, or materially improve readability.
-* When a non-token visual value needs to remain exact and local, keep it local instead of forcing it into the global token bridge. Add a nearby comment such as `TODO: review this ... value` so it is visible in later design cleanup or tokenization work.
-* When extending the Tailwind theme bridge in `src/app.css`, choose token names that do not collide with Tailwind defaults or existing UI-library class names. Define text-size tokens before using named utilities like `text-24`, and use `--text-*-line-height` when a named text utility should carry a default line-height.
-* Preserve existing comments and TODOs during style migration when they still explain a real styling constraint or follow-up.
 
 ### Menu Item Text Guidelines
 
diff --git a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
index f9d346446..9e02106f9 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
@@ -1,6 +1,6 @@
 <template>
-  <section ref="wrapperRef" class="img-preview flex w-full items-center justify-center" :style="wrapperStyle">
-    <canvas ref="canvasRef" class="bg-bottom-left bg-repeat bg-[url('./img-bg.svg')]"></canvas>
+  <section ref="wrapperRef" class="flex w-full items-center justify-center [&+&]:mt-5" :style="wrapperStyle">
+    <canvas ref="canvasRef" class="bg-bottom-left bg-repeat" :style="{ backgroundImage: `url(${imgBgUrl})` }"></canvas>
   </section>
 </template>
 
@@ -10,6 +10,7 @@ import { useFileImg } from '@/utils/file'
 import { useContentSize } from '@/utils/dom'
 import { getImgDrawingCtx } from '@/utils/canvas'
 import type { File } from '@/models/common/file'
+import imgBgUrl from './img-bg.svg'
 
 const props = defineProps<{
   file: File
@@ -66,9 +67,3 @@ defineExpose({
   }
 })
 </script>
-
-<style scoped>
-.img-preview + .img-preview {
-  margin-top: 20px;
-}
-</style>
diff --git a/spx-gui/src/components/common/CodeView.vue b/spx-gui/src/components/common/CodeView.vue
index 22b79243e..21a4f1248 100644
--- a/spx-gui/src/components/common/CodeView.vue
+++ b/spx-gui/src/components/common/CodeView.vue
@@ -132,89 +132,97 @@ function stringifyElCnt(el: ElementContent): string {
   <code v-if="mode === 'inline'" class="code-view" :style="{ tabSize }" v-html="codeHtml"></code>
   <div
     v-else
-    class="code-view block"
+    class="code-view is-block"
     :class="{ 'has-line-numbers': hasLineNumbers, addition, deletion }"
     :style="{ tabSize }"
     v-html="codeHtml"
   ></div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .code-view {
   font-family: var(--ui-font-family-code);
   font-size: 1em;
+}
 
-  :deep(.param-inlay-hint) {
-    color: var(--ui-color-hint-2) !important;
-    &::after {
-      content: ':';
-    }
-  }
+.code-view :deep(.param-inlay-hint) {
+  color: var(--ui-color-hint-2) !important;
 }
 
-.block :deep(pre) {
+.code-view :deep(.param-inlay-hint)::after {
+  content: ':';
+}
+
+.is-block :deep(pre) {
   min-width: fit-content;
 }
 
 .has-line-numbers {
   container-type: inline-size;
+}
 
-  :deep(pre) {
-    position: relative;
-    padding-left: 26px;
-    counter-reset: step;
-    counter-increment: step 0;
-  }
+.has-line-numbers :deep(pre) {
+  position: relative;
+  padding-left: 26px;
+  counter-reset: step;
+  counter-increment: step 0;
+}
+
+.has-line-numbers :deep(.line::before) {
+  content: counter(step);
+  counter-increment: step;
+  position: absolute;
+  left: 0;
+  width: 18px;
+  display: inline-block;
+  text-align: right;
+  color: #34819b;
+}
 
-  :deep(.line::before) {
-    content: counter(step);
-    counter-increment: step;
-    position: absolute;
-    left: 0;
-    width: 18px;
-    display: inline-block;
-    text-align: right;
-    color: #34819b;
+/* If the container is too narrow, hide line numbers. */
+@container (width < 15em) {
+  .has-line-numbers :deep(pre) {
+    padding-left: 0;
   }
 
-  // If the container is too narrow, hide line numbers
-  @container (width < 15em) {
-    :deep(pre) {
-      padding-left: 0;
-    }
-    :deep(.line::before) {
-      content: none;
-    }
+  .has-line-numbers :deep(.line::before) {
+    content: none;
   }
 }
 
 .addition,
 .deletion {
-  :deep(> pre) {
-    position: relative;
-    padding-left: 24px;
-    // Disable default background and show background from parent (addition/deletion)
-    background-color: transparent !important;
-  }
-  :deep(.line::before) {
-    position: absolute;
-    left: 8px;
-    width: 1em;
-    display: inline-block;
-  }
+}
+
+.addition :deep(> pre),
+.deletion :deep(> pre) {
+  position: relative;
+  padding-left: 24px;
+  /* Disable default background and show background from parent (addition/deletion). */
+  background-color: transparent !important;
+}
+
+.addition :deep(.line::before),
+.deletion :deep(.line::before) {
+  position: absolute;
+  left: 8px;
+  width: 1em;
+  display: inline-block;
 }
 
 .addition {
   background: var(--ui-color-green-100);
-  :deep(code .line::before) {
-    content: '+';
-  }
+}
+
+.addition :deep(code .line::before) {
+  content: '+';
 }
 
 .deletion {
   background: var(--ui-color-red-100);
-  :deep(code .line::before) {
-    content: '-';
-  }
+}
+
+.deletion :deep(code .line::before) {
+  content: '-';
 }
 </style>
diff --git a/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue b/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
index f1c6fa9cf..4fe05da38 100644
--- a/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
+++ b/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
@@ -61,7 +61,7 @@ const { fn: handleClick } = useMessageHandle(
 <template>
   <button
     type="button"
-    class="inline-block w-fit cursor-pointer rounded-[4px] border-none bg-turquoise-main px-1.25 py-0.5 text-13 font-semibold text-grey-100 outline-none hover:bg-turquoise-400 active:bg-turquoise-600"
+    class="inline-block w-fit cursor-pointer rounded-[4px] border-none bg-turquoise-main px-1.25 py-0.5 text-13/[normal] font-semibold text-grey-100 outline-none hover:bg-turquoise-400 active:bg-turquoise-600"
     @click="handleClick"
   >
     <slot></slot>
diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index c487d7310..150441021 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Using v-show preserves some page states, e.g. code editor scroll pos -->
-  <!-- overflow-visible: avoid cutting dropdown menu of CodeTextEditor (monaco) -->
+  <!-- Using overflow-visible class to avoid cutting dropdown menu of CodeTextEditor (monaco) -->
   <UICard
     v-show="isPreviewMode"
     v-radar="{ name: `Editor for ${selected.type}`, desc: `Main editor panel for editing ${selected.type}` }"
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirectionInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirectionInput.vue
index d1cc91e80..3895b419b 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirectionInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirectionInput.vue
@@ -30,13 +30,12 @@ function handleSubmit() {
   <div class="circle-container">
     <AnglePicker :model-value="value" @update:model-value="handleValueUpdate" />
   </div>
-  <div class="input-container">
+  <div class="flex items-center">
     <UINumberInput
       :value="value"
-      class="input"
+      class="input w-15.5 self-stretch text-center"
       :min="-180"
       :max="180"
-      :style="{ alignSelf: 'stretch' }"
       autofocus
       @update:value="handleValueUpdate"
       @keyup.enter="handleSubmit"
@@ -44,20 +43,11 @@ function handleSubmit() {
   </div>
 </template>
 
-<style lang="scss" scoped>
-.input-container {
-  display: flex;
-  align-items: center;
-}
-.input {
-  width: 62px;
-  text-align: center;
-
-  :deep(.n-input .n-input-wrapper) {
-    // Correcting uneven left/right padding in UINumberInput
-    // TODO: Dig and fix padding inconsistency in UINumberInput component
-    padding-left: 8px;
-    padding-right: 8px;
-  }
+<style scoped>
+.input :deep(.n-input .n-input-wrapper) {
+  /* Correcting uneven left/right padding in UINumberInput. */
+  /* TODO: Dig and fix padding inconsistency in UINumberInput component. */
+  padding-left: 8px;
+  padding-right: 8px;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
index f7612aefe..37e12a01f 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
@@ -49,34 +49,16 @@ function handleKeyDown(e: KeyboardEvent) {
 </script>
 
 <template>
-  <div class="spx-key-input">
+  <div class="flex self-stretch flex-col gap-1">
     <UITextInput
       v-radar="{ name: 'Key input', desc: 'Input field for detecting key press' }"
-      class="input"
+      class="text-center"
       :value="text"
       autofocus
       @keydown="handleKeyDown"
     />
-    <p class="tip">
+    <p class="text-center text-hint-1">
       {{ $t({ en: 'Press desired key', zh: '按下你想输入的按键' }) }}
     </p>
   </div>
 </template>
-
-<style scoped lang="scss">
-.spx-key-input {
-  align-self: stretch;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tip {
-  text-align: center;
-  color: var(--ui-color-hint-1);
-}
-
-.input {
-  text-align: center;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/ColorSlider.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/ColorSlider.vue
index 7ef4bac6a..9270dc239 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/ColorSlider.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/ColorSlider.vue
@@ -100,7 +100,7 @@ function handleBarClick(e: MouseEvent) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .color-slider {
   position: relative;
   width: 100%;
@@ -126,7 +126,7 @@ function handleBarClick(e: MouseEvent) {
   height: 30px;
   border-radius: 50%;
   border: 5px solid #fff;
-  box-shadow: 0px 12px 20px rgba(14, 18, 27, 0.12);
+  box-shadow: 0 12px 20px rgba(14, 18, 27, 0.12);
   transition: background-color 0.3s ease;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue
index e7657770c..59eb37428 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue
@@ -98,11 +98,11 @@ function handleSubmit() {
 </script>
 
 <template>
-  <div class="spx-color-input">
-    <section class="sliders">
+  <div class="flex w-78 flex-col gap-3">
+    <section class="flex flex-col gap-2">
       <div class="slider-wrapper">
-        <h5 class="slider-title">
-          {{ $t({ en: 'Hue: ', zh: '色相：' }) }}<span class="slider-value">{{ hue }}</span>
+        <h5 class="text-12">
+          {{ $t({ en: 'Hue: ', zh: '色相：' }) }}<span class="text-title">{{ hue }}</span>
         </h5>
         <ColorSlider
           v-model:value="hue"
@@ -110,8 +110,8 @@ function handleSubmit() {
         />
       </div>
       <div class="slider-wrapper">
-        <h5 class="slider-title">
-          {{ $t({ en: 'Saturation: ', zh: '饱和度：' }) }}<span class="slider-value">{{ saturation }}</span>
+        <h5 class="text-12">
+          {{ $t({ en: 'Saturation: ', zh: '饱和度：' }) }}<span class="text-title">{{ saturation }}</span>
         </h5>
         <ColorSlider
           v-model:value="saturation"
@@ -119,8 +119,8 @@ function handleSubmit() {
         />
       </div>
       <div class="slider-wrapper">
-        <h5 class="slider-title">
-          {{ $t({ en: 'Brightness: ', zh: '亮度：' }) }}<span class="slider-value">{{ brightness }}</span>
+        <h5 class="text-12">
+          {{ $t({ en: 'Brightness: ', zh: '亮度：' }) }}<span class="text-title">{{ brightness }}</span>
         </h5>
         <ColorSlider
           v-model:value="brightness"
@@ -129,52 +129,35 @@ function handleSubmit() {
       </div>
     </section>
     <UIDivider />
-    <section class="inputs">
+    <section class="flex gap-2">
       <UIButton v-if="isEyeDropperSupported" variant="stroke" color="boring" @click="handleOpenEyeDropper">
         <template #icon>
           <UIIcon type="eyedrop" />
         </template>
       </UIButton>
-      <UINumberInput v-model:value="hue" class="input" :min="0" :max="100" :step="1" @keyup.enter="handleSubmit">
+      <UINumberInput v-model:value="hue" class="flex-[1_1_0]" :min="0" :max="100" :step="1" @keyup.enter="handleSubmit">
         <template #prefix>H</template>
       </UINumberInput>
-      <UINumberInput v-model:value="saturation" class="input" :min="0" :max="100" :step="1" @keyup.enter="handleSubmit">
+      <UINumberInput
+        v-model:value="saturation"
+        class="flex-[1_1_0]"
+        :min="0"
+        :max="100"
+        :step="1"
+        @keyup.enter="handleSubmit"
+      >
         <template #prefix>S</template>
       </UINumberInput>
-      <UINumberInput v-model:value="brightness" class="input" :min="0" :max="100" :step="1" @keyup.enter="handleSubmit">
+      <UINumberInput
+        v-model:value="brightness"
+        class="flex-[1_1_0]"
+        :min="0"
+        :max="100"
+        :step="1"
+        @keyup.enter="handleSubmit"
+      >
         <template #prefix>B</template>
       </UINumberInput>
     </section>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.spx-color-input {
-  width: 312px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.sliders {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.slider-title {
-  font-size: 12px;
-  .slider-value {
-    color: var(--ui-color-title);
-  }
-}
-
-.inputs {
-  display: flex;
-  gap: 8px;
-}
-
-.input {
-  flex: 1 1 0;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-effect-input/SpxEffectKindInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-effect-input/SpxEffectKindInput.vue
index 5c8949c04..2a0fdd6a3 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-effect-input/SpxEffectKindInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-effect-input/SpxEffectKindInput.vue
@@ -21,7 +21,7 @@ const modelValue = defineModel<string>('value')
 </script>
 
 <template>
-  <ul class="items">
+  <ul class="w-94 max-h-70 overflow-y-auto flex-none flex flex-wrap content-start gap-2">
     <SpxEffectKindItem
       v-for="item in effectKinds"
       :key="item.name"
@@ -32,16 +32,3 @@ const modelValue = defineModel<string>('value')
     />
   </ul>
 </template>
-
-<style lang="scss" scoped>
-.items {
-  width: 376px;
-  max-height: 280px;
-  overflow-y: auto;
-  flex: 0 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/resource/SpxResourceItem.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/resource/SpxResourceItem.vue
index 58e29a940..cab4139f2 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/resource/SpxResourceItem.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/resource/SpxResourceItem.vue
@@ -62,5 +62,3 @@ const name = computed(() => {
   <WidgetItem v-else-if="model != null && isWidget(model)" :widget="model" :selectable="selectable" color="primary" />
   <div v-else>{{ $t({ zh: `未知资源（${name}）`, en: `Unknown resource (${name})` }) }}</div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue
index 78566b865..29009b957 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue
@@ -1,13 +1,5 @@
 <template>
-  <div class="code-editor-card">
+  <div class="rounded-1 bg-grey-100" style="box-shadow: 0 8px 28px 8px rgba(36, 41, 47, 0.08)">
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.code-editor-card {
-  border-radius: var(--ui-border-radius-1);
-  background: var(--ui-color-grey-100);
-  box-shadow: 0px 8px 28px 8px rgba(36, 41, 47, 0.08);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorUI.vue
index 2659a8aaf..df59ade01 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorUI.vue
@@ -309,7 +309,7 @@ providePopupContainer(codeEditorEl)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .code-editor {
   position: relative;
   flex: 1 1 0;
@@ -326,10 +326,10 @@ providePopupContainer(codeEditorEl)
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--ui-color-dividing-line-2);
+}
 
-  .api-reference {
-    flex: 1 1 0;
-  }
+.sidebar .api-reference {
+  flex: 1 1 0;
 }
 
 .resize-handle {
@@ -340,13 +340,14 @@ providePopupContainer(codeEditorEl)
   z-index: 10;
   cursor: col-resize;
   transition: background-color 0.2s;
+}
 
-  &:hover {
-    background-color: rgba(36, 41, 47, 0.05);
-  }
-  &.active {
-    background-color: rgba(36, 41, 47, 0.1);
-  }
+.resize-handle:hover {
+  background-color: rgba(36, 41, 47, 0.05);
+}
+
+.resize-handle.active {
+  background-color: rgba(36, 41, 47, 0.1);
 }
 
 .monaco-editor-conflict-free {
@@ -364,14 +365,14 @@ providePopupContainer(codeEditorEl)
   flex-direction: column;
   justify-content: space-between;
   gap: 40px;
+}
 
-  .document-tabs {
-    flex: 0 1 auto;
-    min-height: 0;
-  }
+.right-sidebar .document-tabs {
+  flex: 0 1 auto;
+  min-height: 0;
+}
 
-  .zoom-control {
-    flex: 0 0 auto;
-  }
+.right-sidebar .zoom-control {
+  flex: 0 0 auto;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/MonacoEditor.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/MonacoEditor.vue
index 7a660f63c..532a46c59 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/MonacoEditor.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/MonacoEditor.vue
@@ -98,9 +98,9 @@ watchEffect(async (onClenaup) => {
   <div ref="editorElRef" class="monaco-editor-conflict-free"></div>
 </template>
 
-<style lang="scss">
+<style>
 .monaco-editor-conflict-free > .monaco-editor {
-  // remove the default outline of monaco editor
+  /* Remove the default outline of Monaco editor. */
   outline: none;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
index 73ad6f017..c66d8a2f6 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
@@ -11,7 +11,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="zoomer">
+  <div class="flex flex-col items-center gap-1">
     <!-- eslint-disable vue/no-v-html -->
     <button
       v-radar="{ name: 'Zoom in', desc: 'Zoom in the code editor' }"
@@ -37,33 +37,10 @@ const emit = defineEmits<{
   </div>
 </template>
 
-<style lang="scss" scoped>
-.zoomer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
+<style scoped>
+@reference "../../../../../app.css";
 
 .zoom-btn {
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  border-radius: 12px;
-  color: var(--ui-color-text);
-  background: none;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: var(--ui-color-grey-300);
-  }
-  &:active {
-    background-color: var(--ui-color-grey-400);
-  }
+  @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-2 border-0 bg-transparent p-0 text-text transition-colors hover:bg-grey-300 active:bg-grey-400;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue
index 98ff65887..84e648e67 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue
@@ -113,16 +113,16 @@ function handleMouseUp(e: MouseEvent) {
         @mouseup.passive="handleMouseUp"
         @click="handleInsert"
       >
-        <DefinitionOverviewWrapper class="overview" :kind="item.kind" :inlay-hints="parsed.inlayHints">{{
-          parsed.overview
-        }}</DefinitionOverviewWrapper>
+        <DefinitionOverviewWrapper class="overview" :kind="item.kind" :inlay-hints="parsed.inlayHints">
+          {{ parsed.overview }}
+        </DefinitionOverviewWrapper>
       </li>
     </template>
     <HoverCard :actions="hoverCardActions" @action="hideDropdown">
       <HoverCardContent>
-        <DefinitionOverviewWrapper :kind="item.kind" :inlay-hints="parsed.inlayHints">{{
-          parsed.overview
-        }}</DefinitionOverviewWrapper>
+        <DefinitionOverviewWrapper :kind="item.kind" :inlay-hints="parsed.inlayHints">
+          {{ parsed.overview }}
+        </DefinitionOverviewWrapper>
         <DefinitionDetailWrapper>
           <MarkdownView v-bind="item.detail" />
         </DefinitionDetailWrapper>
@@ -131,46 +131,49 @@ function handleMouseUp(e: MouseEvent) {
   </UIDropdown>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .api-reference-item {
-  padding: 1px 7px;
   align-self: flex-start;
   max-width: 100%;
+  padding: 1px 7px;
   border-radius: var(--ui-border-radius-1);
   border: 1px solid var(--ui-color-grey-400);
   background: var(--ui-color-grey-100);
-  box-shadow: 0px 1px 8px 0px rgba(10, 13, 20, 0.05);
-  transition: 0.2s;
+  box-shadow: 0 1px 8px 0 rgba(10, 13, 20, 0.05);
+  transition: all 0.2s;
   cursor: pointer;
-  scroll-margin-top: 42px; // 42px for sticky title, to ensure the item correctly scrolled-into-view
-  scroll-margin-bottom: 16px; // with 16px offset it is easier to be found when scrolled into view
-
-  // Preserve `border-radius` when dragging, see details: https://github.com/react-dnd/react-dnd/issues/788
+  /* 42px for sticky title, to ensure the item correctly scrolled into view. */
+  scroll-margin-top: 42px;
+  /* With 16px offset it is easier to find when scrolled into view. */
+  scroll-margin-bottom: 16px;
+  /* Preserve `border-radius` when dragging, see details: https://github.com/react-dnd/react-dnd/issues/788 */
   transform: translate(0, 0);
+}
 
-  &:hover {
-    background: var(--ui-color-grey-300);
-    box-shadow: 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
-  }
+.api-reference-item:hover {
+  background: var(--ui-color-grey-300);
+  box-shadow: 0 1px 2px 0 rgba(10, 13, 20, 0.03);
+}
 
-  &.before-dragging {
-    // Adjust transparency for dragging to avoid visual obstruction
-    background-color: rgba(from var(--ui-color-grey-300) r g b / 0.6);
-    .overview {
-      opacity: 0.6;
-    }
-  }
+.api-reference-item.before-dragging {
+  /* Adjust transparency for dragging to avoid visual obstruction */
+  background-color: rgba(from var(--ui-color-grey-300) r g b / 0.6);
+}
+
+.api-reference-item.before-dragging .overview {
+  opacity: 0.6;
 }
 
 .overview {
+  padding-top: 2px;
+  padding-bottom: 1px;
   word-break: break-all;
-  padding: 2px 0 1px;
+}
 
-  :deep(> code) {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--ui-color-hint-2);
-  }
+.overview :deep(> code) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ui-color-hint-2);
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
index 024fca7f6..41845662e 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
@@ -1,4 +1,7 @@
 <script lang="ts">
+import { type LocaleMessage } from '@/utils/i18n'
+import type { APIReferenceItem } from '.'
+
 type SubCategory = {
   id: string
   label: LocaleMessage
@@ -21,13 +24,12 @@ function belongs(item: APIReferenceItem, mcid: string, scid: string) {
 <script setup lang="ts">
 import { throttle } from 'lodash'
 import { computed, ref, shallowRef, watch, watchEffect } from 'vue'
-import { type LocaleMessage } from '@/utils/i18n'
 import { ActionException, Cancelled } from '@/utils/exception'
 import { getCleanupSignal } from '@/utils/disposable'
 import { untilTaskScheduled } from '@/utils/utils'
 import { UIError } from '@/components/ui'
 import { stringifyDefinitionId, type DefinitionDocumentationItem } from '../../common'
-import type { APIReferenceController, APIReferenceItem } from '.'
+import type { APIReferenceController } from '.'
 import APIReferenceItemComp from './APIReferenceItem.vue'
 import { useRegisterUpdateRouteLoaded } from '@/utils/route-loading'
 
@@ -162,7 +164,7 @@ function handleCategoryClick(id: string) {
           v-for="c in categoriesComputed"
           :key="c.id"
           class="category"
-          :class="{ active: c.id === activeCategoryIdRef }"
+          :data-active="c.id === activeCategoryIdRef || null"
           :style="{ '--category-color': c.color }"
           @click="handleCategoryClick(c.id)"
         >
@@ -190,7 +192,7 @@ function handleCategoryClick(id: string) {
   </section>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .api-reference-ui {
   display: flex;
   justify-content: stretch;
@@ -217,23 +219,23 @@ function handleCategoryClick(id: string) {
   color: var(--category-color);
   cursor: pointer;
   transition: 0.1s;
+}
 
-  &.active {
-    color: var(--ui-color-grey-100);
-    background-color: var(--category-color);
-  }
+.category[data-active='true'] {
+  color: var(--ui-color-grey-100);
+  background-color: var(--category-color);
+}
 
-  .icon {
-    width: 24px;
-    height: 24px;
-  }
+.category .icon {
+  width: 24px;
+  height: 24px;
+}
 
-  .label {
-    margin-top: 2px;
-    text-align: center;
-    font-size: 10px;
-    line-height: 1.6;
-  }
+.category .label {
+  margin-top: 2px;
+  text-align: center;
+  font-size: 10px;
+  line-height: 1.6;
 }
 
 .items-wrapper {
@@ -241,32 +243,32 @@ function handleCategoryClick(id: string) {
   padding: 0 16px 12px;
   overflow-y: auto;
   scrollbar-width: thin;
+}
 
-  .subcategory-wrapper {
-    border-bottom: 1px dashed var(--ui-color-grey-500);
-  }
+.items-wrapper .subcategory-wrapper {
+  border-bottom: 1px dashed var(--ui-color-grey-500);
+}
 
-  .category-wrapper:last-child .subcategory-wrapper:last-child {
-    padding-bottom: 0;
-    border-bottom: none;
-  }
+.items-wrapper .category-wrapper:last-child .subcategory-wrapper:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}
 
-  .title {
-    position: sticky;
-    z-index: 10;
-    top: 0;
-    padding: 12px 0;
-    font-size: 12px;
-    line-height: 1.5;
-    color: var(--ui-color-hint-2);
-    background-color: var(--ui-color-grey-100);
-  }
+.items-wrapper .title {
+  position: sticky;
+  z-index: 10;
+  top: 0;
+  padding: 12px 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--ui-color-hint-2);
+  background-color: var(--ui-color-grey-100);
+}
 
-  .items {
-    padding-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-gap-middle);
-  }
+.items-wrapper .items {
+  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/command/CommandIcon.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/command/CommandIcon.vue
index 0dee3edd5..903ff0382 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/command/CommandIcon.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/command/CommandIcon.vue
@@ -25,17 +25,5 @@ const typeIconMap = {
 
 <template>
   <!-- eslint-disable-next-line vue/no-v-html -->
-  <div class="command-icon" v-html="typeIconMap[type]"></div>
+  <div class="h-4 w-4 [&_svg]:h-full [&_svg]:w-full" v-html="typeIconMap[type]"></div>
 </template>
-
-<style lang="scss" scoped>
-.command-icon {
-  width: 16px;
-  height: 16px;
-
-  &:deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue
index 90d38d0bd..c590e6bbc 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue
@@ -68,8 +68,8 @@ function applyItem(item: InternalCompletionItem) {
 </script>
 
 <template>
-  <CodeEditorCard class="completion-card">
-    <ul class="list">
+  <CodeEditorCard class="flex max-h-56.75 w-111.75 items-stretch py-3 pr-0 pl-3 text-12">
+    <ul class="flex min-h-0 flex-none flex-col gap-2 overflow-y-auto pr-3 [scrollbar-width:thin]">
       <CompletionItemComp
         v-for="(item, i) in items"
         :key="i"
@@ -78,39 +78,8 @@ function applyItem(item: InternalCompletionItem) {
         @click="applyItem(item)"
       />
     </ul>
-    <div class="completion-item-detail">
+    <div class="flex-[1_1_0] overflow-y-auto border-l border-dividing-line-2 px-3 py-1.5 [scrollbar-width:thin]">
       <MarkdownView v-if="activeItem?.documentation != null" v-bind="activeItem.documentation" />
     </div>
   </CodeEditorCard>
 </template>
-
-<style lang="scss" scoped>
-.completion-card {
-  width: 447px;
-  max-height: 227px;
-  padding: 12px 0 12px 12px;
-  display: flex;
-  align-items: stretch;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.list {
-  padding-right: 12px;
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 0;
-  overflow-y: auto;
-  scrollbar-width: thin;
-}
-
-.completion-item-detail {
-  flex: 1 1 0;
-  padding: 6px 12px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  border-left: 1px solid var(--ui-color-dividing-line-2);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenuTrigger.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenuTrigger.vue
index e20f25972..b91530068 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenuTrigger.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenuTrigger.vue
@@ -18,7 +18,11 @@ function handleClick(e: MouseEvent) {
 </script>
 
 <template>
-  <button class="context-menu-trigger" type="button" @click="handleClick">
+  <button
+    class="fixed -ml-5 flex cursor-pointer border-0 bg-grey-100 p-0 text-yellow-main opacity-80 outline-none transition-all hover:text-yellow-600 hover:opacity-100"
+    type="button"
+    @click="handleClick"
+  >
     <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M13.5 7.07985C13.5225 8.54986 12.8026 9.68994 11.9026 10.7324C11.5471 11.1487 11.2298 11.5469 11.0453 12.0389C11.0123 12.1266 10.9327 12.1874 10.8397 12.1874H9.41254C9.28804 12.1874 9.1875 12.0869 9.1875 11.9624V9.98244L10.5225 8.64742C10.74 8.42992 10.74 8.06988 10.5225 7.85238C10.305 7.63488 9.94498 7.63488 9.72748 7.85238L8.625 8.95485L7.52252 7.85238C7.30502 7.63488 6.94498 7.63488 6.72748 7.85238C6.50998 8.06988 6.50998 8.42992 6.72748 8.64742L8.0625 9.98244V11.9624C8.0625 12.0869 7.96196 12.1874 7.83746 12.1874H6.40118C6.30818 12.1874 6.22947 12.1274 6.19647 12.0404C6.00522 11.5394 5.68057 11.1337 5.31757 10.7099C4.50007 9.74992 3.75 8.5424 3.75 7.1249C3.75 4.3874 6.00746 2.1749 8.76746 2.2499C11.34 2.3249 13.455 4.51485 13.5 7.07985ZM10.65 13.3124C10.5615 13.3124 6.68854 13.3124 6.60004 13.3124C6.37504 13.3124 6.375 13.4999 6.375 13.4999C6.375 14.2499 6.62991 14.8124 7.03491 15.1874C7.43991 15.5624 8.0025 15.7499 8.625 15.7499C9.2475 15.7499 9.81009 15.5624 10.2151 15.1874C10.6201 14.8124 10.875 14.2499 10.875 13.4999C10.875 13.4999 10.875 13.3124 10.65 13.3124Z"
@@ -27,24 +31,3 @@ function handleClick(e: MouseEvent) {
     </svg>
   </button>
 </template>
-
-<style lang="scss" scoped>
-.context-menu-trigger {
-  position: fixed;
-  margin-left: -20px;
-  display: flex;
-  padding: 0;
-  border: none;
-  outline: none;
-  background: var(--ui-color-grey-100);
-  cursor: pointer;
-  color: var(--ui-color-yellow-main);
-  opacity: 0.8;
-  transition: 0.2s;
-
-  &:hover {
-    opacity: 1;
-    color: var(--ui-color-yellow-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetailWrapper.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetailWrapper.vue
index c4308437e..8368bc950 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetailWrapper.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetailWrapper.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="definition-detail-wrapper">
+  <div class="mt-0.5">
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.definition-detail-wrapper {
-  margin-top: 2px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionIcon.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionIcon.vue
index d5ca52b05..d07bd9b88 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionIcon.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionIcon.vue
@@ -19,17 +19,5 @@ function getIcon(kind: DefinitionKind) {
 
 <template>
   <!-- eslint-disable-next-line vue/no-v-html -->
-  <div class="definition-icon" v-html="getIcon(kind)"></div>
+  <div class="h-4 w-4 [&_svg]:h-full [&_svg]:w-full" v-html="getIcon(kind)"></div>
 </template>
-
-<style lang="scss" scoped>
-.definition-icon {
-  width: 16px;
-  height: 16px;
-
-  &:deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionItem.vue
index 75b548bba..da1b22b6e 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionItem.vue
@@ -9,19 +9,8 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="definition-item">
+  <div class="flex flex-col [&+&]:mt-2">
     <DefinitionOverviewWrapper>{{ props.overview }}</DefinitionOverviewWrapper>
     <DefinitionDetail :def-id="props.defId"><slot></slot></DefinitionDetail>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.definition-item {
-  display: flex;
-  flex-direction: column;
-}
-
-.definition-item + .definition-item {
-  margin-top: 8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
index 53ae32f46..a1ce42d90 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
@@ -15,7 +15,7 @@ defineProps<{
 </template>
 
 <style scoped>
-.def-overview-code {
+.def-overview-code.code-view {
   flex: 1 1 0;
   word-break: break-word;
 
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue
index 26f88acdb..6442102b7 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue
@@ -68,7 +68,7 @@ useDecorations(() => {
   <div></div>
 </template>
 
-<style lang="scss">
+<style>
 .code-editor-diagnostic-error-line-header,
 .code-editor-diagnostic-warning-line-header {
   width: 100% !important;
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
index 84c78f23a..26368a153 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
@@ -25,44 +25,12 @@ const [thumbnailUrl] = useFileUrl(() => props.textDocument.thumbnailFile)
     <template #trigger>
       <div
         v-radar="{ name: 'Code document tab', desc: `Click to open code of ${textDocument.id.uri}` }"
-        class="document-tab"
-        :class="{ active: isActive }"
+        class="document-tab flex h-10 w-10 flex-none items-center rounded-1 border-2 transition-all"
+        :class="isActive ? 'border-yellow-500 bg-yellow-200' : 'border-transparent bg-grey-300 cursor-pointer'"
         @click="emit('click')"
       >
-        <UIImg v-if="thumbnailUrl != null" class="thumbnail-img" :src="thumbnailUrl" />
+        <UIImg v-if="thumbnailUrl != null" class="h-full w-full rounded-[4px]" :src="thumbnailUrl" />
       </div>
     </template>
   </UITooltip>
 </template>
-
-<style lang="scss" scoped>
-.document-tab {
-  flex: 0 0 auto;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  border-radius: var(--ui-border-radius-1);
-  border: 2px solid transparent;
-  transition: 0.2s;
-  background-color: var(--ui-color-grey-300);
-
-  &.active {
-    border: 2px solid var(--ui-color-yellow-500);
-    background-color: var(--ui-color-yellow-200);
-  }
-
-  &:not(.active) {
-    cursor: pointer;
-    &:hover {
-      background-color: var(--ui-color-grey-300);
-    }
-  }
-}
-
-.thumbnail-img {
-  border-radius: 4px;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
index 977de752d..b8311e92e 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
@@ -24,7 +24,7 @@ function handleClose() {
 </script>
 
 <template>
-  <div class="document-tabs">
+  <div class="flex flex-col items-center">
     <DocumentTab
       v-if="mainTextDocument != null"
       :text-document="mainTextDocument"
@@ -32,8 +32,8 @@ function handleClose() {
       @click="handleTabClick(mainTextDocument)"
     />
     <template v-if="tempTextDocuments.length > 0">
-      <UIDivider class="divider" />
-      <div class="temp-tabs">
+      <UIDivider class="my-3 w-8" />
+      <div class="flex min-h-0 flex-[0_1_auto] flex-col gap-2 overflow-y-auto [scrollbar-width:none]">
         <DocumentTab
           v-for="textDocument in tempTextDocuments"
           :key="textDocument.id.uri"
@@ -45,58 +45,14 @@ function handleClose() {
       <UITooltip placement="right">
         {{ $t({ en: 'Close all', zh: '全部关闭' }) }}
         <template #trigger>
-          <button class="close-btn" @click="handleClose">
-            <UIIcon class="icon" type="closeCircle" />
+          <button
+            class="mt-2 flex h-10 w-10 flex-none cursor-pointer items-center justify-center rounded-1 border-0 bg-transparent text-inherit hover:bg-grey-300"
+            @click="handleClose"
+          >
+            <UIIcon type="closeCircle" style="width: 20px; height: 20px" />
           </button>
         </template>
       </UITooltip>
     </template>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.document-tabs {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.divider {
-  width: 32px;
-  margin: 12px 0;
-}
-
-.temp-tabs {
-  flex: 0 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  scrollbar-width: none;
-}
-
-.close-btn {
-  margin-top: 8px;
-  width: 40px;
-  height: 40px;
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: inherit;
-  border-radius: var(--ui-border-radius-1);
-
-  &:hover {
-    background-color: var(--ui-color-grey-300);
-  }
-
-  .icon {
-    width: 20px;
-    height: 20px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/drop-indicator/DropIndicatorUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/drop-indicator/DropIndicatorUI.vue
index d6ea31d61..abd0f0046 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/drop-indicator/DropIndicatorUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/drop-indicator/DropIndicatorUI.vue
@@ -45,14 +45,15 @@ useDecorations(() => {
   <div></div>
 </template>
 
-<style lang="scss">
+<style>
 .code-editor-drop-indicator-line,
 .code-editor-drop-indicator-line-header {
   background-color: var(--ui-color-grey-300);
 }
 
 .code-editor-drop-indicator-line {
-  z-index: -1; // Keep it under the indent line
+  /* Keep it under the indent line. */
+  z-index: -1;
 }
 
 .code-editor-drop-indicator-line-header {
@@ -62,15 +63,15 @@ useDecorations(() => {
 
 .code-editor-drop-indicator-insertion-point {
   position: relative;
+}
 
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 2px;
-    height: 100%;
-    background-color: #000;
-  }
+.code-editor-drop-indicator-insertion-point::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background-color: #000;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/ActionButton.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/ActionButton.vue
index 9a11f5e4f..71285b5df 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/ActionButton.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/ActionButton.vue
@@ -1,7 +1,7 @@
 <template>
   <UIButton variant="stroke" color="white">
-    <div class="action-content">
-      <CommandIcon class="icon" :type="icon" />
+    <div class="-mx-2 flex items-center justify-center gap-1">
+      <CommandIcon :type="icon" />
       <slot></slot>
     </div>
   </UIButton>
@@ -16,13 +16,3 @@ defineProps<{
   icon: CommandIconType
 }>()
 </script>
-
-<style lang="scss" scoped>
-.action-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  margin: 0 -8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue
index 78e796cf2..40fd4fcbc 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue
@@ -31,11 +31,11 @@ const handleAction = useMessageHandle(
 </script>
 
 <template>
-  <CodeEditorCard class="hover-card">
-    <ul class="body">
+  <CodeEditorCard class="flex flex-col items-stretch p-2">
+    <ul class="flex min-h-0 min-w-62.5 max-w-82 flex-col overflow-y-auto [scrollbar-width:thin]">
       <slot></slot>
     </ul>
-    <footer v-if="actions.length > 0" class="footer">
+    <footer v-if="actions.length > 0" class="mt-1.5 flex gap-3 border-t border-dividing-line-2 px-2 pt-3.5 pb-2">
       <ActionButton
         v-for="(action, i) in actions"
         :key="i"
@@ -47,31 +47,3 @@ const handleAction = useMessageHandle(
     </footer>
   </CodeEditorCard>
 </template>
-
-<style lang="scss" scoped>
-.hover-card {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding: 8px;
-}
-
-.body {
-  display: flex;
-  flex-direction: column;
-  min-width: 250px;
-  max-width: 328px;
-  min-height: 0;
-  max-height: 300px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-}
-
-.footer {
-  margin-top: 6px;
-  padding: 14px 8px 8px;
-  display: flex;
-  gap: 12px;
-  border-top: 1px solid var(--ui-color-dividing-line-2);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCardContent.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCardContent.vue
index 089f811c9..81913e861 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCardContent.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCardContent.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <li class="hover-card-content">
+  <li class="px-2 py-1.5">
     <slot></slot>
   </li>
 </template>
-
-<style lang="scss" scoped>
-.hover-card-content {
-  padding: 6px 8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverUI.vue
index 0a2692dab..139a23f67 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverUI.vue
@@ -82,8 +82,8 @@ useDecorations(() => {
   </UIDropdown>
 </template>
 
-<style lang="scss">
-// TODO: special style for hovered text?
+<style>
+/* TODO: special style for hovered text? */
 .code-editor-hovered-text {
   border-radius: 2px;
   background-color: var(--ui-color-grey-600);
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/inlay-hint/InlayHintUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/inlay-hint/InlayHintUI.vue
index 1672ccd80..19e69c935 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/inlay-hint/InlayHintUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/inlay-hint/InlayHintUI.vue
@@ -44,7 +44,7 @@ useDecorations(() => {
   <div></div>
 </template>
 
-<style lang="scss">
+<style>
 .code-editor-inlay-hint-label {
   color: var(--ui-color-hint-2) !important;
 }
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
index fea0db4c5..02b28cfe3 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
@@ -28,37 +28,24 @@ const modelValue = computed({
 </script>
 
 <template>
-  <UIRadioGroup v-model:value="modelValue" class="boolean-input" :style="{ alignSelf: 'stretch' }">
-    <UIRadio class="option" value="true">
+  <UIRadioGroup v-model:value="modelValue" class="flex self-stretch items-center gap-3 py-1.25">
+    <UIRadio
+      class="option flex h-8 flex-[1_1_0] items-center justify-center gap-0.5 rounded-2 border border-grey-400 transition-all"
+      value="true"
+    >
       <code>true</code>
     </UIRadio>
-    <UIRadio class="option" value="false">
+    <UIRadio
+      class="option flex h-8 flex-[1_1_0] items-center justify-center gap-0.5 rounded-2 border border-grey-400 transition-all"
+      value="false"
+    >
       <code>false</code>
     </UIRadio>
   </UIRadioGroup>
 </template>
 
-<style lang="scss" scoped>
-.boolean-input {
-  display: flex;
-  padding: 5px 0px;
-  align-items: center;
-  gap: 12px;
-}
-
-.option {
-  flex: 1 1 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2px;
-  height: 32px;
-  border-radius: 12px;
-  transition: 0.2s;
-  border: 1px solid var(--ui-color-grey-400);
-
-  &.n-radio--checked {
-    border: 1px solid var(--ui-color-primary-500);
-  }
+<style scoped>
+.option.n-radio--checked {
+  border: 1px solid var(--ui-color-primary-500);
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/DecimalInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/DecimalInput.vue
index a6c085b52..8964c063b 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/DecimalInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/DecimalInput.vue
@@ -29,5 +29,5 @@ function handleSubmit() {
 </script>
 
 <template>
-  <UINumberInput v-model:value="modelValue" :style="{ alignSelf: 'stretch' }" autofocus @keyup.enter="handleSubmit" />
+  <UINumberInput v-model:value="modelValue" class="self-stretch" autofocus @keyup.enter="handleSubmit" />
 </template>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue
index 4c9132220..a2963720c 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue
@@ -99,8 +99,8 @@ function handlePredefinedNameUpdate(name: string | null) {
 </script>
 
 <template>
-  <div class="input-helper">
-    <UITabRadioGroup class="kind-select" :value="kind" @update:value="(v) => handleKindUpdate(v as InputKind)">
+  <div class="flex min-w-86 flex-col items-center gap-5 px-4 pt-5 pb-6">
+    <UITabRadioGroup class="w-78" :value="kind" @update:value="(v) => handleKindUpdate(v as InputKind)">
       <UITabRadio :value="InputKind.InPlace">
         {{ $t(inPlaceValueTitle) }}
       </UITabRadio>
@@ -117,13 +117,13 @@ function handlePredefinedNameUpdate(name: string | null) {
         @update:value="handleInPlaceValueUpdate"
         @submit="emit('submit')"
       />
-      <div v-else class="unknown-type">
+      <div v-else class="text-center leading-8 text-hint-2">
         {{ $t({ en: 'Value not supported', zh: '不支持输入值' }) }}
       </div>
     </template>
     <UISelect
       v-if="kind === InputKind.Predefined"
-      class="predefined-select"
+      class="self-stretch"
       :placeholder="$t({ en: 'Choose a variable', zh: '选择变量' })"
       :value="predefinedName"
       @update:value="handlePredefinedNameUpdate"
@@ -134,28 +134,3 @@ function handlePredefinedNameUpdate(name: string | null) {
     </UISelect>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.input-helper {
-  min-width: 344px;
-  padding: 20px 16px 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-}
-
-.kind-select {
-  width: 312px;
-}
-
-.predefined-select {
-  align-self: stretch;
-}
-
-.unknown-type {
-  line-height: 32px;
-  text-align: center;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelperUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelperUI.vue
index e931abea1..faf5a7a5a 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelperUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelperUI.vue
@@ -154,7 +154,7 @@ const handleInputUpdate = useMessageHandle(
   </UIDropdown>
 </template>
 
-<style lang="scss">
+<style>
 .code-editor-input-helper-icon {
   position: relative;
   display: inline-block;
@@ -164,17 +164,19 @@ const handleInputUpdate = useMessageHandle(
   cursor: pointer;
   background-color: var(--ui-color-grey-400);
   transition: background-color 0.2s;
-  &:hover {
-    background-color: var(--ui-color-grey-500);
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: url(./pen.svg) no-repeat center center;
-    background-size: 80% 80%;
-  }
+}
+
+.code-editor-input-helper-icon:hover {
+  background-color: var(--ui-color-grey-500);
+}
+
+.code-editor-input-helper-icon::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: url(./pen.svg) no-repeat center center;
+  background-size: 80% 80%;
 }
 
 .code-editor-input-helper-inputing-bg {
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/IntegerInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/IntegerInput.vue
index dac54c6d9..9b9152ad6 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/IntegerInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/IntegerInput.vue
@@ -29,5 +29,5 @@ function handleSubmit() {
 </script>
 
 <template>
-  <UINumberInput v-model:value="modelValue" :style="{ alignSelf: 'stretch' }" autofocus @keyup.enter="handleSubmit" />
+  <UINumberInput v-model:value="modelValue" class="self-stretch" autofocus @keyup.enter="handleSubmit" />
 </template>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
index d7c7aff0a..04932dd50 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
@@ -54,7 +54,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <ul v-if="provider != null && selector != null" class="items">
+  <ul
+    v-if="provider != null && selector != null"
+    class="flex w-94 max-h-70 flex-none flex-wrap content-start gap-2 overflow-y-auto"
+  >
     <component
       :is="provider.provideResourceItemRenderer()"
       v-for="item in selector.items"
@@ -65,8 +68,8 @@ onMounted(() => {
     />
     <UIDropdown trigger="click" placement="top">
       <template #trigger>
-        <UIBlockItem class="add">
-          <UIIcon class="icon" type="plus" />
+        <UIBlockItem class="justify-center text-primary-main">
+          <UIIcon type="plus" style="width: 24px; height: 24px" />
         </UIBlockItem>
       </template>
       <UIMenu>
@@ -77,25 +80,3 @@ onMounted(() => {
     </UIDropdown>
   </ul>
 </template>
-
-<style lang="scss" scoped>
-.items {
-  width: 376px;
-  max-height: 280px;
-  overflow-y: auto;
-  flex: 0 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 8px;
-}
-
-.add {
-  justify-content: center;
-  color: var(--ui-color-primary-main);
-  .icon {
-    width: 24px;
-    height: 24px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/CodeBlock.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/CodeBlock.vue
index 9fa5f0f2f..42f4dca44 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/CodeBlock.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/CodeBlock.vue
@@ -10,16 +10,13 @@ const code = useSlotText()
 </script>
 
 <template>
-  <div class="code-block">
-    <CodeView class="code" :language="language" mode="block">{{ code }}</CodeView>
+  <div class="py-3 pl-3">
+    <CodeView class="code-view-root" :language="language" mode="block">{{ code }}</CodeView>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.code-block {
-  padding: 12px 0 12px 12px;
-}
-.code {
+<style scoped>
+.code-view-root {
   padding-right: 12px;
   min-width: 0;
   overflow-x: auto;
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
index 0eccaab1e..a9643413a 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
@@ -8,36 +8,16 @@ defineProps<{
 </script>
 
 <template>
-  <div class="diagnostic-item" :class="`severity-${severity}`">
-    <UIIcon class="icon" :type="severity" />
-    <div class="body">
+  <div
+    class="flex items-start gap-2 self-stretch px-2 py-1.5 rounded-1"
+    :class="{
+      'bg-yellow-200': severity === 'warning',
+      'bg-red-100': severity === 'error'
+    }"
+  >
+    <UIIcon :type="severity" style="margin-top: 3px" />
+    <div class="flex-1">
       <slot></slot>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.diagnostic-item {
-  padding: 6px 8px;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  align-self: stretch;
-  border-radius: 8px;
-
-  &.severity-warning {
-    background-color: var(--ui-color-yellow-200);
-  }
-  &.severity-error {
-    background-color: var(--ui-color-red-100);
-  }
-}
-
-.icon {
-  margin-top: 3px;
-}
-
-.body {
-  flex: 1;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/InputValuePreview.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/InputValuePreview.vue
index 2ba1a648f..80e40993d 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/InputValuePreview.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/InputValuePreview.vue
@@ -58,54 +58,20 @@ const expr = computed(() => {
       autoplay
     />
     <component :is="() => inputPreview?.vnode" v-else-if="inputPreview?.vnode != null" />
-    <div v-else-if="inputPreview?.key != null" class="key">{{ $t(inputPreview.key) }}</div>
-    <div v-else-if="inputPreview?.color != null" class="color">
-      <i class="color-preview" :style="{ backgroundColor: inputPreview.color }"></i>
-      <span class="expr">{{ expr }}</span>
+    <div
+      v-else-if="inputPreview?.key != null"
+      class="inline-flex h-12.5 min-w-12.5 flex-col items-center justify-center rounded-[4px] border border-grey-500 bg-grey-200 px-2 py-1.25"
+      style="box-shadow: 0 1px 0 0 var(--ui-color-grey-500)"
+    >
+      {{ $t(inputPreview.key) }}
+    </div>
+    <div v-else-if="inputPreview?.color != null" class="flex items-center gap-2 py-2.75">
+      <i class="block h-5 w-5 rounded-[4px]" :style="{ backgroundColor: inputPreview.color }"></i>
+      <span class="font-code text-12 text-title">{{ expr }}</span>
     </div>
     <div v-else-if="inputPreview?.text != null" class="text">{{ $t(inputPreview.text) }}</div>
-    <span v-else class="expr">{{ expr }}</span>
+    <!-- We are not using inline `CodeView` here because it does not properly highlight short expressions. -->
+    <!-- TODO: optimize `CodeView` to support short expressions. -->
+    <span v-else class="font-code">{{ expr }}</span>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.key {
-  display: inline-flex;
-  height: 50px;
-  min-width: 50px;
-  padding: 5px 8px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-  border: 1px solid var(--ui-color-grey-500);
-  background: var(--ui-color-grey-200);
-  box-shadow: 0px 1px 0px 0px var(--ui-color-grey-500);
-}
-
-.color {
-  display: flex;
-  padding: 11px 0px;
-  align-items: center;
-  gap: 8px;
-
-  .color-preview {
-    display: block;
-    width: 20px;
-    height: 20px;
-    border-radius: 4px;
-  }
-
-  .expr {
-    font-size: 12px;
-    line-height: 1.5;
-    color: var(--ui-color-title);
-  }
-}
-
-.expr {
-  // we are not using inline `CodeView` here because it does not properly highlight short expressions
-  // TODO: optimize `CodeView` to support short expressions
-  font-family: var(--ui-font-family-code);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/MarkdownView.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/MarkdownView.vue
index ec2adff7c..25c089f4e 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/MarkdownView.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/MarkdownView.vue
@@ -70,7 +70,7 @@ const markdownValue = computed(() => (typeof props.value === 'string' ? props.va
   <MarkdownView class="markdown-view" :value="markdownValue" :components="components" />
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .markdown-view {
   display: flex;
   flex-direction: column;
@@ -79,88 +79,95 @@ const markdownValue = computed(() => (typeof props.value === 'string' ? props.va
   font-size: 13px;
   line-height: 1.7;
   color: inherit;
+}
 
-  :deep(h1, h2, h3, h4, h5, h6) {
-    margin: 1em 0;
-    color: var(--ui-color-title);
-  }
+.markdown-view :deep(h1, h2, h3, h4, h5, h6) {
+  margin: 1em 0;
+  color: var(--ui-color-title);
+}
 
-  :deep(h1) {
-    font-size: 20px;
-    line-height: 1.4;
-  }
+.markdown-view :deep(h1) {
+  font-size: 20px;
+  line-height: 1.4;
+}
 
-  :deep(h2) {
-    font-size: 16px;
-    line-height: 1.625;
-  }
+.markdown-view :deep(h2) {
+  font-size: 16px;
+  line-height: 1.625;
+}
 
-  :deep(h3) {
-    font-size: 14px;
-    line-height: 1.57143;
-  }
+.markdown-view :deep(h3) {
+  font-size: 14px;
+  line-height: 1.57143;
+}
 
-  :deep(h4, h5, h6) {
-    font-size: 13px;
-    line-height: 1.53846;
-  }
+.markdown-view :deep(h4, h5, h6) {
+  font-size: 13px;
+  line-height: 1.53846;
+}
 
-  :deep(ul),
-  :deep(ol) {
-    display: flex;
-    flex-direction: column;
-    padding-left: 1.5em;
-    gap: 8px;
-  }
-  :deep(ul) {
-    list-style: square;
-  }
-  :deep(ol) {
-    list-style: decimal;
-  }
-  :deep(li > *:not(:last-child)) {
-    margin-bottom: 8px;
-  }
+.markdown-view :deep(ul),
+.markdown-view :deep(ol) {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1.5em;
+  gap: 8px;
+}
 
-  :deep(a) {
-    color: var(--ui-color-turquoise-500);
-    text-decoration: underline;
-    &:hover {
-      color: var(--ui-color-turquoise-400);
-    }
-    &:active {
-      color: var(--ui-color-turquoise-600);
-    }
-  }
+.markdown-view :deep(ul) {
+  list-style: square;
+}
 
-  :deep(blockquote) {
-    position: relative;
-    padding-left: 20px;
-    &:before {
-      content: '';
-      position: absolute;
-      left: 9px;
-      top: 0;
-      width: 2px;
-      height: 100%;
-      border-radius: 1px;
-      background-color: var(--ui-color-grey-800);
-    }
-  }
+.markdown-view :deep(ol) {
+  list-style: decimal;
+}
 
-  :deep(code) {
-    font-family: var(--ui-font-family-code);
-  }
-  :deep(:not(pre) > code) {
-    // TODO: keep consistent with component `UICode`
-    font-size: 0.92em;
-    line-height: 2;
-    padding: 2px 4px;
-    border-radius: 4px;
-    border: 1px solid var(--ui-color-grey-500);
-    background: var(--ui-color-grey-300);
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
+.markdown-view :deep(li > *:not(:last-child)) {
+  margin-bottom: 8px;
+}
+
+.markdown-view :deep(a) {
+  color: var(--ui-color-turquoise-500);
+  text-decoration: underline;
+}
+
+.markdown-view :deep(a:hover) {
+  color: var(--ui-color-turquoise-400);
+}
+
+.markdown-view :deep(a:active) {
+  color: var(--ui-color-turquoise-600);
+}
+
+.markdown-view :deep(blockquote) {
+  position: relative;
+  padding-left: 20px;
+}
+
+.markdown-view :deep(blockquote::before) {
+  content: '';
+  position: absolute;
+  left: 9px;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  border-radius: 1px;
+  background-color: var(--ui-color-grey-800);
+}
+
+.markdown-view :deep(code) {
+  font-family: var(--ui-font-family-code);
+}
+
+.markdown-view :deep(:not(pre) > code) {
+  /* TODO: keep consistent with component `UICode` */
+  font-size: 0.92em;
+  line-height: 2;
+  padding: 2px 4px;
+  border-radius: 4px;
+  border: 1px solid var(--ui-color-grey-500);
+  background: var(--ui-color-grey-300);
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 </style>
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index a9b405c3b..ea0fe1a2f 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -21,9 +21,9 @@
               <template #icon><img :src="importProjectSvg" /></template>
               {{ $t({ en: 'Import project file...', zh: '导入项目文件...' }) }}
             </UIMenuItem>
-            <UIMenuItem class="import-scratch" @click="handleImportFromScratch">
+            <UIMenuItem class="p-2" @click="handleImportFromScratch">
               <template #icon><img :src="importScratchSvg" /></template>
-              <span class="item-text">
+              <span class="mr-2 flex-1">
                 {{ $t({ en: 'Import Scratch project file...', zh: '导入 Scratch 项目文件...' }) }}
               </span>
               <UITag>Beta</UITag>
@@ -55,7 +55,7 @@
               <template #icon><img :src="projectPageSvg" /></template>
               {{ $t({ en: 'Open project page', zh: '打开项目主页' }) }}
             </UIMenuItem>
-            <UIMenuItem v-if="canManageProject" class="modify-project-name-item" @click="handleModifyProjectName">
+            <UIMenuItem v-if="canManageProject" class="w-full" @click="handleModifyProjectName">
               <template #icon><img :src="modifyProjectNameSvg" /></template>
               {{ $t({ en: 'Modify project name', zh: '修改项目名' }) }}
             </UIMenuItem>
@@ -71,22 +71,22 @@
 
       <NavbarTutorials v-if="showTutorialsEntry" />
 
-      <div class="history-button-wrapper">
+      <div class="flex">
         <UITooltip :disabled="undoAction == null">
           <template #trigger>
             <button class="history-button" :disabled="undoAction == null" @click="handleUndo.fn">
-              <UIIcon class="icon" type="undo" />
+              <UIIcon type="undo" style="width: 24px; height: 24px" />
             </button>
           </template>
-          <span class="history-menu-text">{{ $t(undoText) }}</span>
+          <span>{{ $t(undoText) }}</span>
         </UITooltip>
         <UITooltip :disabled="redoAction == null">
           <template #trigger>
             <button class="history-button" :disabled="redoAction == null" @click="handleRedo.fn">
-              <UIIcon class="icon" type="redo" />
+              <UIIcon type="redo" style="width: 24px; height: 24px" />
             </button>
           </template>
-          <span class="history-menu-text">{{ $t(redoText) }}</span>
+          <span>{{ $t(redoText) }}</span>
         </UITooltip>
       </div>
     </template>
@@ -103,7 +103,7 @@
     <template #right>
       <UIButtonGroup
         v-radar="{ name: 'Editor mode menu', desc: 'Hover to see editor mode options (default, map)' }"
-        class="editor-mode-wrapper"
+        class="mx-3 items-center"
         type="text"
         variant="secondary"
         :value="selectedEditMode"
@@ -118,7 +118,7 @@
               }"
               :value="EditMode.Default"
             >
-              <div class="icon" v-html="defaultModeSvg"></div>
+              <div class="w-4.5 flex [&_svg]:block [&_svg]:h-auto [&_svg]:w-full" v-html="defaultModeSvg"></div>
             </UIButtonGroupItem>
           </template>
           {{ $t({ en: 'Default mode', zh: '默认模式' }) }}
@@ -132,7 +132,7 @@
               }"
               :value="EditMode.Map"
             >
-              <div class="icon" v-html="mapEditModeSvg"></div>
+              <div class="w-4.5 flex [&_svg]:block [&_svg]:h-auto [&_svg]:w-full" v-html="mapEditModeSvg"></div>
             </UIButtonGroupItem>
           </template>
           {{ $t({ en: 'Map edit mode', zh: '地图编辑模式' }) }}
@@ -432,66 +432,18 @@ const autoSaveStateIcon = computed<AutoSaveStateIcon | null>(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.import-scratch {
-  padding: 8px;
+<style scoped>
+@reference "../../../app.css";
 
-  .item-text {
-    flex: 1;
-    margin-right: 8px;
-  }
-}
-
-.modify-project-name-item {
-  width: 100%;
+.history-button {
+  @apply flex h-full items-center justify-center border-none bg-transparent px-5 text-white outline-none;
 }
 
-.icon {
-  display: flex;
-
-  :deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
+.history-button:disabled {
+  @apply cursor-not-allowed text-[#9de6ec];
 }
 
-.history-button-wrapper {
-  display: flex;
-
-  .history-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    background: none;
-    outline: none;
-    border: none;
-    padding: 0 20px;
-    color: white;
-
-    .icon {
-      width: 24px;
-      height: 24px;
-    }
-
-    &:disabled {
-      color: #9de6ec;
-      cursor: not-allowed;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--ui-color-primary-600);
-      cursor: pointer;
-    }
-  }
-}
-
-.editor-mode-wrapper {
-  margin: 0 12px;
-  align-items: center;
-
-  .icon {
-    width: 18px;
-  }
+.history-button:enabled:hover {
+  @apply cursor-pointer bg-primary-600;
 }
 </style>
diff --git a/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue b/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue
index f86f20961..c5e0dc17d 100644
--- a/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue
+++ b/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue
@@ -170,7 +170,7 @@ function handleSubmitProjectDisplayName() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .project-wrap {
   width: 370px;
   min-width: 320px;
@@ -250,11 +250,11 @@ function handleSubmitProjectDisplayName() {
   background: transparent;
   cursor: pointer;
   border-radius: 6px;
+}
 
-  &:hover,
-  &:focus-visible {
-    background: var(--ui-color-primary-400);
-  }
+.edit-icon:hover,
+.edit-icon:focus-visible {
+  background: var(--ui-color-primary-400);
 }
 
 .edit-display-name-icon {
@@ -293,34 +293,34 @@ function handleSubmitProjectDisplayName() {
 
 .icon {
   display: flex;
+}
 
-  :deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
+.icon :deep(svg) {
+  width: 100%;
+  height: 100%;
 }
 
 .auto-save-state {
   cursor: default;
+}
 
-  .icon {
-    width: 24px;
-    height: 24px;
+.auto-save-state .icon {
+  width: 24px;
+  height: 24px;
+}
 
-    &.pending :deep(svg) path,
-    &.saving :deep(svg) path {
-      stroke-dasharray: 2;
-    }
+.auto-save-state .icon.pending :deep(svg) path,
+.auto-save-state .icon.saving :deep(svg) path {
+  stroke-dasharray: 2;
+}
 
-    &.saving :deep(svg) path {
-      animation: dash 1s linear infinite;
+.auto-save-state .icon.saving :deep(svg) path {
+  animation: dash 1s linear infinite;
+}
 
-      @keyframes dash {
-        to {
-          stroke-dashoffset: 24;
-        }
-      }
-    }
+@keyframes dash {
+  to {
+    stroke-dashoffset: 24;
   }
 }
 
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index 5f4000c14..b1302bf2f 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -1,16 +1,18 @@
 <template>
+  <!-- TODO: The fixed height here should be removed. Instead, set the StageViewer size (maintaining 4:3 aspect ratio) and let this container adapt its height accordingly. -->
   <UICard
     v-radar="{ name: 'Editor preview', desc: 'Preview panel for stage preview and project running' }"
-    class="editor-preview"
+    class="editor-preview relative flex flex-col overflow-hidden"
+    style="height: 422px"
   >
     <UICardHeader>
-      <div class="header">
+      <div class="flex-1 text-title">
         {{ $t(headerTitle) }}
       </div>
       <template v-if="runnerState === 'initial'">
         <UIButton
           v-radar="{ name: 'Run button', desc: 'Click to run the project in debug mode' }"
-          class="button"
+          class="mx-2"
           color="primary"
           icon="playHollow"
           :loading="handleRun.isLoading.value"
@@ -33,7 +35,7 @@
       <template v-else>
         <UIButton
           v-radar="{ name: 'Rerun button', desc: 'Click to rerun the project' }"
-          class="button"
+          class="mx-2"
           color="primary"
           icon="rotate"
           :disabled="runnerState !== 'running' || handleStop.isLoading.value"
@@ -44,7 +46,7 @@
         </UIButton>
         <UIButton
           v-radar="{ name: 'Stop button', desc: 'Click to stop the running project' }"
-          class="button"
+          class="mx-2"
           color="boring"
           icon="end"
           :loading="handleStop.isLoading.value"
@@ -56,7 +58,7 @@
           <template #trigger>
             <UIButton
               v-radar="{ name: 'Enter full screen button', desc: 'Click to enter full screen for the running project' }"
-              class="button"
+              class="mx-2"
               color="boring"
               icon="enterFullScreen"
               :disabled="handleStop.isLoading.value"
@@ -68,14 +70,17 @@
       </template>
     </UICardHeader>
 
-    <div class="main">
+    <div class="flex h-full justify-center overflow-hidden p-3">
       <div
         ref="stageContainerRef"
-        class="stage-viewer-container"
+        class="stage-viewer-container relative h-full w-full overflow-hidden rounded-1 bg-grey-200"
         :class="{ 'stage-viewer-container--running': runnerState !== 'initial' }"
       >
         <StageViewer />
-        <div v-show="fullscreen || runnerState !== 'initial' || runnerHostSticky" class="runner-host">
+        <div
+          v-show="fullscreen || runnerState !== 'initial' || runnerHostSticky"
+          class="runner-host absolute inset-0 flex items-center justify-center bg-grey-300"
+        >
           <ProjectRunnerSurface
             ref="projectRunnerSurfaceRef"
             v-model:fullscreen="fullscreen"
@@ -439,75 +444,29 @@ function getStageInlineAnchor() {
 }
 </script>
 
-<style scoped lang="scss">
-.editor-preview {
-  // TODO: The fixed height here should be removed. Instead, set the StageViewer size (maintaining 4:3 aspect ratio) and let this container adapt its height accordingly.
-  height: 422px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
-
-  .header {
-    flex: 1;
-    color: var(--ui-color-title);
-  }
-
-  .button {
-    margin: 0 8px;
-  }
-
-  .main {
-    display: flex;
-    overflow: hidden;
-    justify-content: center;
-    padding: 12px;
-    height: 100%;
-  }
-
-  .stage-viewer-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--ui-border-radius-1);
-    overflow: hidden;
-    background-color: var(--ui-color-grey-200);
-
-    &--running {
-      :deep(.stage-viewer) {
-        filter: blur(4px);
-        pointer-events: none;
-        user-select: none;
-      }
-    }
+<style scoped>
+.stage-viewer-container--running :deep(.stage-viewer) {
+  filter: blur(4px);
+  pointer-events: none;
+  user-select: none;
+}
 
-    .runner-host {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--ui-color-grey-300);
-
-      :deep(.project-runner-surface) {
-        width: 100%;
-        height: 100%;
-        display: flex;
-      }
+.runner-host :deep(.project-runner-surface) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
 
-      :deep(.project-runner-surface:not(.fullscreen)) {
-        align-items: center;
-        justify-content: center;
-      }
+.runner-host :deep(.project-runner-surface:not(.fullscreen)) {
+  align-items: center;
+  justify-content: center;
+}
 
-      :deep(.project-runner-surface:not(.fullscreen) .runner) {
-        width: 100%;
-        max-width: 100%;
-        max-height: 100%;
-        aspect-ratio: 4 / 3;
-        height: auto;
-      }
-    }
-  }
+.runner-host :deep(.project-runner-surface:not(.fullscreen) .runner) {
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: 4 / 3;
+  height: auto;
 }
 </style>
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
index e3b4d9960..a6178289a 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
@@ -29,6 +29,11 @@ const emit = defineEmits<{
     :visible="visible"
     @update:visible="emit('cancelled')"
   >
-    <SpriteCollisionEditor class="h-114" :sprite="sprite" :project="project" @update-success="emit('resolved')" />
+    <SpriteCollisionEditor
+      style="height: 456px"
+      :sprite="sprite"
+      :project="project"
+      @update-success="emit('resolved')"
+    />
   </UIFormModal>
 </template>
diff --git a/spx-gui/src/components/navbar/NavbarWrapper.vue b/spx-gui/src/components/navbar/NavbarWrapper.vue
index 8b53de72e..13cdc495c 100644
--- a/spx-gui/src/components/navbar/NavbarWrapper.vue
+++ b/spx-gui/src/components/navbar/NavbarWrapper.vue
@@ -5,7 +5,7 @@
     :style="{ backgroundImage: `url(${bgUrl})` }"
   >
     <div
-      class="flex h-12.5 w-full items-stretch justify-between gap-3"
+      class="flex h-12.5 items-stretch justify-between gap-3"
       :class="centered ? 'w-305 desktop-large:w-370' : 'w-full'"
     >
       <div class="flex basis-[30%]">
diff --git a/spx-gui/src/components/project/runner/ProjectRunner.vue b/spx-gui/src/components/project/runner/ProjectRunner.vue
index 55cc2e895..8d0c0c571 100644
--- a/spx-gui/src/components/project/runner/ProjectRunner.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunner.vue
@@ -147,6 +147,7 @@ import { apiBaseUrl } from '@/utils/env'
 import { ensureAccessToken } from '@/stores/user'
 import { isProjectUsingAIInteraction } from '@/utils/project'
 import { capture, Cancelled } from '@/utils/exception'
+import errorBgUrl from './error-bg.svg'
 
 const props = defineProps<{ project: SpxProject }>()
 
@@ -373,14 +374,19 @@ defineExpose({
 </script>
 
 <template>
-  <div class="iframe-container">
-    <iframe ref="runnerIframeRef" class="iframe" frameborder="0" :src="runnerUrl" />
-    <UIImg v-show="state.type !== 'running'" class="thumbnail" :src="thumbnailUrl" :loading="thumbnailUrlLoading" />
+  <div class="relative h-full w-full flex items-center justify-center">
+    <iframe ref="runnerIframeRef" class="h-full w-full" frameborder="0" :src="runnerUrl" />
+    <UIImg
+      v-show="state.type !== 'running'"
+      class="absolute! inset-0"
+      :src="thumbnailUrl"
+      :loading="thumbnailUrlLoading"
+    />
     <UIDetailedLoading :visible="startingProgress != null" cover :percentage="startingProgress?.percentage ?? 0">
       <span>{{ $t(startingProgress?.desc ?? { en: 'Loading...', zh: '加载中...' }) }}</span>
     </UIDetailedLoading>
-    <div v-show="state.type === 'failed'" class="error-wrapper">
-      <div class="error">
+    <div v-show="state.type === 'failed'" class="absolute inset-0" :style="{ backgroundImage: `url(${errorBgUrl})` }">
+      <div class="flex h-full w-full flex-col items-center justify-center gap-1 bg-black/65 text-grey-100">
         <svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M10.3422 18.9098C10.3422 19.3332 10.5103 19.7392 10.8097 20.0386C11.1091 20.3379 11.5151 20.5061 11.9385 20.5061C12.3619 20.5061 12.7679 20.3379 13.0673 20.0386C13.3666 19.7392 13.5348 19.3332 13.5348 18.9098C13.5348 18.4864 13.3666 18.0804 13.0673 17.781C12.7679 17.4817 12.3619 17.3135 11.9385 17.3135C11.5151 17.3135 11.1091 17.4817 10.8097 17.781C10.5103 18.0804 10.3422 18.4864 10.3422 18.9098Z"
@@ -418,45 +424,3 @@ defineExpose({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.iframe-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.iframe {
-  width: 100%;
-  height: 100%;
-}
-.thumbnail {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.error-wrapper {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: url(./error-bg.svg);
-
-  .error {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    color: var(--ui-color-grey-100);
-    background-color: rgba(0, 0, 0, 0.65);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue b/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue
index 148eea468..af9edac08 100644
--- a/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue
@@ -398,7 +398,7 @@ defineExpose({
 
 <template>
   <div ref="rootRef" class="project-runner-surface" :class="{ fullscreen: overlayActive }">
-    <div v-if="overlayActive" class="placeholder"></div>
+    <div v-if="overlayActive" class="h-full w-full"></div>
     <div
       ref="wrapperRef"
       v-radar="{ name: 'Project runner surface', desc: 'Container hosting project runner' }"
@@ -419,15 +419,14 @@ defineExpose({
       }"
     >
       <div v-if="overlayActive && (overlayVisible || overlayClosing || overlayOpening)" class="header">
-        <div class="header-left"></div>
-        <div class="display-name">
+        <div class="flex-[1_1_30%]"></div>
+        <div class="flex-[1_1_40%] truncate text-center">
           {{ project.displayName }}
         </div>
-        <div class="header-right">
+        <div class="flex-[1_1_30%] grid grid-flow-col items-center justify-end justify-items-end gap-5">
           <UIButton
             v-if="runnerState === 'initial'"
             v-radar="{ name: 'Run button', desc: 'Click to run the project in overlay' }"
-            class="button"
             color="primary"
             icon="playHollow"
             :loading="runButtonLoading"
@@ -438,7 +437,6 @@ defineExpose({
           <UIButton
             v-else
             v-radar="{ name: 'Rerun button', desc: 'Click to rerun the project in overlay' }"
-            class="button"
             icon="rotate"
             :disabled="runnerState !== 'running' || stopButtonLoading"
             :loading="rerunButtonLoading && !stopButtonLoading"
@@ -449,7 +447,6 @@ defineExpose({
           <UIButton
             v-if="runnerState !== 'initial'"
             v-radar="{ name: 'Stop button', desc: 'Click to stop the project' }"
-            class="button"
             color="boring"
             icon="end"
             :loading="stopButtonLoading"
@@ -464,7 +461,6 @@ defineExpose({
                   name: 'Exit full screen button',
                   desc: 'Click to exit full screen for the running project'
                 }"
-                class="button"
                 color="boring"
                 icon="exitFullScreen"
                 @click="closeFullscreen"
@@ -489,18 +485,13 @@ defineExpose({
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .project-runner-surface {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-.placeholder {
-  width: 100%;
-  height: 100%;
-}
-
 .runner-wrapper {
   position: relative;
   width: 100%;
@@ -510,111 +501,104 @@ defineExpose({
   transform: translate3d(var(--overlay-translate-x, 0px), var(--overlay-translate-y, 0px), 0)
     scale(var(--overlay-scale-x, 1), var(--overlay-scale-y, 1));
   opacity: 1;
+}
 
-  &.no-transition {
-    transition: none !important;
-  }
+.runner-wrapper.no-transition {
+  transition: none !important;
+}
 
-  &.fullscreen {
-    position: fixed;
-    z-index: 100;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-    opacity: 1;
-    pointer-events: none;
-    transition:
-      transform 0.4s ease-in-out,
-      background-color 0.2s ease;
-
-    .header {
-      opacity: 1;
-      pointer-events: auto;
-      transition:
-        opacity 0.2s ease,
-        height 0.2s ease,
-        padding 0.2s ease,
-        border-bottom-color 0.2s ease;
-      transition-delay: 0s;
-    }
+.runner-wrapper.fullscreen {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  opacity: 1;
+  pointer-events: none;
+  transition:
+    transform 0.4s ease-in-out,
+    background-color 0.2s ease;
+}
 
-    .runner-area {
-      padding: 20px;
-      background-color: var(--ui-color-grey-300);
-      transition:
-        padding 0.2s ease,
-        background-color 0.2s ease;
-    }
+.runner-wrapper.fullscreen .header {
+  opacity: 1;
+  pointer-events: auto;
+  transition:
+    opacity 0.2s ease,
+    height 0.2s ease,
+    padding 0.2s ease,
+    border-bottom-color 0.2s ease;
+  transition-delay: 0s;
+}
 
-    &.visible {
-      pointer-events: auto;
-    }
+.runner-wrapper.fullscreen .runner-area {
+  padding: 20px;
+  background-color: var(--ui-color-grey-300);
+  transition:
+    padding 0.2s ease,
+    background-color 0.2s ease;
+}
 
-    &.opening {
-      background-color: transparent;
-
-      .header {
-        opacity: 0;
-        visibility: hidden;
-        height: 56px;
-        padding: 0 20px;
-        border-bottom-color: transparent;
-      }
-
-      .runner-area {
-        padding: 20px;
-        background-color: transparent;
-      }
-    }
+.runner-wrapper.fullscreen.visible {
+  pointer-events: auto;
+}
 
-    &.opening.visible {
-      background-color: #fff;
-
-      .header {
-        opacity: 1;
-        visibility: visible;
-        height: 56px;
-        padding: 0 20px;
-        border-bottom-color: var(--ui-color-grey-400);
-        transition-delay: 0.15s;
-      }
-
-      .runner-area {
-        padding: 20px;
-        background-color: var(--ui-color-grey-300);
-        transition-delay: 0.15s;
-      }
-    }
+.runner-wrapper.fullscreen.opening {
+  background-color: transparent;
+}
 
-    &.closing {
-      background-color: transparent;
-    }
+.runner-wrapper.fullscreen.opening .header {
+  opacity: 0;
+  visibility: hidden;
+  height: 56px;
+  padding: 0 20px;
+  border-bottom-color: transparent;
+}
 
-    &.closing:not(.visible) {
-      .header {
-        opacity: 0;
-      }
+.runner-wrapper.fullscreen.opening .runner-area {
+  padding: 20px;
+  background-color: transparent;
+}
 
-      .runner-area {
-        background-color: transparent;
-      }
-    }
+.runner-wrapper.fullscreen.opening.visible {
+  background-color: #fff;
+}
 
-    &:not(.visible):not(.closing):not(.opening) {
-      .header {
-        display: none;
-      }
+.runner-wrapper.fullscreen.opening.visible .header {
+  opacity: 1;
+  visibility: visible;
+  height: 56px;
+  padding: 0 20px;
+  border-bottom-color: var(--ui-color-grey-400);
+  transition-delay: 0.15s;
+}
 
-      .runner-area {
-        padding: 0;
-        background-color: transparent;
-      }
-    }
-  }
+.runner-wrapper.fullscreen.opening.visible .runner-area {
+  padding: 20px;
+  background-color: var(--ui-color-grey-300);
+  transition-delay: 0.15s;
+}
+
+.runner-wrapper.fullscreen.closing {
+  background-color: transparent;
+}
+
+.runner-wrapper.fullscreen.closing:not(.visible) .header {
+  opacity: 0;
+}
+
+.runner-wrapper.fullscreen.closing:not(.visible) .runner-area {
+  background-color: transparent;
+}
+
+.runner-wrapper.fullscreen:not(.visible):not(.closing):not(.opening) .header {
+  display: none;
+}
+
+.runner-wrapper.fullscreen:not(.visible):not(.closing):not(.opening) .runner-area {
+  padding: 0;
+  background-color: transparent;
 }
 
 .header {
@@ -631,42 +615,17 @@ defineExpose({
   overflow: hidden;
 }
 
-.header-left {
-  flex: 1;
-  flex-basis: 30%;
-}
-
-.display-name {
-  flex: 1;
-  flex-basis: 40%;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.header-right {
-  flex: 1;
-  flex-basis: 30%;
-  justify-content: flex-end;
-  align-items: center;
-  display: grid;
-  grid-auto-flow: column;
-  gap: 20px;
-  justify-items: end;
-}
-
 .runner-area {
   position: relative;
   width: 100%;
   height: 100%;
+}
 
-  .runner {
-    width: 100%;
-    height: 100%;
-    border-radius: var(--ui-border-radius-2);
-    overflow: hidden;
-  }
+.runner-area .runner {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--ui-border-radius-2);
+  overflow: hidden;
 }
 
 .project-runner-surface.fullscreen .runner-area {
@@ -677,23 +636,20 @@ defineExpose({
   min-height: 0;
   padding: 20px;
   background-color: var(--ui-color-grey-300);
+}
 
-  .runner {
-    width: auto;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    aspect-ratio: 4 / 3;
-    overflow: hidden;
-  }
+.project-runner-surface.fullscreen .runner-area .runner {
+  width: auto;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
 }
 
 .overlay-loading {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
   background: rgba(0, 0, 0, 0.1);
 }
 </style>
diff --git a/spx-gui/src/components/ui/UIDivider.vue b/spx-gui/src/components/ui/UIDivider.vue
index d6d33e388..788c7a018 100644
--- a/spx-gui/src/components/ui/UIDivider.vue
+++ b/spx-gui/src/components/ui/UIDivider.vue
@@ -1,5 +1,5 @@
 <template>
-  <NDivider class="divider" :vertical="vertical" />
+  <NDivider class="ui-divider" :vertical="vertical" />
 </template>
 
 <script lang="ts" setup>
@@ -16,7 +16,7 @@ withDefaults(
 </script>
 
 <style lang="scss" scoped>
-.divider {
+.ui-divider {
   margin: 0;
 }
 </style>
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index 2706b4019..ab3593188 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -363,13 +363,13 @@ const remixesRet = useQuery(
   <CenteredWrapper size="large">
     <CommunityCard
       v-radar="{ name: 'Project content', desc: 'Main content area for project details and runner' }"
-      class="main"
+      class="relative mt-6 flex flex-[0_0_auto] gap-10 bg-grey-100 p-5"
     >
       <UILoading v-if="isLoading" cover mask="solid" />
       <UIError v-else-if="error != null" class="error" :retry="reloadProject">
         {{ $t(error.userMessage) }}
       </UIError>
-      <div class="left">
+      <div class="left flex-[1_1_744px]">
         <div class="project-wrapper">
           <template v-if="project != null">
             <ProjectRunnerSurface
@@ -389,14 +389,18 @@ const remixesRet = useQuery(
                 <Transition name="runner-mask-fade" appear>
                   <div
                     v-if="runnerState !== 'running'"
-                    :class="['runner-mask', { initial: runnerState === 'initial' }]"
+                    :class="runnerState === 'initial' ? 'pointer-events-auto' : 'pointer-events-none'"
+                    class="absolute inset-0 z-2 flex items-center justify-center rounded-2 bg-[rgba(36,41,47,0.6)] backdrop-blur-[5px]"
                   >
                     <template v-if="runnerState === 'initial'">
-                      <div v-if="needsSignInToRun" class="sign-in-prompt">
-                        <div class="sign-in-card">
+                      <div v-if="needsSignInToRun" class="flex h-full w-full items-center justify-center p-6">
+                        <div
+                          class="relative flex w-85 flex-col items-center overflow-visible rounded-[16px] bg-white px-6 pt-17 pb-6 text-center"
+                          style="box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1)"
+                        >
                           <!-- eslint-disable-next-line vue/no-v-html -->
                           <div class="kiko-wave" aria-hidden="true" v-html="kikoWaveSvg"></div>
-                          <p class="message">
+                          <p class="mb-11 leading-6 text-grey-800">
                             {{
                               $t({
                                 en: 'This game requires sign-in before playing',
@@ -406,7 +410,7 @@ const remixesRet = useQuery(
                           </p>
                           <UIButton
                             v-radar="{ name: 'Sign-in button', desc: 'Click to sign in' }"
-                            class="sign-in-button"
+                            class="w-full"
                             size="large"
                             color="primary"
                             @click="handleSignIn"
@@ -433,7 +437,7 @@ const remixesRet = useQuery(
             </ProjectRunnerSurface>
           </template>
         </div>
-        <div class="ops">
+        <div class="mt-3 flex justify-end gap-middle">
           <UIButton
             v-if="runnerState !== 'initial'"
             v-radar="{ name: 'Rerun button', desc: 'Click to rerun the project' }"
@@ -483,61 +487,67 @@ const remixesRet = useQuery(
           </UITooltip>
         </div>
       </div>
-      <div class="right">
+      <div class="right flex min-w-0 flex-[1_1_456px] flex-col pr-5">
         <template v-if="project != null">
-          <h2 class="title">{{ project.displayName }}</h2>
-          <RemixedFrom v-if="project.remixedFrom != null" class="remixed-from" :remixed-from="project.remixedFrom" />
-          <div class="info">
+          <h2 class="text-20/[1.4] text-title break-all">{{ project.displayName }}</h2>
+          <RemixedFrom v-if="project.remixedFrom != null" class="mt-2" :remixed-from="project.remixedFrom" />
+          <div class="mt-4 flex items-center justify-between">
             <OwnerInfo :owner="project.owner!" />
-            <p class="extra">
-              <span class="part" :title="$t(viewCount!.title)">
-                <UIIcon class="icon" type="eye" />
+            <p class="flex items-center gap-2">
+              <span class="flex items-center gap-1 text-hint-2" :title="$t(viewCount!.title)">
+                <UIIcon type="eye" style="width: 14px; height: 14px" />
                 {{ $t(viewCount!.text) }}
               </span>
               <template v-if="isOwner">
-                <i class="sep"></i>
-                <span class="part" :title="$t(likeCount!.title)">
-                  <UIIcon class="icon" type="heart" />
+                <i class="h-3 w-px bg-dividing-line-1"></i>
+                <span class="flex items-center gap-1 text-hint-2" :title="$t(likeCount!.title)">
+                  <UIIcon type="heart" style="width: 14px; height: 14px" />
                   {{ $t(likeCount!.text) }}
                 </span>
               </template>
-              <i class="sep"></i>
-              <span class="part" :title="$t(remixCount!.title)">
-                <UIIcon class="icon" type="remix" />
+              <i class="h-3 w-px bg-dividing-line-1"></i>
+              <span class="flex items-center gap-1 text-hint-2" :title="$t(remixCount!.title)">
+                <UIIcon type="remix" style="width: 14px; height: 14px" />
                 {{ $t(remixCount!.text) }}
               </span>
             </p>
           </div>
-          <div class="ops">
+          <div class="ops mt-4 flex gap-3">
             <template v-if="isOwner">
               <UIButton
                 v-radar="{ name: 'Edit button', desc: 'Click to edit the project' }"
+                style="flex: 1 1 0"
                 color="primary"
                 size="large"
                 icon="edit"
                 :loading="handleEdit.isLoading.value"
                 @click="handleEdit.fn"
-                >{{ $t({ en: 'Edit', zh: '编辑' }) }}</UIButton
               >
+                {{ $t({ en: 'Edit', zh: '编辑' }) }}
+              </UIButton>
               <UIButton
                 v-if="project.visibility === Visibility.Public"
                 v-radar="{ name: 'Share button', desc: 'Click to share the project' }"
+                style="flex: 1 1 0"
                 color="boring"
                 size="large"
                 icon="share"
                 @click="handleShare.fn"
-                >{{ $t({ en: 'Share', zh: '分享' }) }}</UIButton
               >
+                {{ $t({ en: 'Share', zh: '分享' }) }}
+              </UIButton>
               <UIButton
                 v-else
                 v-radar="{ name: 'Publish button', desc: 'Click to publish the project' }"
+                style="flex: 1 1 0"
                 color="boring"
                 size="large"
                 icon="share"
                 :loading="handlePublish.isLoading.value"
                 @click="handlePublish.fn"
-                >{{ $t({ en: 'Publish', zh: '发布' }) }}</UIButton
               >
+                {{ $t({ en: 'Publish', zh: '发布' }) }}
+              </UIButton>
               <UIDropdown placement="bottom-end" trigger="click">
                 <template #trigger>
                   <UIButton
@@ -553,13 +563,15 @@ const remixesRet = useQuery(
                     v-if="project.visibility === Visibility.Public"
                     v-radar="{ name: 'Unpublish option', desc: 'Click to unpublish the project' }"
                     @click="handleUnpublish.fn"
-                    >{{ $t({ en: 'Unpublish', zh: '取消发布' }) }}</UIMenuItem
                   >
+                    {{ $t({ en: 'Unpublish', zh: '取消发布' }) }}
+                  </UIMenuItem>
                   <UIMenuItem
                     v-radar="{ name: 'Remove option', desc: 'Click to remove the project' }"
                     @click="handleRemove.fn"
-                    >{{ $t({ en: 'Remove', zh: '删除' }) }}</UIMenuItem
                   >
+                    {{ $t({ en: 'Remove', zh: '删除' }) }}
+                  </UIMenuItem>
                 </UIMenu>
               </UIDropdown>
             </template>
@@ -567,16 +579,18 @@ const remixesRet = useQuery(
               <UIButton
                 v-if="hasRelease"
                 v-radar="{ name: 'Remix button', desc: 'Click to remix this project' }"
+                class="flex-[1_1_0]"
                 color="primary"
                 size="large"
                 icon="remix"
                 :loading="handleRemix.isLoading.value"
                 @click="handleRemix.fn"
-                >{{ $t({ en: 'Remix', zh: '改编' }) }}</UIButton
               >
+                {{ $t({ en: 'Remix', zh: '改编' }) }}
+              </UIButton>
               <UIButton
                 v-radar="{ name: 'Like button', desc: 'Click to like or unlike the project' }"
-                :class="{ liking }"
+                :class="['flex-[1_1_0]', { liking }]"
                 color="boring"
                 size="large"
                 :title="$t(likeCount!.title)"
@@ -588,21 +602,23 @@ const remixesRet = useQuery(
               </UIButton>
               <UIButton
                 v-radar="{ name: 'Share button', desc: 'Click to share the project' }"
+                class="flex-[1_1_0]"
                 color="boring"
                 size="large"
                 icon="share"
                 @click="handleShare.fn"
-                >{{ $t({ en: 'Share', zh: '分享' }) }}</UIButton
               >
+                {{ $t({ en: 'Share', zh: '分享' }) }}
+              </UIButton>
             </template>
           </div>
-          <UIDivider class="divider" />
+          <UIDivider style="margin: 24px 0 16px" />
           <UICollapse
             v-radar="{
               name: 'Project details',
               desc: 'Collapsible sections showing project description, instructions and release history'
             }"
-            class="collapse-container"
+            class="mb-2 flex-[1_1_0] overflow-y-auto"
             :default-expanded-names="['description', 'instructions', 'releases']"
           >
             <UICollapseItem :title="$t({ en: 'Description', zh: '描述' })" name="description">
@@ -623,7 +639,7 @@ const remixesRet = useQuery(
     </CommunityCard>
     <ProjectsSection
       v-radar="{ name: 'Popular remixes section', desc: 'Section showing popular remixes of this project' }"
-      class="remixes"
+      class="mt-5"
       context="project"
       :num-in-row="remixNumInRow"
       :query-ret="remixesRet"
@@ -641,7 +657,7 @@ const remixesRet = useQuery(
   </CenteredWrapper>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .error {
   position: absolute;
   width: 100%;
@@ -650,205 +666,57 @@ const remixesRet = useQuery(
   background: var(--ui-color-grey-100);
 }
 
-.main {
-  position: relative;
-  flex: 0 0 auto;
-  margin-top: 24px;
-  padding: 20px;
-  display: flex;
-  gap: 40px;
-  background: var(--ui-color-grey-100);
+.runner-mask-fade-enter-from,
+.runner-mask-fade-leave-to {
+  opacity: 0;
 }
 
-.left {
-  flex: 1 1 744px;
-
-  .runner-mask-fade-enter-from,
-  .runner-mask-fade-leave-to {
-    opacity: 0;
-  }
-
-  .runner-mask-fade-enter-active,
-  .runner-mask-fade-leave-active {
-    transition: opacity 0.2s ease;
-  }
-
-  .project-wrapper {
-    position: relative;
-    width: 100%;
-    aspect-ratio: 4 / 3;
-    overflow: hidden;
-
-    .runner-mask {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: var(--ui-border-radius-2);
-      background: rgba(36, 41, 47, 0.6);
-      backdrop-filter: blur(5px);
-      -webkit-backdrop-filter: blur(5px);
-      z-index: 2;
-      pointer-events: none;
-    }
-
-    .runner-mask.initial {
-      pointer-events: auto;
-    }
-
-    .sign-in-prompt {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      padding: 24px;
-
-      .sign-in-card {
-        position: relative;
-        width: 340px;
-        padding: 68px 24px 24px;
-        background: #fff;
-        border-radius: 16px;
-        box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        overflow: visible;
-      }
-
-      .kiko-wave {
-        position: absolute;
-        top: -56px;
-        width: 340px;
-        line-height: 0;
-
-        :deep(svg) {
-          display: block;
-          width: 100%;
-          height: auto;
-        }
-      }
-
-      .message {
-        margin-bottom: 44px;
-        line-height: 24px;
-        color: var(--ui-color-grey-800);
-      }
-
-      .sign-in-button {
-        width: 100%;
-      }
-    }
-
-    :deep(.ui-detailed-loading.cover.mask-semi-transparent .text) {
-      color: var(--ui-color-grey-100);
-    }
-
-    :deep(.project-runner-surface:not(.fullscreen) .ui-detailed-loading.cover) {
-      background: transparent;
-      backdrop-filter: none;
-      -webkit-backdrop-filter: none;
-      z-index: 3;
-    }
-  }
-
-  .ops {
-    margin-top: 12px;
-    display: flex;
-    gap: var(--ui-gap-middle);
-    justify-content: flex-end;
-  }
+.runner-mask-fade-enter-active,
+.runner-mask-fade-leave-active {
+  transition: opacity 0.2s ease;
 }
 
-.right {
-  flex: 1 1 456px;
-  min-width: 0;
-  padding-right: 20px;
-  display: flex;
-  flex-direction: column;
-
-  .title {
-    font-size: 20px;
-    line-height: 1.4;
-    color: var(--ui-color-title);
-    word-break: break-all;
-  }
+.project-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+}
 
-  .remixed-from {
-    margin-top: 8px;
-  }
+.project-wrapper :deep(.ui-detailed-loading.cover.mask-semi-transparent .text) {
+  color: var(--ui-color-grey-100);
+}
 
-  .info {
-    margin-top: 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .extra {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      .part {
-        display: flex;
-        gap: 4px;
-        align-items: center;
-        color: var(--ui-color-hint-2);
-      }
-
-      .icon {
-        width: 14px;
-        height: 14px;
-      }
-
-      .sep {
-        width: 1px;
-        height: 12px;
-        background-color: var(--ui-color-dividing-line-1);
-      }
-    }
-  }
+.project-wrapper :deep(.project-runner-surface:not(.fullscreen) .ui-detailed-loading.cover) {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  z-index: 3;
+}
 
-  .ops {
-    margin-top: 16px;
-    display: flex;
-    gap: 12px;
-
-    & > * {
-      flex: 1 1 0;
-
-      &.more {
-        flex: 0 0 auto;
-        width: 40px;
-        :deep(.content) {
-          padding: 0;
-        }
-      }
-    }
+.kiko-wave {
+  position: absolute;
+  top: -56px;
+  width: 340px;
+  line-height: 0;
+}
 
-    .liking :deep(.content) {
-      color: var(--ui-color-red-main);
-    }
-  }
+.kiko-wave > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
 
-  .divider {
-    margin: 24px 0 16px;
-  }
+.ops > *.more {
+  flex: 0 0 auto;
+  width: 40px;
+}
 
-  .collapse-container {
-    margin-bottom: 8px;
-    flex: 1 1 0;
-    overflow-y: auto;
-  }
+.ops > *.more :deep(.content) {
+  padding: 0;
 }
 
-.remixes {
-  margin-top: 20px;
+.ops .liking :deep(.content) {
+  color: var(--ui-color-red-main);
 }
 </style>
diff --git a/spx-gui/src/utils/spotlight/SpotlightUI.vue b/spx-gui/src/utils/spotlight/SpotlightUI.vue
index 1dd33e6e1..0e8cf5120 100644
--- a/spx-gui/src/utils/spotlight/SpotlightUI.vue
+++ b/spx-gui/src/utils/spotlight/SpotlightUI.vue
@@ -277,26 +277,20 @@ watch(
   </div>
 </template>
 
-<style lang="scss" scoped>
-$anchor-size: 26px;
-$anchor-offset-x: 6px;
-$anchor-offset-y: 4px;
-$transform-transition-property: transform 0.4s cubic-bezier(0.8, -0.3, 0.265, 1.2);
-$z-index: 10000; // TODO: Adjust as needed
-
+<style scoped>
 :global(.spotlight-attach-element-highlight) {
-  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.17);
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.17);
 }
 
 .v-enter-active {
   transition:
     opacity 0.4s ease-in,
-    $transform-transition-property;
+    var(--spotlight-transform-transition);
 }
 .v-leave-active {
   transition:
     opacity 0.4s ease-out,
-    $transform-transition-property;
+    var(--spotlight-transform-transition);
 }
 .v-enter-from,
 .v-leave-to {
@@ -304,81 +298,93 @@ $z-index: 10000; // TODO: Adjust as needed
 }
 
 .spotlight-ui {
+  --spotlight-anchor-size: 26px;
+  --spotlight-anchor-offset-x: 6px;
+  --spotlight-anchor-offset-y: 4px;
+  --spotlight-transform-transition: transform 0.4s cubic-bezier(0.8, -0.3, 0.265, 1.2);
+  --spotlight-z-index: 10000; /* TODO: Adjust as needed */
+
   position: absolute;
   overflow: hidden;
   inset: 0;
   pointer-events: none;
-  z-index: $z-index;
+  z-index: var(--spotlight-z-index);
 
-  .spotlight-item {
+  & .spotlight-item {
     position: absolute;
 
     &.animated {
-      transition: $transform-transition-property;
+      transition: var(--spotlight-transform-transition);
     }
 
     &.bottom-right {
-      .anchor {
+      & .anchor {
         transform: rotate(0deg);
       }
-      .tips {
-        transform: translate(calc($anchor-size - $anchor-offset-x), -$anchor-offset-y);
+      & .tips {
+        transform: translate(
+          calc(var(--spotlight-anchor-size) - var(--spotlight-anchor-offset-x)),
+          calc(-1 * var(--spotlight-anchor-offset-y))
+        );
         border-top-left-radius: 2px;
-        .content {
+        & .content {
           border-top-left-radius: 2px;
         }
       }
     }
     &.bottom-left {
-      .anchor {
+      & .anchor {
         transform: rotate(90deg);
       }
-      .tips {
-        transform: translate(calc(-100% - $anchor-size + $anchor-offset-x), -$anchor-offset-y);
+      & .tips {
+        transform: translate(
+          calc(-100% - var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-x)),
+          calc(-1 * var(--spotlight-anchor-offset-y))
+        );
         border-top-right-radius: 2px;
-        .content {
+        & .content {
           border-top-right-radius: 2px;
         }
       }
     }
     &.top-right {
-      .anchor {
+      & .anchor {
         transform: rotate(270deg);
       }
-      .tips {
+      & .tips {
         transform: translate(
-          calc($anchor-size - $anchor-offset-x / 2),
-          calc(-100% - 2 * $anchor-size + $anchor-offset-y / 2)
+          calc(var(--spotlight-anchor-size) - var(--spotlight-anchor-offset-x) / 2),
+          calc(-100% - 2 * var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-y) / 2)
         );
         border-bottom-left-radius: 2px;
-        .content {
+        & .content {
           border-bottom-left-radius: 2px;
         }
       }
     }
     &.top-left {
-      .anchor {
+      & .anchor {
         transform: rotate(180deg);
       }
-      .tips {
+      & .tips {
         transform: translate(
-          calc(-100% - $anchor-size + $anchor-offset-x / 2),
-          calc(-100% - 2 * $anchor-size + $anchor-offset-y / 2)
+          calc(-100% - var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-x) / 2),
+          calc(-100% - 2 * var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-y) / 2)
         );
         border-bottom-right-radius: 2px;
-        .content {
+        & .content {
           border-bottom-right-radius: 2px;
         }
       }
     }
 
-    .anchor {
-      width: $anchor-size;
-      height: $anchor-size;
+    & .anchor {
+      width: var(--spotlight-anchor-size);
+      height: var(--spotlight-anchor-size);
       transform-origin: left top;
     }
 
-    .tips {
+    & .tips {
       border-radius: 14px;
       padding: 2px;
       font-size: 12px;
@@ -386,9 +392,9 @@ $z-index: 10000; // TODO: Adjust as needed
       background: var(--ui-color-grey-100);
       word-wrap: break-word;
       max-width: 300px;
-      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.17);
+      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.17);
 
-      .content {
+      & .content {
         border-radius: 12px;
         padding: 5px 8px;
         background: #7e66fc;

From e9147cd08f8b98dbe3813125024cb8a0003e6336 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Thu, 2 Apr 2026 13:41:05 +0800
Subject: [PATCH 09/29] details

---
 docs/develop/tailwind-css-migration.md        | 578 ------------------
 spx-gui/src/app.css                           |   8 +-
 .../asset/gen/backdrop/BackdropImageItem.vue  |   2 +-
 .../asset/gen/sprite/SpriteImageItem.vue      |   2 +-
 .../community/project/OwnerInfo.vue           |   4 +-
 .../src/components/copilot/CopilotInput.vue   |   6 +-
 .../course/management/CourseItemMini.vue      |   1 +
 .../management/CourseSeriesEditModal.vue      |   2 +
 .../course/management/CourseSeriesItem.vue    |   1 +
 .../src/components/editor/ProjectEditor.vue   |   4 +-
 .../editor/sprite/animation/MuteSwitch.vue    |   2 +-
 .../src/components/ui/UIConfigProvider.vue    |  48 +-
 spx-gui/src/components/ui/UILink.vue          |  39 +-
 spx-gui/src/components/ui/global.css          |  35 ++
 spx-gui/src/pages/community/project.vue       |   2 +-
 15 files changed, 64 insertions(+), 670 deletions(-)
 delete mode 100644 docs/develop/tailwind-css-migration.md

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
deleted file mode 100644
index 1c745d0c0..000000000
--- a/docs/develop/tailwind-css-migration.md
+++ /dev/null
@@ -1,578 +0,0 @@
-# Tailwind CSS Migration Assessment for spx-gui
-
-This document investigates whether XBuilder frontend styling in `spx-gui` should migrate to Tailwind CSS.
-
-Issue: `goplus/builder#2981`
-
-## Conclusion
-
-Tailwind CSS is technically feasible in `spx-gui`, but a full migration is not a good near-term tradeoff.
-
-The current frontend already has a working design-token layer, a custom UI component library, and deep integration with Naive UI theme overrides. Because of that, Tailwind would mainly change the authoring model for layout and simple component styling. It would not replace major parts of the existing styling system unless the project also commits to a broader UI-layer refactor.
-
-The recommended direction is an incremental hybrid approach:
-
-- keep the existing `--ui-*` design tokens and Naive UI theme layer
-- add Tailwind only as an optional utility layer
-- validate it on a small set of low-risk pages or self-contained components first
-- only expand usage if the pilot materially improves development speed and code review quality
-
-## Current Target
-
-The current target is not "remove all SCSS from the repo".
-
-The near-term goal is more specific:
-
-- in business code outside `src/components/ui/`, use Tailwind as the default styling tool for local layout and surface styling
-- if business code still needs local authored styles, prefer plain CSS over SCSS
-- remove business-code imports of SCSS helpers from `src/components/ui/`
-- remove remaining SCSS files outside `src/components/ui/` as part of this phase
-- keep the existing design-system layer in `src/components/ui/` as the source of truth for tokens and Naive UI integration
-- allow `src/components/ui/` to keep local SCSS for now when that remains the clearest implementation
-
-This means the project is pursuing two related but different directions:
-
-- business code should move toward Tailwind-first plus plain CSS fallback, with SCSS being removed from that layer in this phase
-- the component-library layer should move more cautiously, with looser short-term requirements on SCSS removal
-
-## Current Styling Architecture
-
-The current frontend styling model is centered around Vue SFC local styles plus shared CSS variables, with Tailwind now added as an optional utility layer.
-
-- `spx-gui` uses Vite + Vue 3, includes both Tailwind and Sass tooling in [spx-gui/package.json](../../spx-gui/package.json)
-- the app loads global styling through [spx-gui/src/main.ts](../../spx-gui/src/main.ts) and [spx-gui/src/app.css](../../spx-gui/src/app.css), which keeps [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) as the base layer; Tailwind preflight is intentionally disabled, and the app imports only Tailwind theme and utilities layers
-- design tokens are defined in TypeScript under [spx-gui/src/components/ui/tokens/index.ts](../../spx-gui/src/components/ui/tokens/index.ts) and related files
-- the token objects are converted into `--ui-*` CSS variables and injected globally by [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue)
-- Naive UI theme overrides are also defined in [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue), so the token system serves both custom CSS and third-party components
-- most component styles live inside local `<style scoped lang="scss">` blocks, for example [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue) and [spx-gui/src/components/editor/navbar/EditorNavbar.vue](../../spx-gui/src/components/editor/navbar/EditorNavbar.vue)
-
-Measured footprint in `spx-gui/src`:
-
-- 411 Vue files total
-- 325 Vue files contain a `<style>` block
-- 322 Vue files use SCSS in the SFC
-- 115 `:deep(...)` usages override descendants or third-party internals
-- 22 direct imports from `naive-ui`
-- 5 standalone stylesheet files under `src`, with most styling still embedded in Vue SFCs
-
-Representative styling patterns:
-
-- token-driven custom components: [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue)
-- app-wide token and theme bridge: [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue)
-- responsive breakpoint logic: [spx-gui/src/components/ui/responsive.ts](../../spx-gui/src/components/ui/responsive.ts) and [spx-gui/src/components/community/CenteredWrapper.vue](../../spx-gui/src/components/community/CenteredWrapper.vue)
-- complex page-level nested styling: [spx-gui/src/pages/community/project.vue](../../spx-gui/src/pages/community/project.vue)
-- content-renderer deep selectors: [spx-gui/src/components/copilot/MarkdownView.vue](../../spx-gui/src/components/copilot/MarkdownView.vue)
-
-## Tailwind Fit Assessment
-
-Tailwind fits part of the project well, but not all of it.
-
-Good fit:
-
-- layout-heavy pages using flex, grid, spacing, width, and alignment utilities
-- simple presentational components with limited state combinations
-- new pages or isolated features where templates are already the main source of UI structure
-- responsive layout rules, because the current breakpoint usage is limited and can be mapped into a custom Tailwind config
-
-Weak fit:
-
-- components with many styling states encoded through local CSS variables and nested selectors
-- custom wrappers around Naive UI that rely on theme overrides plus `:deep(...)` selectors
-- content renderers and editor surfaces that style generated DOM, not just authored template nodes
-- components with runtime geometry or inline styles, such as sliders, image previews, waveform editors, or draggable/resizable panes
-
-Poor or no fit:
-
-- Monaco editor integration and other third-party DOM that already depends on custom CSS
-- Konva or canvas-rendered surfaces where styling is not driven by CSS utility classes
-
-## Migration Cost Estimate
-
-Estimated cost if the goal is only to introduce Tailwind as an optional utility layer:
-
-- setup and token mapping: 1 to 2 engineer-days
-- pilot migration for 1 small feature area: 2 to 5 engineer-days
-- documentation and team conventions: 1 engineer-day
-
-Estimated cost for a meaningful incremental rollout across layout-heavy areas:
-
-- 2 to 4 engineer-weeks
-- includes Tailwind setup, token mapping, conventions, 10 to 20 component/page migrations, and cleanup of duplicated styling patterns
-
-Estimated cost for a broad migration that tries to make Tailwind the dominant styling approach in `spx-gui`:
-
-- 6 to 10 engineer-weeks at minimum
-- likely more if the scope includes reworking Naive UI wrappers, complex editor surfaces, and duplicated `:deep(...)` customizations
-
-Estimated cost for a true full migration away from the current SCSS-plus-token approach:
-
-- high risk and not currently justified
-- would effectively become a UI architecture refactor, not just a styling migration
-
-## Major Risks And Constraints
-
-### 1. Existing token system already solves part of the problem
-
-The project already has a centralized token system and shared CSS variables. Tailwind would not replace that cleanly unless the team rewrites token consumption across both custom components and Naive UI overrides.
-
-### 2. Tailwind does not remove the Naive UI dependency
-
-Naive UI is embedded in the app theme model via [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue). Even after adding Tailwind, the project would still need to maintain Naive UI theming and style overrides.
-
-### 3. Scoped SCSS is currently aligned with component boundaries
-
-A large share of the codebase keeps style logic close to each Vue component. Tailwind can improve speed for simple cases, but moving every component to class-heavy templates would be noisy and produce uneven code style if done inconsistently.
-
-### 4. `:deep(...)` usage is a real migration brake
-
-There are 115 `:deep(...)` usages. These target generated content, child internals, or third-party component markup. Tailwind utilities do not eliminate that category of styling work.
-
-### 5. Complex editor UI gets limited value from utility classes
-
-Several editor surfaces rely on runtime positions, inline CSS variables, drag behavior, SVG, or canvas-like rendering. Those areas already need custom CSS or programmatic styling, so Tailwind adds little leverage there.
-
-### 6. Design consistency can regress during mixed migration
-
-If the team starts using raw Tailwind classes without a token bridge and a small set of conventions, the result will drift away from the existing `--ui-*` design language.
-
-### 7. Maintenance cost can increase before it decreases
-
-During the transition, the project would have to maintain:
-
-- scoped SCSS
-- CSS variables
-- Naive UI theme overrides
-- Tailwind config and utilities
-
-That is acceptable only if the migration remains intentionally narrow at first.
-
-## Strategy Comparison
-
-### Full Migration
-
-Pros:
-
-- one dominant styling model after the migration finishes
-- potentially faster AI-assisted markup styling in the long run
-
-Cons:
-
-- high rewrite cost
-- high risk of regressions in editor surfaces and custom UI components
-- still does not remove the need for custom CSS in several critical areas
-- poor short-term return on effort
-
-Assessment: not recommended.
-
-### Incremental Migration
-
-Pros:
-
-- low risk
-- easy to stop if the benefits are smaller than expected
-- preserves current design tokens and Naive UI integration
-- lets the team learn where Tailwind actually helps
-
-Cons:
-
-- mixed styling models for some time
-- requires discipline to avoid ad hoc utility usage
-
-Assessment: viable.
-
-### Hybrid Approach With Guardrails
-
-This means Tailwind is introduced first where it improves business-code authoring, while the design-system layer keeps its current implementation patterns unless there is a clear payoff in changing them.
-
-Recommended usage boundaries:
-
-- use Tailwind for business-code page layout, spacing, simple cards, and simple wrappers
-- in business code, prefer plain CSS over SCSS when Tailwind is not the right expression
-- remove business-code dependencies on shared SCSS helper files from `src/components/ui/`
-- remove remaining SCSS files outside `src/components/ui/` instead of carrying them forward as a second-tier target
-- keep the existing token system as the source of truth
-- allow `src/components/ui/` to keep local SCSS in the short term, especially where it wraps Naive UI, exposes component variants, or relies on local stateful styling
-- keep CSS or SCSS for complex stateful widgets, `:deep(...)` overrides, editor internals, animation-heavy UI, and third-party DOM styling
-
-Assessment: best option.
-
-## Recommended Plan
-
-### Phase 1: Proof Of Fit
-
-- add Tailwind to `spx-gui` without changing existing styling
-- map Tailwind theme values to the current `--ui-*` tokens where practical
-- define custom breakpoints that match current responsive behavior
-- document when Tailwind is allowed and when local SCSS should remain the default
-
-Success criteria:
-
-- build works cleanly with Vite
-- no conflicts with current global styles or Naive UI theme overrides
-- a pilot page can use Tailwind without introducing duplicated design values
-
-### Phase 2: Pilot Migration
-
-Choose one small, layout-oriented area first. Good candidates are community or tutorial pages, not the editor core.
-
-Suggested pilot targets:
-
-- [spx-gui/src/components/community/CenteredWrapper.vue](../../spx-gui/src/components/community/CenteredWrapper.vue)
-- community listing or detail sections with mostly layout styling
-- simple UI wrappers that do not depend heavily on `:deep(...)`
-
-Avoid as first pilots:
-
-- editor navbar and editor panels
-- Monaco-related UI
-- waveform, drag-and-drop, or resize-heavy components
-- components that mainly customize Naive UI internals
-
-Success criteria:
-
-- the converted code is shorter or clearer than the current SCSS
-- design stays visually identical
-- AI-assisted edits become easier in practice, not just in theory
-
-### Phase 3: Decide Whether To Expand
-
-After the pilot, compare:
-
-- implementation speed
-- readability in code review
-- consistency with existing design tokens
-- regression rate
-- amount of residual SCSS still required
-
-If the pilot does not show a clear gain, stop and keep the current styling model.
-
-If the pilot is successful, expand only into other layout-heavy areas.
-
-## SCSS Migration Backlog
-
-The current SCSS usage in `spx-gui` should not be treated as a single migration bucket.
-
-The practical migration unit is not "all SCSS files" but "SCSS by responsibility":
-
-- layout-heavy page and card styling is a good Tailwind candidate
-- global foundation styling should remain, even if it later moves from SCSS to plain CSS
-- deep overrides, generated content styling, and editor surfaces should remain in CSS or SCSS
-- small SCSS helper layers should be phased out only after their consumers are migrated
-
-### Priority 1: Good Tailwind Candidates
-
-These files are strong candidates for early migration because they are business-code surfaces whose styling is mostly local layout, spacing, sizing, and simple visual presentation on authored template nodes.
-
-Recommended first batch:
-
-- [spx-gui/src/pages/community/explore.vue](../../spx-gui/src/pages/community/explore.vue)
-- [spx-gui/src/pages/community/home.vue](../../spx-gui/src/pages/community/home.vue)
-- [spx-gui/src/components/community/user/sidebar/UserSidebar.vue](../../spx-gui/src/components/community/user/sidebar/UserSidebar.vue)
-- [spx-gui/src/pages/tutorials/course-series.vue](../../spx-gui/src/pages/tutorials/course-series.vue)
-
-Recommended second batch:
-
-- [spx-gui/src/components/navbar/NavbarWrapper.vue](../../spx-gui/src/components/navbar/NavbarWrapper.vue)
-- [spx-gui/src/components/project/ProjectItem.vue](../../spx-gui/src/components/project/ProjectItem.vue)
-- user-page wrappers and list pages under `src/pages/community/user/` where the styling is primarily page shell and list layout
-
-Migration rule for this category:
-
-- move layout, spacing, sizing, typography, and simple hover states into Tailwind classes or small project utilities in `src/app.css`
-- if local authored styles still remain, prefer plain CSS over SCSS
-- remove the local `<style scoped lang="scss">` block after the migrated component is visually verified
-
-### Priority 2: Keep CSS Or SCSS Explicitly
-
-These files should remain outside the primary Tailwind migration target because their value comes from deep selectors, third-party DOM overrides, generated content styling, complex runtime layout, or highly stateful design-system behavior.
-
-Representative keep-as-CSS-or-SCSS areas:
-
-- design-system wrappers such as [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue) and [spx-gui/src/components/ui/UITextInput.vue](../../spx-gui/src/components/ui/UITextInput.vue)
-- content renderers such as [spx-gui/src/components/copilot/MarkdownView.vue](../../spx-gui/src/components/copilot/MarkdownView.vue) and [spx-gui/src/components/common/CodeView.vue](../../spx-gui/src/components/common/CodeView.vue)
-- editor and runner surfaces such as [spx-gui/src/components/editor/preview/EditorPreview.vue](../../spx-gui/src/components/editor/preview/EditorPreview.vue), [spx-gui/src/pages/community/project.vue](../../spx-gui/src/pages/community/project.vue), and components under `src/components/project/runner/` and `src/components/editor/`
-
-Migration rule for this category:
-
-- do not migrate these files just to reduce SCSS usage
-- keep local CSS or SCSS where it is the clearest way to express stateful styling, `:deep(...)` overrides, pseudo-elements, counters, container queries, or generated DOM styling
-
-### Priority 2.5: Remove Business-Code Dependencies On Shared SCSS Helpers
-
-Business code should stop depending on shared SCSS helper files even if those helper files still temporarily exist for `src/components/ui/`.
-
-Current remaining helper dependencies include:
-
-- 2 direct imports of `src/components/ui/link.scss`
-
-Migration rule for this category:
-
-- replace `link.scss` usage with local CSS or template classes at the call site
-- do not keep business-code SCSS imports just because the helper file still exists for another area
-
-### Priority 2.6: Remove SCSS Files Outside `src/components/ui/`
-
-This phase should not leave a second bucket of non-UI-library SCSS behind.
-
-Migration rule for this category:
-
-- for files outside `src/components/ui/`, convert remaining `<style lang="scss">` blocks to Tailwind or plain CSS in the same pass
-- if a non-UI-library file still needs authored local styles after migration, keep them as plain CSS rather than SCSS
-- reserve SCSS carryover for `src/components/ui/` only in this phase
-
-### Priority 3: Phase Out Small SCSS Helper Layers
-
-These files are not long-term migration targets themselves. They should be removed only after the remaining consumers are migrated or absorbed into component-local styles.
-
-- [spx-gui/src/components/ui/link.scss](../../spx-gui/src/components/ui/link.scss)
-	This should be folded into link components or replaced by a small Tailwind utility convention before deleting the mixin file.
-- [spx-gui/src/utils/utils.scss](../../spx-gui/src/utils/utils.scss)
-	This should be replaced by direct Tailwind utilities such as truncation helpers or by local component CSS where needed.
-
-### Global Foundation Styling
-
-Global foundation styling should remain even in a Tailwind-based hybrid model.
-
-- [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) and its imported [spx-gui/src/components/ui/reset.css](../../spx-gui/src/components/ui/reset.css) should not be deleted as part of Tailwind adoption
-- Tailwind preflight is intentionally disabled, so these files remain the project base layer for reset rules, `box-sizing`, button font inheritance, `@font-face`, and other shared foundation styles
-- this base layer may evolve over time, but it should continue to live in project-owned CSS rather than being replaced implicitly by Tailwind preflight
-
-### Recommended Execution Order
-
-1. Finish low-risk page-shell and list-layout migrations in community and tutorials areas.
-2. Migrate simple card components such as project and course list items.
-3. Replace the remaining `link.scss` and `utils.scss` consumers.
-4. Delete helper SCSS files only after they have no remaining imports or mixin usages.
-5. Keep editor, runner, markdown, and Naive UI wrapper styling outside the migration scope unless there is a separate reason to refactor them.
-
-## Pilot Conventions And Preferences
-
-The community and tutorials pilot clarified a few practical conventions that should guide follow-up migrations.
-
-These are not abstract preferences. They reflect patterns that were already implemented and verified in the pilot components and pages.
-
-### 1. Keep Tailwind As A Local Authoring Tool, Not A New Global Dumping Ground
-
-The global entry file [spx-gui/src/app.css](../../spx-gui/src/app.css) should stay narrowly scoped.
-
-It is the right place for:
-
-- Tailwind entry setup such as importing `tailwindcss/theme.css`, `tailwindcss/utilities.css`, and `@source`
-- the theme bridge from existing `--ui-*` variables to Tailwind tokens
-- rare project-wide utilities that are truly cross-feature and not page-specific
-
-It is not the right place for:
-
-- tutorials-only utilities
-- page-local dimensions, transforms, or background colors
-- feature-specific card or banner styles
-
-Rule of thumb:
-
-- if a class name would only make sense inside one page or one small feature area, keep it local to that component instead of promoting it into `app.css`
-
-### 2. Bridge Global Tokens, Not Page-Specific Business Styling
-
-The Tailwind theme bridge should cover stable design-system tokens from [spx-gui/src/components/ui/tokens/index.ts](../../spx-gui/src/components/ui/tokens/index.ts).
-
-That includes:
-
-- shared palette tokens
-- semantic tokens such as `primary`, `danger`, `success`, `sprite`, `sound`, and `stage`
-- typography, spacing, radius, and shadow tokens
-
-It should not absorb page-specific visual decisions such as a tutorials-only banner color or one-off sizing tokens.
-
-Rule of thumb:
-
-- bridge values that belong to the whole product design language
-- keep values that exist only for one feature in the feature itself
-
-Theme-reset preference:
-
-- for theme namespaces already covered by the design system, such as color, shadow, font, font-size, radius, and line-height, reset Tailwind's default values and expose only the project-specific values intended for use in this repo
-
-Token usage preference:
-
-- in Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`
-- in local CSS or SCSS rules, prefer using the original `--ui-*` variables directly, because `--ui-*` remains the source of truth and the Tailwind bridge exists primarily for utility-class authoring
-- when a Tailwind utility needs to reference a CSS custom property directly, prefer the Tailwind v4 shorthand such as `text-(--token)`, `bg-(--token)`, `border-(--token)`, or `shadow-(--token)` over older forms like `text-[var(--token)]` or `bg-[var(--token)]`
-
-Bridge naming and text-token preference:
-
-- choose bridge names that do not collide with Tailwind defaults or existing UI-library class names; avoid introducing helpers such as `leading-1` that look like built-in Tailwind utilities but mean something project-specific
-- define text-size tokens in `@theme` before using named utilities such as `text-12`, `text-13`, `text-24`, or `text-36`
-- when a named text utility should carry a default line-height, define it through the paired `--text-*-line-height` token instead of introducing a parallel custom leading scale
-
-### 3. Prefer Tailwind For Straightforward Layout And Surface Styling
-
-The pilot confirmed that Tailwind works well for the following kinds of changes:
-
-- flex and grid layout
-- spacing, width, height, alignment, and overflow
-- simple typography application through bridged tokens
-- simple hover transitions on authored template nodes
-
-Representative examples from the pilot:
-
-- [spx-gui/src/pages/tutorials/index.vue](../../spx-gui/src/pages/tutorials/index.vue)
-- [spx-gui/src/components/tutorials/TutorialsBanner.vue](../../spx-gui/src/components/tutorials/TutorialsBanner.vue)
-- [spx-gui/src/components/tutorials/CourseSeriesItem.vue](../../spx-gui/src/components/tutorials/CourseSeriesItem.vue)
-
-Preferred style in this category:
-
-- write the style directly in the template when the utilities remain readable
-- when original CSS uses `flex: <grow> <shrink> <basis>`, preserve that shorthand with `flex-[<grow>_<shrink>_<basis>]` instead of decomposing it into partial utilities such as `shrink-0`, so grow, shrink, and basis stay coupled during migration
-- remove the local style block after the result is verified
-
-Responsive styling preference:
-
-- reset Tailwind's default breakpoint names and use only the project-specific names `tablet`, `desktop`, and `desktop-large`
-- map the project breakpoints into Tailwind once in [spx-gui/src/app.css](../../spx-gui/src/app.css)
-- prefer Tailwind responsive variants for style changes instead of runtime `useResponsive()` checks
-- keep runtime responsive helpers only for non-style logic such as changing counts, queries, or other behavior that CSS cannot express
-
-### 4. Do Not Force Tailwind Where A Small Inline Style Is Clearer
-
-Some values are technically expressible in Tailwind but are not a good fit for utility classes.
-
-Examples from the pilot:
-
-- special color expressions such as `rgb(from var(--ui-color-grey-1000) r g b / 0.2)`
-- asset URLs that are clearer when imported through TypeScript
-- one-off values that would otherwise require long arbitrary-value classes
-
-Preferred style in this category:
-
-- import the asset or compute the value in script when that makes the dependency explicit
-- bind it through `:style` when the inline form is shorter and clearer than a custom utility or arbitrary class
-
-This is the current preferred pattern for one-off backgrounds in migrated components such as [spx-gui/src/components/tutorials/CourseSeriesItem.vue](../../spx-gui/src/components/tutorials/CourseSeriesItem.vue).
-
-### 5. Do Not Introduce Setup Variables For Single-Use Style Values Without A Payoff
-
-During the pilot, a temporary setup variable was introduced for a single background image style and then removed.
-
-Preferred style:
-
-- if a style value is used only once and is still readable inline, bind it directly in the template
-- only lift it into script when it is reused, computed, or meaningfully improves readability
-
-### 6. Prefer Explicit Asset Imports Over Tailwind `url(...)` Classes When Readability Matters
-
-Tailwind arbitrary `url(...)` classes do work correctly through Vite build and asset hashing.
-
-However, the pilot showed that this form can still create review friction because the dependency path is less explicit in the template.
-
-Preferred style:
-
-- for important or non-obvious asset references, prefer `import stageBgUrl from '...'` plus `:style="{ backgroundImage: \`url(${stageBgUrl})\` }"`
-- reserve Tailwind `bg-[url(...)]` for cases where the shorthand is clearly readable and unlikely to cause doubt
-
-### 7. Keep Migration Decisions At The Responsibility Level, Not The File-Extension Level
-
-The pilot reinforced the original migration strategy:
-
-- Tailwind is a good fit for local page-shell and card layout concerns
-- local CSS or SCSS should remain for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets
-- a file does not need to become "100% Tailwind" to count as successfully migrated
-
-The goal is clearer and more maintainable code, not maximizing utility-class usage.
-
-### 8. Preserve Styling Hook Classes Across Component Boundaries
-
-Recent migrations exposed a failure mode that is easy to miss in review: some business components rely on semantic classes exported by child components as part of a styling contract.
-
-Examples from the pilot:
-
-- `CourseItem.vue` and `CourseSeriesItem.vue` reveal slotted menus through parent `:deep(.corner-menu)` rules
-- `CourseSelector.vue` adjusts a child action icon through selectors that depend on `.course-item-mini` and `.action-icon`
-
-Preferred style:
-
-- treat these semantic classes as styling API surfaces, not incidental markup
-- do not remove them just because the element's own spacing, color, or border styles moved into Tailwind utilities
-- when a parent or sibling component still depends on one of these classes, preserve it and migrate only the visual declarations around it
-
-Rule of thumb:
-
-- if a class name is referenced outside the current component file, keep it unless the dependent selector is removed in the same change
-
-### 9. Keep Cross-Component Descendant Styling In Local CSS
-
-The pilot also showed that Tailwind arbitrary descendant selectors become hard to read once they cross component boundaries, target slot content, or mix with `:deep(...)`.
-
-Examples:
-
-- hover-reveal logic for slotted corner menus
-- parent selectors that style child internals through `:deep(...)`
-- slot-content targeting where the child controls the rendered class names
-
-Preferred style:
-
-- keep authored layout, spacing, and simple surfaces in Tailwind
-- keep cross-component descendant styling in a small local CSS block, preferably plain CSS when SCSS features are not needed
-
-This split is usually clearer than packing selectors such as `[&:hover_.corner-menu]...` into the template.
-
-### 10. Respect Internal Root Styles Of Wrapper Components
-
-Wrapper components in `src/components/ui/` sometimes style their own root elements in ways that external utilities cannot safely replace.
-
-Two concrete cases from the pilot:
-
-- `UIImg` keeps `position: relative` on its root so loading overlays and background-image behavior work correctly
-- `UIIcon` fixes its root width and height, so `h-*` / `w-*` classes on the component instance may not win
-
-Preferred style:
-
-- before applying root-level positioning or sizing utilities to a wrapped UI component, inspect the component implementation
-- if the wrapper already owns the root layout semantics, use an outer wrapper for positioning concerns such as `absolute`, `top`, `left`, and `z-index`
-- for one-off width/height overrides on wrapper roots such as `UIIcon`, prefer inline `style` when that is the shortest and clearest way to win the cascade
-
-### 11. Keep Exact Local Values Local, With A Visible TODO
-
-Some migrated components still need exact local visual values that are not part of the current token system.
-
-Preferred style:
-
-- keep those values local instead of forcing them into the global theme bridge
-- add a nearby comment such as `TODO: review this ... value` so later cleanup can decide whether the value should remain local or become a token
-
-### 12. Flatten `:deep(...)` Selectors In Plain Scoped CSS
-
-When a file is migrated from SCSS to plain scoped CSS, nested `:deep(...)` forms should not be carried over mechanically.
-
-Preferred style:
-
-- in plain `<style scoped>`, write explicit flat selectors such as `.preview :deep(svg)` instead of nested forms like `.preview { :deep(svg) { ... } }`
-- be especially careful in `v-html` or raw-SVG cases, where the descendant content does not receive the component's scoped attribute and depends on the `:deep(...)` selector being compiled correctly
-- keep SCSS-style nesting only in files that still explicitly use SCSS
-
-## Recommendation
-
-Tailwind CSS is worth evaluating in `spx-gui`, but only as a constrained utility layer.
-
-It is not worth pursuing as a near-term full migration target because the project already has:
-
-- a functioning token system
-- a custom UI component layer
-- Naive UI theme integration
-- many component-local scoped SCSS blocks
-- a meaningful number of deep selectors and complex editor surfaces
-
-The practical recommendation for issue `#2981` is:
-
-- conclude that Tailwind is feasible
-- reject full migration for now
-- recommend a hybrid incremental pilot
-- make the pilot target a simple community or tutorial area before touching editor internals
-
-## Suggested Next Step
-
-If the team wants to continue after this assessment, the next task should be a small proof-of-concept PR that:
-
-- installs Tailwind in `spx-gui`
-- defines the minimal theme bridge to current tokens
-- converts one low-risk page or wrapper component
-- records what became simpler and what still required SCSS
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 16b5bf6f0..604682220 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -4,7 +4,7 @@
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);
 
-@source "./**/*.{vue,ts,tsx,js,jsx,html}";
+/* @tailwindcss/vite performs automatic source detection; re-add @source if specific files are missed */
 
 /*
  * Shared UILink component variants.
@@ -199,7 +199,7 @@
   --color-white: #fff;
 
   /* Typography tokens bridged from the UI token layer. */
-  --font-sans: var(
+  --font-main: var(
     --ui-font-family-main,
     AlibabaHealthB,
     -apple-system,
@@ -215,9 +215,7 @@
     'Segoe UI Symbol',
     'Noto Color Emoji'
   );
-  --font-mono: var(--ui-font-family-code, Menlo, Monaco, 'Courier New', monospace);
-  --font-main: var(--font-sans);
-  --font-code: var(--font-mono);
+  --font-code: var(--ui-font-family-code, Menlo, Monaco, 'Courier New', monospace);
 
   /* Radius and shadow tokens bridged from the UI token layer. */
   --radius-none: 0px;
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
index c5a3d9a52..46dcb0b01 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
@@ -31,7 +31,7 @@ const loading = computed(() => props.loading || fileLoading.value)
       name: 'Backdrop image item',
       desc: 'Click to select this image as the backdrop'
     }"
-    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[width,height,border-radius] duration-200 ease-in-out"
+    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[transform,border-radius] duration-200 ease-in-out"
     :class="[
       compact ? 'h-17 w-22 rounded-1' : 'h-27 w-35 rounded-2',
       active ? 'border-turquoise-500 bg-turquoise-200 cursor-default' : '',
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue b/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
index 9714f5a59..3eab450f6 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
@@ -31,7 +31,7 @@ const loading = computed(() => props.loading || fileLoading.value)
       name: 'Sprite image item',
       desc: 'Click to select this image as the default costume for the sprite'
     }"
-    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[width,height,border-radius] duration-200 ease-in-out"
+    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[transform,border-radius] duration-200 ease-in-out"
     :class="[
       compact ? 'h-22 w-22 rounded-1' : 'h-35 w-35 rounded-2',
       active ? 'border-turquoise-500 bg-turquoise-200 cursor-default' : '',
diff --git a/spx-gui/src/components/community/project/OwnerInfo.vue b/spx-gui/src/components/community/project/OwnerInfo.vue
index 9e724e3e0..418e0af95 100644
--- a/spx-gui/src/components/community/project/OwnerInfo.vue
+++ b/spx-gui/src/components/community/project/OwnerInfo.vue
@@ -14,11 +14,11 @@ const avatarUrl = useAvatarUrl(() => user.value?.avatar)
 <template>
   <!-- TODO: extract to `@/components/ui/`? -->
   <UserLink
-    class="link-boring group inline-flex items-center gap-1 text-title underline"
+    class="group flex items-center gap-1 text-title underline transition-colors duration-100 hover:text-primary-main active:text-primary-600"
     :user="user?.username ?? null"
   >
     <i
-      class="block h-6 w-6 rounded-full border-2 border-grey-100 bg-grey-100 bg-center bg-contain transition-[border-color] duration-100 group-hover:border-primary-400 group-active:border-primary-600"
+      class="block h-6 w-6 rounded-full border-2 border-grey-100 bg-grey-100 bg-center bg-contain transition-colors duration-100 group-hover:border-primary-400 group-active:border-primary-600"
       :style="user != null ? { backgroundImage: `url(${avatarUrl})` } : null"
     ></i>
     {{ user?.displayName }}
diff --git a/spx-gui/src/components/copilot/CopilotInput.vue b/spx-gui/src/components/copilot/CopilotInput.vue
index ce0575259..458de97a7 100644
--- a/spx-gui/src/components/copilot/CopilotInput.vue
+++ b/spx-gui/src/components/copilot/CopilotInput.vue
@@ -40,7 +40,7 @@ defineExpose({ focus })
 </script>
 
 <template>
-  <div class="group" :class="{ loading }" @click="focus">
+  <div class="group/loading" :class="{ loading }" @click="focus">
     <div class="content flex h-full items-center gap-2.5 bg-grey-100 px-3.5 py-3">
       <div v-if="loading" class="dot-loading flex items-center justify-between gap-0.5">
         <div class="dot"></div>
@@ -57,7 +57,7 @@ defineExpose({ focus })
         ></textarea>
       </div>
       <button
-        class="submit-btn flex h-8 w-8 flex-none cursor-pointer items-center justify-center rounded-full border-none p-1.5 outline-none group-[.loading]:hidden"
+        class="submit-btn flex h-8 w-8 flex-none cursor-pointer items-center justify-center rounded-full border-none p-1.5 outline-none group-[.loading]/loading:hidden"
         :class="{ disabled: inputStr.length === 0 }"
         @click="handleSubmit"
       >
@@ -71,7 +71,7 @@ defineExpose({ focus })
         </svg>
       </button>
       <button
-        class="hidden h-8 w-8 flex-none cursor-pointer rounded-full border-none bg-transparent p-0 outline-none group-[.loading]:flex"
+        class="hidden h-8 w-8 flex-none cursor-pointer rounded-full border-none bg-transparent p-0 outline-none group-[.loading]/loading:flex"
         @click="handleAbort"
       >
         <svg
diff --git a/spx-gui/src/components/course/management/CourseItemMini.vue b/spx-gui/src/components/course/management/CourseItemMini.vue
index 1c1e67f87..98b8f8c88 100644
--- a/spx-gui/src/components/course/management/CourseItemMini.vue
+++ b/spx-gui/src/components/course/management/CourseItemMini.vue
@@ -19,6 +19,7 @@ const thumbnailUrl = useAsyncComputedLegacy(async (onCleanup) => {
 </script>
 
 <template>
+  <!-- FIXME: `bg-grey-50` is not taking effect -->
   <div
     class="flex items-center rounded-1 border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
     :class="{
diff --git a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
index 5ed4c0d90..887645032 100644
--- a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
@@ -219,6 +219,7 @@ const handleSubmit = useMessageHandle(
         </label>
         <div class="grid h-100 grid-cols-2 gap-6">
           <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
+            <!-- FIXME: `bg-grey-50` is not taking effect -->
             <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
               {{ $t({ en: 'Available courses', zh: '可选课程' }) }}
             </label>
@@ -231,6 +232,7 @@ const handleSubmit = useMessageHandle(
             />
           </div>
           <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
+            <!-- FIXME: `bg-grey-50` is not taking effect -->
             <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
               {{ $t({ en: 'Selected courses', zh: '已选课程' }) }}
             </label>
diff --git a/spx-gui/src/components/course/management/CourseSeriesItem.vue b/spx-gui/src/components/course/management/CourseSeriesItem.vue
index 446225199..5445a129f 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItem.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItem.vue
@@ -16,6 +16,7 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 </script>
 
 <template>
+  <!-- FIXME: `bg-grey-50` is not taking effect (migrated from legacy code `background: var(--ui-color-grey-50)`) -->
   <li
     class="course-series-item relative h-40 w-58 cursor-pointer overflow-hidden rounded-3 border-2 border-grey-300 bg-grey-50 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
   >
diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index 150441021..0c7d19e2e 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -4,7 +4,7 @@
   <UICard
     v-show="isPreviewMode"
     v-radar="{ name: `Editor for ${selected.type}`, desc: `Main editor panel for editing ${selected.type}` }"
-    class="relative flex min-w-0 flex-[1_1_0] flex-col overflow-visible!"
+    class="relative min-w-0 flex-[1_1_0] flex flex-col overflow-visible!"
   >
     <!--
       TODO: optimize performance for switching between editors, which corresponds to selection change.
@@ -22,7 +22,7 @@
     <StageEditor v-else-if="selected.type === 'stage'" :stage="project.stage" :state="editorCtx.state.stageState" />
     <EditorPlaceholder v-else />
   </UICard>
-  <div v-show="isPreviewMode" class="flex min-w-0 shrink-0 grow-0 basis-[496px] flex-col gap-middle">
+  <div v-show="isPreviewMode" class="min-w-0 flex-[0_0_496px] flex flex-col gap-middle">
     <EditorPreview />
     <EditorPanels />
   </div>
diff --git a/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue b/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
index 4f685d29f..604aec0be 100644
--- a/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
+++ b/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
@@ -3,7 +3,7 @@
     <UITooltip>
       <template #trigger>
         <div
-          class="cursor-pointer flex h-8 w-8 items-center justify-center rounded-full border border-grey-500 bg-white transition-colors hover:bg-grey-300"
+          class="cursor-pointer flex h-8 w-8 items-center justify-center rounded-full border border-grey-500 bg-grey-100 transition-colors hover:bg-grey-300"
         >
           <UIIcon :type="muted ? 'volumeOff' : 'volumeUp'" />
         </div>
diff --git a/spx-gui/src/components/ui/UIConfigProvider.vue b/spx-gui/src/components/ui/UIConfigProvider.vue
index 4e5e2c328..a97ec8ca1 100644
--- a/spx-gui/src/components/ui/UIConfigProvider.vue
+++ b/spx-gui/src/components/ui/UIConfigProvider.vue
@@ -166,7 +166,7 @@ useProvideLastClickEvent()
 const cssVariables = getCssVars('--ui-', uiVariables)
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .ui-config-provider {
   height: 100%;
 
@@ -177,48 +177,10 @@ const cssVariables = getCssVars('--ui-', uiVariables)
 }
 </style>
 
-<style lang="scss">
-// TODO: should move these styles to global.css ?
-@layer base {
-  /* Special title */
-  h1 {
-    font-size: 20px;
-    line-height: 1.4;
-  }
-
-  /* Standard title */
-  h2 {
-    font-size: 16px;
-    line-height: 1.5;
-  }
-
-  /* Text in navigation bar */
-  h3,
-  /* Text */
-  h4 {
-    font-size: 14px;
-    line-height: 1.57143;
-  }
-
-  /* More information */
-  h5 {
-    font-size: 12px;
-    line-height: 1.5;
-  }
-
-  h6 {
-    font-size: 10px;
-    line-height: 1.6;
-  }
-
-  button:focus {
-    outline: 2px solid var(--ui-color-primary-700);
-  }
-}
-
-// vueuc (dep of naive-ui) uses `pointer-events: all` on children of `v-binder-follower-content`, which wraps `Popover` content in naive-ui.
-// It causes pointer behavior issues in popup content. For example, a svg in a `visibility: hidden` element will still be clickable.
-// So we override it here to fix the issue. See details in https://github.com/07akioni/vueuc/issues/314
+<style>
+/* vueuc (dep of naive-ui) uses `pointer-events: all` on children of `v-binder-follower-content`, which wraps `Popover` content in naive-ui. */
+/* It causes pointer behavior issues in popup content. For example, a svg in a `visibility: hidden` element will still be clickable. */
+/* So we override it here to fix the issue. See details in https://github.com/07akioni/vueuc/issues/314 */
 .v-binder-follower-content > * {
   pointer-events: initial;
 }
diff --git a/spx-gui/src/components/ui/UILink.vue b/spx-gui/src/components/ui/UILink.vue
index 7cd229300..b7327a496 100644
--- a/spx-gui/src/components/ui/UILink.vue
+++ b/spx-gui/src/components/ui/UILink.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-withDefaults(
+import { computed } from 'vue'
+
+const props = withDefaults(
   defineProps<{
     href?: string
     type?: 'primary' | 'boring'
@@ -9,41 +11,12 @@ withDefaults(
     type: 'primary'
   }
 )
+
+const linkClass = computed(() => (props.type === 'primary' ? 'link-primary' : 'link-boring'))
 </script>
 
 <template>
-  <a class="ui-link" :class="`type-${type}`" :href="href">
+  <a :class="linkClass" :href="href">
     <slot></slot>
   </a>
 </template>
-
-<style lang="scss" scoped>
-.ui-link {
-  transition: color 0.1s;
-
-  &.type-primary {
-    color: var(--ui-color-primary-main);
-    text-decoration: none;
-
-    &:hover {
-      color: var(--ui-color-primary-400);
-    }
-
-    &:active {
-      color: var(--ui-color-primary-600);
-    }
-  }
-
-  &.type-boring {
-    color: inherit;
-
-    &:hover {
-      color: var(--ui-color-primary-main);
-    }
-
-    &:active {
-      color: var(--ui-color-primary-600);
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/global.css b/spx-gui/src/components/ui/global.css
index fe84e1947..acdd51691 100644
--- a/spx-gui/src/components/ui/global.css
+++ b/spx-gui/src/components/ui/global.css
@@ -7,9 +7,44 @@
     box-sizing: border-box;
   }
 
+  /* Special title */
+  h1 {
+    font-size: 20px;
+    line-height: 1.4;
+  }
+
+  /* Standard title */
+  h2 {
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+  /* Text in navigation bar */
+  h3,
+  /* Text */
+  h4 {
+    font-size: 14px;
+    line-height: 1.57143;
+  }
+
+  /* More information */
+  h5 {
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  h6 {
+    font-size: 10px;
+    line-height: 1.6;
+  }
+
   button {
     font-family: inherit;
   }
+
+  button:focus {
+    outline: 2px solid var(--ui-color-primary-700);
+  }
 }
 
 @font-face {
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index ab3593188..aac175e43 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -395,7 +395,7 @@ const remixesRet = useQuery(
                     <template v-if="runnerState === 'initial'">
                       <div v-if="needsSignInToRun" class="flex h-full w-full items-center justify-center p-6">
                         <div
-                          class="relative flex w-85 flex-col items-center overflow-visible rounded-[16px] bg-white px-6 pt-17 pb-6 text-center"
+                          class="relative flex w-85 flex-col items-center overflow-visible rounded-[16px] bg-grey-100 px-6 pt-17 pb-6 text-center"
                           style="box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1)"
                         >
                           <!-- eslint-disable-next-line vue/no-v-html -->

From c805022616c112833db936892bdcaf0182cb956e Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 7 Apr 2026 17:19:16 +0800
Subject: [PATCH 10/29] move UI component base styles into Tailwind component
 layer

---
 .../asset/gen/common/ListItemWrapper.vue      |   2 +-
 .../preprocessing/common/ProcessItem.vue      |   2 +-
 .../src/components/common/CostumesPlayer.vue  |  18 +-
 spx-gui/src/components/common/RenameModal.vue |   2 +-
 .../components/community/CommunityNavbar.vue  |   2 +-
 .../components/community/ProjectsSection.vue  |   2 +-
 .../community/user/AvatarZoomSlider.vue       |   4 +-
 .../community/user/UserUsernameInline.vue     |   4 +-
 .../user/sidebar/UserSidebarItem.vue          |   2 +-
 .../course/management/CourseEditModal.vue     |   8 +-
 .../management/CourseItemCornerMenu.vue       |   2 +-
 .../management/CourseSeriesEditModal.vue      |   8 +-
 .../management/CourseSeriesItemCornerMenu.vue |   2 +-
 .../ui/document-tab/DocumentTabs.vue          |   2 +-
 .../ui/input-helper/ResourceInput.vue         |   2 +-
 .../ui/markdown/DiagnosticItem.vue            |   2 +-
 .../components/editor/navbar/EditorNavbar.vue |   6 +-
 .../components/editor/sprite/SpriteItem.vue   |   6 +-
 .../editor/sprite/animation/SoundEditor.vue   |   5 +-
 .../editor/stage/sound/SoundRecorder.vue      |   2 +-
 .../editor/stage/sound/VolumeSlider.vue       |   4 +-
 .../src/components/navbar/NavbarDropdown.vue  |   2 +-
 .../src/components/navbar/NavbarTutorials.vue |   2 +-
 .../src/components/project/ProjectItem.vue    |   4 +-
 .../project/runner/ProjectRunner.vue          |   2 +-
 .../tutorials/TutorialStateIndicator.vue      |   4 +-
 spx-gui/src/components/ui/UIButton.vue        |  22 ++-
 spx-gui/src/components/ui/UIButtonGroup.vue   |   8 +-
 .../src/components/ui/UIButtonGroupItem.vue   |  74 ++++----
 spx-gui/src/components/ui/UICard.vue          |  14 +-
 spx-gui/src/components/ui/UIChip.vue          |  48 ++---
 spx-gui/src/components/ui/UICode.vue          |  20 +-
 spx-gui/src/components/ui/UIDivider.vue       |   1 +
 spx-gui/src/components/ui/UIImg.vue           |  24 +--
 spx-gui/src/components/ui/UIPagination.vue    |  13 +-
 spx-gui/src/components/ui/UITag.vue           |  57 +++---
 spx-gui/src/components/ui/UITooltip.vue       |   2 -
 .../ui/block-items/UIBackdropItem.vue         |  14 +-
 .../components/ui/block-items/UIBlockItem.vue | 172 +++++++++---------
 .../ui/block-items/UIBlockItemTitle.vue       |  51 +++---
 .../ui/block-items/UICornerIcon.vue           |  56 +++---
 .../ui/block-items/UIEditorSpriteItem.vue     |   2 +-
 .../components/ui/block-items/UISoundItem.vue |  11 +-
 .../ui/block-items/UISpriteItem.vue           |   9 +-
 .../src/components/ui/checkbox/UICheckbox.vue |   2 -
 .../ui/checkbox/UICheckboxGroup.vue           |   2 -
 .../src/components/ui/collapse/UICollapse.vue |  16 +-
 .../components/ui/collapse/UICollapseItem.vue |  26 +--
 spx-gui/src/components/ui/empty/UIEmpty.vue   |  52 +++---
 spx-gui/src/components/ui/error/UIError.vue   |  34 ++--
 spx-gui/src/components/ui/form/UIForm.vue     |   2 -
 spx-gui/src/components/ui/form/UIFormItem.vue |  12 +-
 spx-gui/src/components/ui/icons/UIIcon.vue    |  14 +-
 .../ui/loading/UIDetailedLoading.vue          |  62 ++++---
 .../src/components/ui/loading/UILoading.vue   |  56 +++---
 spx-gui/src/components/ui/menu/UIMenu.vue     |   8 +-
 .../src/components/ui/menu/UIMenuGroup.vue    |  36 ++--
 spx-gui/src/components/ui/menu/UIMenuItem.vue |  66 +++----
 .../src/components/ui/modal/UIModalClose.vue  |  60 +++---
 .../components/ui/radio/UIChipRadioGroup.vue  |  10 +-
 spx-gui/src/components/ui/radio/UIRadio.vue   |   2 -
 .../src/components/ui/radio/UIRadioGroup.vue  |   2 -
 .../src/components/ui/radio/UITabRadio.vue    |  40 ++--
 .../components/ui/radio/UITabRadioGroup.vue   |  20 +-
 spx-gui/src/components/ui/select/UISelect.vue |  56 +++---
 spx-gui/src/components/ui/tab/UITab.vue       |  40 ++--
 spx-gui/src/components/ui/tab/UITabs.vue      |   8 +-
 .../src/components/ui/timeline/UITimeline.vue |   2 -
 spx-gui/src/pages/community/project.vue       |   6 +-
 69 files changed, 709 insertions(+), 624 deletions(-)

diff --git a/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue b/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
index f4669df6d..ed1e53bcf 100644
--- a/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
+++ b/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
@@ -19,7 +19,7 @@ defineEmits<{
         class="justify-center text-primary-main"
         @click="$emit('add')"
       >
-        <UIIcon style="width: 24px; height: 24px" type="plus" />
+        <UIIcon class="w-6 h-6" type="plus" />
       </UIBlockItem>
     </div>
   </div>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
index a0037f6bb..4895351c9 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
@@ -9,7 +9,7 @@
       class="absolute top-5.25 left-8 flex h-6 w-6 items-center justify-center rounded-full bg-green-main text-grey-100 transition-opacity duration-200"
       :class="applied ? 'opacity-100' : 'opacity-0'"
     >
-      <UIIcon color="sprite" type="check" />
+      <UIIcon type="check" />
     </div>
     <p class="w-full px-[1em] py-0.5 text-center text-10/[1.4] text-title">{{ name }}</p>
   </li>
diff --git a/spx-gui/src/components/common/CostumesPlayer.vue b/spx-gui/src/components/common/CostumesPlayer.vue
index 1759e2a57..ec01a0ee5 100644
--- a/spx-gui/src/components/common/CostumesPlayer.vue
+++ b/spx-gui/src/components/common/CostumesPlayer.vue
@@ -118,25 +118,13 @@ defineExpose({ load, play })
 </script>
 
 <template>
-  <div class="frames-player">
-    <canvas ref="canvasRef" class="canvas"></canvas>
+  <div class="relative">
+    <canvas ref="canvasRef" class="absolute w-full h-full"></canvas>
     <UIImg
       v-show="props.placeholderImg != null && loadedRef == null"
-      class="placeholder"
+      class="absolute w-full h-full"
       :src="props.placeholderImg ?? null"
       loading
     />
   </div>
 </template>
-
-<style scoped>
-.frames-player {
-  position: relative;
-}
-.canvas,
-.placeholder {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/common/RenameModal.vue b/spx-gui/src/components/common/RenameModal.vue
index eb080a17a..71763f234 100644
--- a/spx-gui/src/components/common/RenameModal.vue
+++ b/spx-gui/src/components/common/RenameModal.vue
@@ -71,7 +71,7 @@ function validateName(name: string) {
         <template #tip>{{ $t(target.inputTip) }}</template>
       </UIFormItem>
       <p v-if="target.warning != null" class="mt-3 flex items-start gap-2 text-yellow-500">
-        <UIIcon style="height: 22px; flex: 0 0 auto" type="warning" />
+        <UIIcon class="h-5.5 flex-none" type="warning" />
         {{ $t(target.warning) }}
       </p>
       <footer class="mt-10 flex justify-end gap-middle">
diff --git a/spx-gui/src/components/community/CommunityNavbar.vue b/spx-gui/src/components/community/CommunityNavbar.vue
index 338e53e03..7fc5f773b 100644
--- a/spx-gui/src/components/community/CommunityNavbar.vue
+++ b/spx-gui/src/components/community/CommunityNavbar.vue
@@ -5,7 +5,7 @@
         :trigger-radar="{ name: 'Project menu', desc: 'Hover to see project options (create/open project)' }"
       >
         <template #trigger>
-          <UIIcon type="plus" style="width: 24px; height: 24px" />
+          <UIIcon class="w-6 h-6" type="plus" />
         </template>
         <UIMenu>
           <NavbarNewProjectItem />
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
index 9fa6917b5..878c4283f 100644
--- a/spx-gui/src/components/community/ProjectsSection.vue
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -13,7 +13,7 @@
         :to="linkTo"
       >
         <slot name="link"></slot>
-        <UIIcon class="ml-2" style="width: 20px; height: 20px" type="arrowRightSmall" />
+        <UIIcon class="ml-2 w-5 h-5" type="arrowRightSmall" />
       </RouterUILink>
     </header>
     <div
diff --git a/spx-gui/src/components/community/user/AvatarZoomSlider.vue b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
index 567044d94..263880cc8 100644
--- a/spx-gui/src/components/community/user/AvatarZoomSlider.vue
+++ b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
@@ -39,7 +39,7 @@ function handleValueUpdate(value: number) {
       :disabled="props.disabled || props.value <= props.min"
       @click="handleValueUpdate(props.value - props.buttonStep)"
     >
-      <UIIcon style="width: 20px; height: 20px" type="minus" />
+      <UIIcon class="w-5 h-5" type="minus" />
     </button>
 
     <UISlider
@@ -61,7 +61,7 @@ function handleValueUpdate(value: number) {
       :disabled="props.disabled || props.value >= props.max"
       @click="handleValueUpdate(props.value + props.buttonStep)"
     >
-      <UIIcon style="width: 20px; height: 20px" type="plus" />
+      <UIIcon class="w-5 h-5" type="plus" />
     </button>
   </div>
 </template>
diff --git a/spx-gui/src/components/community/user/UserUsernameInline.vue b/spx-gui/src/components/community/user/UserUsernameInline.vue
index 43560de19..8c30b0124 100644
--- a/spx-gui/src/components/community/user/UserUsernameInline.vue
+++ b/spx-gui/src/components/community/user/UserUsernameInline.vue
@@ -66,7 +66,7 @@ const handleModifyUsername = useMessageHandle(
             <span class="absolute -m-px h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap [clip:rect(0,0,0,0)]">
               {{ $t({ en: 'Copy username', zh: '复制用户名' }) }}
             </span>
-            <UIIcon style="width: 14px; height: 14px" type="copyAltFilled" />
+            <UIIcon class="w-3.5 h-3.5" type="copyAltFilled" />
           </button>
         </template>
       </UITooltip>
@@ -82,7 +82,7 @@ const handleModifyUsername = useMessageHandle(
             <span class="absolute -m-px h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap [clip:rect(0,0,0,0)]">
               {{ $t({ en: 'Modify username', zh: '修改用户名' }) }}
             </span>
-            <UIIcon style="width: 14px; height: 14px" type="edit" />
+            <UIIcon class="w-3.5 h-3.5" type="edit" />
           </button>
         </template>
       </UITooltip>
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
index f865cfbb8..7e52f2c54 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
@@ -20,6 +20,6 @@ defineProps<{
     >
       <slot></slot>
     </span>
-    <UIIcon class="flex-none rotate-90 text-grey-800" style="width: 12px; height: 12px" type="arrowAlt" />
+    <UIIcon type="arrowAlt" class="h-3 w-3 flex-none rotate-90 text-grey-800" />
   </RouterLink>
 </template>
diff --git a/spx-gui/src/components/course/management/CourseEditModal.vue b/spx-gui/src/components/course/management/CourseEditModal.vue
index 59523fb9a..7bd30bbf7 100644
--- a/spx-gui/src/components/course/management/CourseEditModal.vue
+++ b/spx-gui/src/components/course/management/CourseEditModal.vue
@@ -95,7 +95,7 @@ const handleSubmit = useMessageHandle(
   >
     <UIForm :form="form" @submit="handleSubmit.fn">
       <div class="mb-6 grid grid-cols-2 gap-8">
-        <UIFormItem class="mt-0!" path="title" :label="$t({ en: 'Title', zh: '标题' })">
+        <UIFormItem class="mt-0" path="title" :label="$t({ en: 'Title', zh: '标题' })">
           <UITextInput
             v-model:value="form.value.title"
             :placeholder="
@@ -107,7 +107,7 @@ const handleSubmit = useMessageHandle(
           />
         </UIFormItem>
 
-        <UIFormItem class="mt-0!" path="entrypoint" :label="$t({ en: 'Entrypoint', zh: '起始地址' })">
+        <UIFormItem class="mt-0" path="entrypoint" :label="$t({ en: 'Entrypoint', zh: '起始地址' })">
           <UITextInput
             v-model:value="form.value.entrypoint"
             :placeholder="
@@ -121,11 +121,11 @@ const handleSubmit = useMessageHandle(
       </div>
 
       <div class="mb-6 grid grid-cols-2 gap-8">
-        <UIFormItem class="mt-0!" path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
+        <UIFormItem class="mt-0" path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
           <ThumbnailUploader v-model:thumbnail="form.value.thumbnail" class="h-50 w-full" />
         </UIFormItem>
 
-        <UIFormItem class="mt-0!" path="references" :label="$t({ en: 'Reference projects', zh: '参考项目' })">
+        <UIFormItem class="mt-0" path="references" :label="$t({ en: 'Reference projects', zh: '参考项目' })">
           <ProjectReferencesInput v-model:references="form.value.references" class="h-50 w-full" />
         </UIFormItem>
       </div>
diff --git a/spx-gui/src/components/course/management/CourseItemCornerMenu.vue b/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
index b671d19ee..34cd8c89e 100644
--- a/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
+++ b/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
@@ -19,7 +19,7 @@ const emit = defineEmits<{
         class="corner-menu flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-grey-100 text-grey-800 transition-all duration-100 hover:bg-primary-main hover:text-grey-100"
         @click.stop.prevent
       >
-        <UIIcon style="width: 21px; height: 21px" type="more" />
+        <UIIcon class="w-5.25 h-5.25" type="more" />
       </div>
     </template>
     <UIMenu>
diff --git a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
index 887645032..b4b8ec8b4 100644
--- a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
@@ -160,7 +160,7 @@ const handleSubmit = useMessageHandle(
   >
     <UIForm :form="form" @submit="handleSubmit.fn">
       <div class="mb-6 grid grid-cols-[350px_1fr] gap-6">
-        <UIFormItem class="thumbnail-wrapper mt-0!" path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
+        <UIFormItem class="thumbnail-wrapper mt-0" path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
           <ThumbnailUploader
             class="h-65"
             :thumbnail="form.value.thumbnail"
@@ -169,7 +169,7 @@ const handleSubmit = useMessageHandle(
         </UIFormItem>
 
         <div>
-          <UIFormItem class="mt-0!" path="title" :label="$t({ en: 'Title', zh: '标题' })">
+          <UIFormItem class="mt-0" path="title" :label="$t({ en: 'Title', zh: '标题' })">
             <UITextInput
               v-model:value="form.value.title"
               :placeholder="
@@ -181,7 +181,7 @@ const handleSubmit = useMessageHandle(
             />
           </UIFormItem>
 
-          <UIFormItem class="mt-0!" path="description" :label="$t({ en: 'Description', zh: '描述' })">
+          <UIFormItem class="mt-0" path="description" :label="$t({ en: 'Description', zh: '描述' })">
             <UITextInput
               v-model:value="form.value.description"
               type="textarea"
@@ -195,7 +195,7 @@ const handleSubmit = useMessageHandle(
             />
           </UIFormItem>
 
-          <UIFormItem class="mt-0!" path="order" :label="$t({ en: 'Sort order', zh: '排序优先级' })">
+          <UIFormItem class="mt-0" path="order" :label="$t({ en: 'Sort order', zh: '排序优先级' })">
             <UINumberInput
               v-model:value="form.value.order"
               :placeholder="
diff --git a/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue b/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
index 85cecb81d..56147b8c5 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
@@ -19,7 +19,7 @@ const emit = defineEmits<{
         class="corner-menu flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-grey-100 text-grey-800 transition-all duration-100 hover:bg-primary-main hover:text-grey-100"
         @click.stop.prevent
       >
-        <UIIcon style="width: 21px; height: 21px" type="more" />
+        <UIIcon class="w-5.25 h-5.25" type="more" />
       </div>
     </template>
     <UIMenu>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
index b8311e92e..4e0c4ae68 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
@@ -49,7 +49,7 @@ function handleClose() {
             class="mt-2 flex h-10 w-10 flex-none cursor-pointer items-center justify-center rounded-1 border-0 bg-transparent text-inherit hover:bg-grey-300"
             @click="handleClose"
           >
-            <UIIcon type="closeCircle" style="width: 20px; height: 20px" />
+            <UIIcon class="w-5 h-5" type="closeCircle" />
           </button>
         </template>
       </UITooltip>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
index 04932dd50..372909e76 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
@@ -69,7 +69,7 @@ onMounted(() => {
     <UIDropdown trigger="click" placement="top">
       <template #trigger>
         <UIBlockItem class="justify-center text-primary-main">
-          <UIIcon type="plus" style="width: 24px; height: 24px" />
+          <UIIcon class="w-6 h-6" type="plus" />
         </UIBlockItem>
       </template>
       <UIMenu>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
index a9643413a..646c3220c 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
@@ -15,7 +15,7 @@ defineProps<{
       'bg-red-100': severity === 'error'
     }"
   >
-    <UIIcon :type="severity" style="margin-top: 3px" />
+    <UIIcon class="mt-0.75" :type="severity" />
     <div class="flex-1">
       <slot></slot>
     </div>
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index ea0fe1a2f..e5620a58b 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -9,7 +9,7 @@
         }"
       >
         <template #trigger>
-          <UIIcon type="file" style="width: 24px; height: 24px" />
+          <UIIcon class="w-6 h-6" type="file" />
         </template>
         <UIMenu>
           <UIMenuGroup :disabled="!isOnline">
@@ -75,7 +75,7 @@
         <UITooltip :disabled="undoAction == null">
           <template #trigger>
             <button class="history-button" :disabled="undoAction == null" @click="handleUndo.fn">
-              <UIIcon type="undo" style="width: 24px; height: 24px" />
+              <UIIcon class="w-6 h-6" type="undo" />
             </button>
           </template>
           <span>{{ $t(undoText) }}</span>
@@ -83,7 +83,7 @@
         <UITooltip :disabled="redoAction == null">
           <template #trigger>
             <button class="history-button" :disabled="redoAction == null" @click="handleRedo.fn">
-              <UIIcon type="redo" style="width: 24px; height: 24px" />
+              <UIIcon class="w-6 h-6" type="redo" />
             </button>
           </template>
           <span>{{ $t(redoText) }}</span>
diff --git a/spx-gui/src/components/editor/sprite/SpriteItem.vue b/spx-gui/src/components/editor/sprite/SpriteItem.vue
index 4e6e9ddaa..8aa7ae137 100644
--- a/spx-gui/src/components/editor/sprite/SpriteItem.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteItem.vue
@@ -135,11 +135,11 @@ const duplicateAnimation = useMessageHandle(
 ).fn
 
 useDragDroppable(() => (props.droppable ? wrapperRef.value?.$el : null), {
-  // Now styles for `block-item-droppable-accept` & `block-item-droppable-over` are implemented in `UIBlockItem`.
+  // Now styles for `ui-block-item-droppable-accept` & `ui-block-item-droppable-over` are implemented in `UIBlockItem`.
   // While the ideal way to control `UIBlockItem` is passing prop `droppable`, instead of using its internal classes directly.
   // TODO: Update API `useDragDroppable` (& `useDragSortable`) to control props instead of classes.
-  acceptClass: 'block-item-droppable-accept',
-  overClass: 'block-item-droppable-over',
+  acceptClass: 'ui-block-item-droppable-accept',
+  overClass: 'ui-block-item-droppable-over',
   accept: (item) => {
     if (item instanceof Costume) return !props.sprite.costumes.includes(item)
     if (item instanceof Animation) return !props.sprite.animations.includes(item)
diff --git a/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue b/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
index 6f6c7af86..41e26ff39 100644
--- a/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
@@ -19,10 +19,9 @@
         <template #trigger>
           <UIBlockItem
             v-radar="{ name: 'Add sound button', desc: 'Click to add a new sound' }"
-            class="text-primary-main"
-            style="justify-content: center"
+            class="text-primary-main justify-center"
           >
-            <UIIcon type="plus" style="width: 24px; height: 24px" />
+            <UIIcon class="w-6 h-6" type="plus" />
           </UIBlockItem>
         </template>
         <UIMenu>
diff --git a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
index 791fe9738..65c4d29e4 100644
--- a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
+++ b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
@@ -71,7 +71,7 @@
             @click="waveformRecorderRef?.startPlayback()"
           >
             <template #icon>
-              <UIIcon type="play" style="width: 28px; height: 28px" />
+              <UIIcon class="w-7 h-7" type="play" />
             </template>
           </UIButton>
           <span>
diff --git a/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue b/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue
index b2c6a1a08..8502de39f 100644
--- a/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue
+++ b/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="volume-slider flex items-center gap-2">
-    <UIIcon type="volumeOff" class="text-grey-800" style="width: 24px; height: 24px" />
+    <UIIcon class="w-6 h-6 text-grey-800" type="volumeOff" />
     <UISlider
       color="sound"
       :min="0"
@@ -10,7 +10,7 @@
       :tooltip="false"
       @update:value="(v) => emit('update:value', v)"
     />
-    <UIIcon type="volumeUp" class="text-grey-800" style="width: 24px; height: 24px" />
+    <UIIcon class="w-6 h-6 text-grey-800" type="volumeUp" />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/spx-gui/src/components/navbar/NavbarDropdown.vue b/spx-gui/src/components/navbar/NavbarDropdown.vue
index 852129271..d05fff111 100644
--- a/spx-gui/src/components/navbar/NavbarDropdown.vue
+++ b/spx-gui/src/components/navbar/NavbarDropdown.vue
@@ -3,7 +3,7 @@
     <template #trigger>
       <div v-radar="triggerRadar" class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600">
         <slot name="trigger"></slot>
-        <UIIcon style="width: 16px; height: 16px" type="arrowDown" />
+        <UIIcon type="arrowDown" />
       </div>
     </template>
     <slot></slot>
diff --git a/spx-gui/src/components/navbar/NavbarTutorials.vue b/spx-gui/src/components/navbar/NavbarTutorials.vue
index d73126337..694caf026 100644
--- a/spx-gui/src/components/navbar/NavbarTutorials.vue
+++ b/spx-gui/src/components/navbar/NavbarTutorials.vue
@@ -6,7 +6,7 @@
         class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600"
         to="/tutorials"
       >
-        <UIIcon type="tutorial" class="text-grey-100" style="width: 24px; height: 24px" />
+        <UIIcon class="w-6 h-6 text-grey-100" type="tutorial" />
       </router-link>
     </template>
     <div class="text">{{ $t({ en: 'Tutorials', zh: '教程' }) }}</div>
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index 832d949f4..4f29ac976 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -19,7 +19,7 @@
               class="invisible absolute top-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-grey-100 text-grey-800 opacity-0 transition-all duration-100 group-hover:visible group-hover:opacity-100 hover:bg-primary-main hover:text-grey-100"
               @click.stop.prevent
             >
-              <UIIcon style="width: 21px; height: 21px" type="more" />
+              <UIIcon class="w-5.25 h-5.25" type="more" />
             </div>
           </template>
           <UIMenu>
@@ -104,7 +104,7 @@
         </div>
         <p class="mt-1 flex h-5 gap-3 text-13/5 text-grey-700">
           <span class="flex flex-none items-center gap-1" :class="{ 'text-red-main': liking }" :title="$t(likesTitle)">
-            <UIIcon style="width: 14px; height: 14px" type="heart" />
+            <UIIcon class="w-3.5 h-3.5" type="heart" />
             {{ $t(humanizeCount(project.likeCount)) }}
           </span>
           <span class="min-w-0 flex-1 truncate" :title="$t(timeTitle)">
diff --git a/spx-gui/src/components/project/runner/ProjectRunner.vue b/spx-gui/src/components/project/runner/ProjectRunner.vue
index 8d0c0c571..156db81f2 100644
--- a/spx-gui/src/components/project/runner/ProjectRunner.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunner.vue
@@ -378,7 +378,7 @@ defineExpose({
     <iframe ref="runnerIframeRef" class="h-full w-full" frameborder="0" :src="runnerUrl" />
     <UIImg
       v-show="state.type !== 'running'"
-      class="absolute! inset-0"
+      class="absolute inset-0"
       :src="thumbnailUrl"
       :loading="thumbnailUrlLoading"
     />
diff --git a/spx-gui/src/components/tutorials/TutorialStateIndicator.vue b/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
index 8a11e9a60..0f03af7f1 100644
--- a/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
+++ b/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
@@ -29,8 +29,8 @@ const { fn: handleExitTutorial } = useMessageHandle(
       <div
         class="flex h-7 w-13 cursor-pointer items-center justify-center gap-1 rounded-full bg-primary-200 hover:bg-primary-300"
       >
-        <UIIcon class="text-primary-main" style="width: 16px; height: 16px" type="tutorial" />
-        <UIIcon class="rotate-180 text-primary-main" style="width: 10px; height: 10px" type="arrowAlt" />
+        <UIIcon class="text-primary-main" type="tutorial" />
+        <UIIcon class="w-2.5 h-2.5 rotate-180 text-primary-main" type="arrowAlt" />
       </div>
     </template>
 
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index 01fc31167..ec4680eea 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -76,17 +76,23 @@ defineExpose({
 })
 </script>
 
+<style lang="scss">
+@layer components {
+  .ui-button {
+    display: flex;
+    align-items: stretch;
+    background: none;
+    border: none;
+    border-radius: var(--ui-button-radius);
+    height: var(--ui-button-height);
+    cursor: pointer;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 // base
 .ui-button {
-  display: flex;
-  align-items: stretch;
-  background: none;
-  border: none;
-  border-radius: var(--ui-button-radius);
-  height: var(--ui-button-height);
-  cursor: pointer;
-
   --ui-button-color: var(--ui-color-grey-100);
   --ui-button-bg-color: var(--ui-color-primary-main);
   --ui-button-shadow-color: var(--ui-color-primary-700);
diff --git a/spx-gui/src/components/ui/UIButtonGroup.vue b/spx-gui/src/components/ui/UIButtonGroup.vue
index 46723d412..d5c4eb994 100644
--- a/spx-gui/src/components/ui/UIButtonGroup.vue
+++ b/spx-gui/src/components/ui/UIButtonGroup.vue
@@ -43,8 +43,10 @@ provide(typeInjectionKey, () => props.type)
 provide(variantInjectionKey, () => props.variant)
 </script>
 
-<style scoped lang="scss">
-.ui-button-group-container {
-  display: flex;
+<style lang="scss">
+@layer components {
+  .ui-button-group-container {
+    display: flex;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/UIButtonGroupItem.vue b/spx-gui/src/components/ui/UIButtonGroupItem.vue
index d9e717e3c..1d19b3461 100644
--- a/spx-gui/src/components/ui/UIButtonGroupItem.vue
+++ b/spx-gui/src/components/ui/UIButtonGroupItem.vue
@@ -34,51 +34,53 @@ const handleClick = () => {
 }
 </script>
 
-<style scoped lang="scss">
-.ui-button-group-item {
-  height: var(--ui-line-height-2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+<style lang="scss">
+@layer components {
+  .ui-button-group-item {
+    height: var(--ui-line-height-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
 
-  &.variant {
-    &-primary {
-      background: var(--ui-color-grey-300);
-      color: var(--ui-color-grey-1000);
-      &.active {
-        background: var(--ui-color-primary-200);
-        color: var(--ui-color-primary-400);
+    &.variant {
+      &-primary {
+        background: var(--ui-color-grey-300);
+        color: var(--ui-color-grey-1000);
+        &.active {
+          background: var(--ui-color-primary-200);
+          color: var(--ui-color-primary-400);
+        }
       }
-    }
 
-    &-secondary {
-      background-color: #47d8e4;
-      color: var(--ui-color-grey-200);
-      &.active {
-        background-color: var(--ui-color-grey-200);
-        color: var(--ui-color-turquoise-600);
+      &-secondary {
+        background-color: #47d8e4;
+        color: var(--ui-color-grey-200);
+        &.active {
+          background-color: var(--ui-color-grey-200);
+          color: var(--ui-color-turquoise-600);
+        }
       }
     }
-  }
 
-  &.type-icon {
-    min-width: 32px;
-  }
-  &.type-text {
-    padding: 0 12px;
-  }
+    &.type-icon {
+      min-width: 32px;
+    }
+    &.type-text {
+      padding: 0 12px;
+    }
 
-  &.active {
-    cursor: default;
-  }
+    &.active {
+      cursor: default;
+    }
 
-  &:first-child {
-    border-radius: 12px 0px 0px 12px;
-  }
+    &:first-child {
+      border-radius: 12px 0 0 12px;
+    }
 
-  &:last-child {
-    border-radius: 0px 12px 12px 0px;
+    &:last-child {
+      border-radius: 0 12px 12px 0;
+    }
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/UICard.vue b/spx-gui/src/components/ui/UICard.vue
index 72974bff6..be6caf0e4 100644
--- a/spx-gui/src/components/ui/UICard.vue
+++ b/spx-gui/src/components/ui/UICard.vue
@@ -4,11 +4,13 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-.ui-card {
-  box-shadow: var(--ui-box-shadow-diffusion);
-  border-radius: var(--ui-border-radius-3);
-  background-color: var(--ui-color-grey-100);
-  overflow: hidden;
+<style lang="scss">
+@layer components {
+  .ui-card {
+    box-shadow: var(--ui-box-shadow-diffusion);
+    border-radius: var(--ui-border-radius-3);
+    background-color: var(--ui-color-grey-100);
+    overflow: hidden;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/UIChip.vue b/spx-gui/src/components/ui/UIChip.vue
index 8e4b4993e..60a83ad39 100644
--- a/spx-gui/src/components/ui/UIChip.vue
+++ b/spx-gui/src/components/ui/UIChip.vue
@@ -12,31 +12,33 @@ defineProps<{
 }>()
 </script>
 
-<style lang="scss" scoped>
-.ui-chip {
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  height: 32px; // TODO: support different sizes
-  padding: 0 16px;
-  color: var(--ui-color-grey-100);
-  background: var(--ui-color-grey-600);
-  border: 1px solid var(--ui-color-grey-600);
-  border-radius: var(--ui-border-radius-2);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: 0.3s;
-
-  &.type-primary {
+<style lang="scss">
+@layer components {
+  .ui-chip {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    height: 32px; // TODO: support different sizes
+    padding: 0 16px;
     color: var(--ui-color-grey-100);
-    background: var(--ui-color-primary-main);
-    border-color: var(--ui-color-primary-main);
-  }
+    background: var(--ui-color-grey-600);
+    border: 1px solid var(--ui-color-grey-600);
+    border-radius: var(--ui-border-radius-2);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: 0.3s;
+
+    &.type-primary {
+      color: var(--ui-color-grey-100);
+      background: var(--ui-color-primary-main);
+      border-color: var(--ui-color-primary-main);
+    }
 
-  &.type-boring {
-    color: var(--ui-color-grey-900);
-    background: var(--ui-color-grey-300);
-    border-color: var(--ui-color-grey-300);
+    &.type-boring {
+      color: var(--ui-color-grey-900);
+      background: var(--ui-color-grey-300);
+      border-color: var(--ui-color-grey-300);
+    }
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/UICode.vue b/spx-gui/src/components/ui/UICode.vue
index 7c909b293..413654e97 100644
--- a/spx-gui/src/components/ui/UICode.vue
+++ b/spx-gui/src/components/ui/UICode.vue
@@ -4,14 +4,16 @@
   </code>
 </template>
 
-<style lang="scss" scoped>
-.ui-code {
-  padding: 2px 4px;
-  font-size: 10px;
-  font-family: var(--ui-font-family-code);
-  line-height: 1.6;
-  color: var(--ui-color-primary-main);
-  background-color: var(--ui-color-primary-200);
-  border-radius: 4px;
+<style lang="scss">
+@layer components {
+  .ui-code {
+    padding: 2px 4px;
+    font-size: 10px;
+    font-family: var(--ui-font-family-code);
+    line-height: 1.6;
+    color: var(--ui-color-primary-main);
+    background-color: var(--ui-color-primary-200);
+    border-radius: 4px;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/UIDivider.vue b/spx-gui/src/components/ui/UIDivider.vue
index 788c7a018..731f00694 100644
--- a/spx-gui/src/components/ui/UIDivider.vue
+++ b/spx-gui/src/components/ui/UIDivider.vue
@@ -16,6 +16,7 @@ withDefaults(
 </script>
 
 <style lang="scss" scoped>
+// When the root element is a naive-ui component, this cannot be placed in @layer components; otherwise, its styles will be overridden by naive-ui.
 .ui-divider {
   margin: 0;
 }
diff --git a/spx-gui/src/components/ui/UIImg.vue b/spx-gui/src/components/ui/UIImg.vue
index 1dcf3bd5a..6f071b1c6 100644
--- a/spx-gui/src/components/ui/UIImg.vue
+++ b/spx-gui/src/components/ui/UIImg.vue
@@ -30,16 +30,18 @@ const imgStyle = computed(() =>
 )
 </script>
 
-<style lang="scss" scoped>
-.ui-img {
-  position: relative;
-  background-position: center;
-  background-repeat: no-repeat;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  // Disable image smoothing to keep pixelated look, so it looks good for pixel art assets
-  // See details in https://github.com/goplus/builder/issues/2214
-  image-rendering: pixelated;
+<style lang="scss">
+@layer components {
+  .ui-img {
+    position: relative;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // Disable image smoothing to keep pixelated look, so it looks good for pixel art assets
+    // See details in https://github.com/goplus/builder/issues/2214
+    image-rendering: pixelated;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/UIPagination.vue b/spx-gui/src/components/ui/UIPagination.vue
index 3387bd546..6918f7daa 100644
--- a/spx-gui/src/components/ui/UIPagination.vue
+++ b/spx-gui/src/components/ui/UIPagination.vue
@@ -116,11 +116,16 @@ const pages = computed(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.ui-pagination-container {
-  display: flex;
-  gap: 8px;
+<style lang="scss">
+@layer components {
+  .ui-pagination-container {
+    display: flex;
+    gap: 8px;
+  }
 }
+</style>
+
+<style lang="scss" scoped>
 .ui-pagination-button {
   display: flex;
   align-items: center;
diff --git a/spx-gui/src/components/ui/UITag.vue b/spx-gui/src/components/ui/UITag.vue
index c6a439f6e..261be13dd 100644
--- a/spx-gui/src/components/ui/UITag.vue
+++ b/spx-gui/src/components/ui/UITag.vue
@@ -57,34 +57,39 @@ const slots = useSlots()
   </button>
 </template>
 
-<style lang="scss" scoped>
-.ui-tag {
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  height: var(--ui-tag-height);
-  padding: var(--ui-tag-padding);
-  color: var(--ui-tag-color);
-  border-radius: var(--ui-tag-border-radius);
-  font-size: var(--ui-tag-font-size);
-  line-height: var(--ui-tag-line-height);
-  gap: var(--ui-tag-gap);
-  white-space: nowrap;
-  transition:
-    background-color 0.3s,
-    border-color 0.3s,
-    color 0.3s;
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
+<style lang="scss">
+@layer components {
+  .ui-tag {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    height: var(--ui-tag-height);
+    padding: var(--ui-tag-padding);
+    color: var(--ui-tag-color);
+    border-radius: var(--ui-tag-border-radius);
+    font-size: var(--ui-tag-font-size);
+    line-height: var(--ui-tag-line-height);
+    gap: var(--ui-tag-gap);
+    white-space: nowrap;
+    transition:
+      background-color 0.3s,
+      border-color 0.3s,
+      color 0.3s;
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
 
-  &:disabled {
-    cursor: not-allowed;
-    --ui-tag-color: var(--ui-color-grey-600);
+    &:disabled {
+      cursor: not-allowed;
+      --ui-tag-color: var(--ui-color-grey-600);
+    }
   }
-
+}
+</style>
+<style lang="scss" scoped>
+.ui-tag {
   .close-icon {
     cursor: pointer;
     width: var(--ui-tag-close-icon-size);
diff --git a/spx-gui/src/components/ui/UITooltip.vue b/spx-gui/src/components/ui/UITooltip.vue
index 0f64802d7..77d57cdc2 100644
--- a/spx-gui/src/components/ui/UITooltip.vue
+++ b/spx-gui/src/components/ui/UITooltip.vue
@@ -51,8 +51,6 @@ const emit = defineEmits<{
 const attachTo = usePopupContainer()
 </script>
 
-<style lang="scss" scoped></style>
-
 <style lang="scss">
 /*
   Now the style is broken with scoped <style>, the `data-v-xxx` is not correctly applied on `NTooltip` element
diff --git a/spx-gui/src/components/ui/block-items/UIBackdropItem.vue b/spx-gui/src/components/ui/block-items/UIBackdropItem.vue
index c4a2ce6a4..c528b1ca1 100644
--- a/spx-gui/src/components/ui/block-items/UIBackdropItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIBackdropItem.vue
@@ -29,11 +29,17 @@ withDefaults(
   }
 )
 </script>
-<style scoped lang="scss">
-.ui-backdrop-item {
-  padding: 2px;
-  gap: 2px;
+
+<style lang="scss">
+@layer components {
+  .ui-block-item.ui-backdrop-item {
+    padding: 2px;
+    gap: 2px;
+  }
 }
+</style>
+
+<style scoped lang="scss">
 .img {
   height: 98px;
   width: 132px;
diff --git a/spx-gui/src/components/ui/block-items/UIBlockItem.vue b/spx-gui/src/components/ui/block-items/UIBlockItem.vue
index ce7adafa4..f890c74b4 100644
--- a/spx-gui/src/components/ui/block-items/UIBlockItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIBlockItem.vue
@@ -1,12 +1,12 @@
 <template>
   <div
     :class="[
-      'block-item',
-      active && 'block-item-active',
-      interactive && 'block-item-interactive',
-      droppable && `block-item-droppable-${droppable}`,
-      `block-item-${variant}`,
-      `block-item-${size}`
+      'ui-block-item',
+      active && 'ui-block-item-active',
+      interactive && 'ui-block-item-interactive',
+      droppable && `ui-block-item-droppable-${droppable}`,
+      `ui-block-item-${variant}`,
+      `ui-block-item-${size}`
     ]"
     :style="style"
   >
@@ -50,96 +50,98 @@ const style = computed(() => ({
 }))
 </script>
 
-<style lang="scss" scoped>
-.block-item {
-  width: var(--block-item-size);
-  height: var(--block-item-size);
-  // it may shrink without min-width / min-height
-  min-width: var(--block-item-size);
-  min-height: var(--block-item-size);
-  &.block-item-medium {
-    --block-item-size: 88px;
-  }
-  &.block-item-large {
-    --block-item-size: 140px;
-  }
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  border-radius: var(--ui-border-radius-2);
-  border: 2px solid var(--ui-color-grey-300);
-  background-color: var(--ui-color-grey-300);
-
-  &.block-item-interactive {
-    cursor: pointer;
-  }
-
-  &.block-item-colorful {
-    border-color: var(--color-background-faint);
-    background-color: var(--color-background-faint);
-
-    // About `.drag-and-drop-disable-hover`: see `src/utils/drag-and-drop.ts`
-    &.block-item-interactive:hover:not(.drag-and-drop-disable-hover):not(.block-item-active) {
-      border-color: var(--color-background);
-      background-color: var(--color-background);
+<style lang="scss">
+@layer components {
+  .ui-block-item {
+    width: var(--block-item-size);
+    height: var(--block-item-size);
+    // it may shrink without min-width / min-height
+    min-width: var(--block-item-size);
+    min-height: var(--block-item-size);
+    &.ui-block-item-medium {
+      --block-item-size: 88px;
     }
-
-    &.block-item-active {
-      border-color: var(--color-outline);
-      background-color: var(--color-background);
+    &.ui-block-item-large {
+      --block-item-size: 140px;
     }
-
-    // TODO: droppable-related styles for colorful variant
-  }
-
-  &.block-item-standard {
-    border-color: var(--ui-color-grey-300);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    border-radius: var(--ui-border-radius-2);
+    border: 2px solid var(--ui-color-grey-300);
     background-color: var(--ui-color-grey-300);
 
-    // About `.drag-and-drop-disable-hover`: see `src/utils/drag-and-drop.ts`
-    &.block-item-interactive:hover:not(.drag-and-drop-disable-hover):not(.block-item-active) {
-      border-color: var(--ui-color-grey-400);
-      background-color: var(--ui-color-grey-400);
+    &.ui-block-item-interactive {
+      cursor: pointer;
     }
 
-    &.block-item-active {
-      border-color: var(--color-outline);
-      background-color: var(--color-background);
-    }
+    &.ui-block-item-colorful {
+      border-color: var(--color-background-faint);
+      background-color: var(--color-background-faint);
 
-    &.block-item-active.block-item-draggable {
-      cursor: grab;
-    }
+      // About `.drag-and-drop-disable-hover`: see `src/utils/drag-and-drop.ts`
+      &.ui-block-item-interactive:hover:not(.drag-and-drop-disable-hover):not(.ui-block-item-active) {
+        border-color: var(--color-background);
+        background-color: var(--color-background);
+      }
 
-    &.block-item-droppable-accept {
-      border-color: var(--ui-color-grey-400);
-      background-color: var(--ui-color-grey-400);
-    }
+      &.ui-block-item-active {
+        border-color: var(--color-outline);
+        background-color: var(--color-background);
+      }
 
-    &.block-item-droppable-over {
-      animation: droppable-shaking 0.2s ease-in-out 2;
-      border-color: var(--color-outline);
-      background-color: var(--ui-color-grey-400);
+      // TODO: droppable-related styles for colorful variant
     }
-  }
-}
 
-@keyframes droppable-shaking {
-  0% {
-    transform: scale(1.07) rotate(0deg);
-  }
-  25% {
-    transform: scale(1.07) rotate(5deg);
-  }
-  50% {
-    transform: scale(1.07) rotate(0deg);
-  }
-  75% {
-    transform: scale(1.07) rotate(-5deg);
-  }
-  100% {
-    transform: scale(1.07) rotate(0deg);
+    &.ui-block-item-standard {
+      border-color: var(--ui-color-grey-300);
+      background-color: var(--ui-color-grey-300);
+
+      // About `.drag-and-drop-disable-hover`: see `src/utils/drag-and-drop.ts`
+      &.ui-block-item-interactive:hover:not(.drag-and-drop-disable-hover):not(.ui-block-item-active) {
+        border-color: var(--ui-color-grey-400);
+        background-color: var(--ui-color-grey-400);
+      }
+
+      &.ui-block-item-active {
+        border-color: var(--color-outline);
+        background-color: var(--color-background);
+      }
+
+      &.ui-block-item-active.ui-block-item-draggable {
+        cursor: grab;
+      }
+
+      &.ui-block-item-droppable-accept {
+        border-color: var(--ui-color-grey-400);
+        background-color: var(--ui-color-grey-400);
+      }
+
+      &.ui-block-item-droppable-over {
+        animation: droppable-shaking 0.2s ease-in-out 2;
+        border-color: var(--color-outline);
+        background-color: var(--ui-color-grey-400);
+
+        @keyframes droppable-shaking {
+          0% {
+            transform: scale(1.07) rotate(0deg);
+          }
+          25% {
+            transform: scale(1.07) rotate(5deg);
+          }
+          50% {
+            transform: scale(1.07) rotate(0deg);
+          }
+          75% {
+            transform: scale(1.07) rotate(-5deg);
+          }
+          100% {
+            transform: scale(1.07) rotate(0deg);
+          }
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
index bb9849538..95beca615 100644
--- a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -15,32 +15,37 @@ defineProps<{
 
 const slots = useSlots()
 </script>
-<style scoped lang="scss">
-.ui-title-container {
-  display: flex;
-  align-items: center;
-  color: var(--ui-color-title);
-  width: 100%;
-  text-align: center;
-  gap: 8px;
-  padding: 0 6px;
 
-  &.medium {
-    font-size: 10px;
-    line-height: 16px;
-  }
+<style lang="scss">
+@layer components {
+  .ui-title-container {
+    display: flex;
+    align-items: center;
+    color: var(--ui-color-title);
+    width: 100%;
+    text-align: center;
+    gap: 8px;
+    padding: 0 6px;
 
-  &.large {
-    font-size: 13px;
-    line-height: 20px;
-    height: 32px;
-  }
+    &.medium {
+      font-size: 10px;
+      line-height: 16px;
+    }
 
-  & > span {
-    overflow: hidden;
-    flex: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    &.large {
+      font-size: 13px;
+      line-height: 20px;
+      height: 32px;
+    }
   }
 }
 </style>
+
+<style scoped lang="scss">
+.ui-title-container > span {
+  overflow: hidden;
+  flex: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/spx-gui/src/components/ui/block-items/UICornerIcon.vue b/spx-gui/src/components/ui/block-items/UICornerIcon.vue
index 75fea4b2f..ccf5ec7ac 100644
--- a/spx-gui/src/components/ui/block-items/UICornerIcon.vue
+++ b/spx-gui/src/components/ui/block-items/UICornerIcon.vue
@@ -31,33 +31,37 @@ const uiVariables = useUIVariables()
 const cssVars = computed(() => getCssVars('--ui-corner-icon-color-', uiVariables.color[props.color]))
 </script>
 
-<style scoped lang="scss">
-.ui-corner-icon {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-
-  display: flex;
-  width: 24px;
-  height: 24px;
-  justify-content: center;
-  align-items: center;
-
-  color: var(--ui-color-grey-100);
-  border-radius: 50%;
-  background: var(--ui-corner-icon-color-main);
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--ui-corner-icon-color-400);
-  }
-  &:active {
-    background-color: var(--ui-corner-icon-color-600);
-  }
+<style lang="scss">
+@layer components {
+  .ui-corner-icon {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--ui-color-grey-100);
+    border-radius: 50%;
+    background: var(--ui-corner-icon-color-main);
+    cursor: pointer;
 
-  .icon {
-    width: 16px;
-    height: 16px;
+    &:hover {
+      background-color: var(--ui-corner-icon-color-400);
+    }
+    &:active {
+      background-color: var(--ui-corner-icon-color-600);
+    }
   }
 }
 </style>
+
+<style scoped lang="scss">
+.ui-corner-icon .icon {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue b/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue
index 9fee20fb0..c8e6a0921 100644
--- a/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <UIBlockItem class="ui-editor-sprite-item" :color="color" :active="selected" :interactive="!!selectable">
+  <UIBlockItem :color="color" :active="selected" :interactive="!!selectable">
     <slot name="img" :style="imgStyle"></slot>
     <UIBlockItemTitle size="medium">
       {{ name }}
diff --git a/spx-gui/src/components/ui/block-items/UISoundItem.vue b/spx-gui/src/components/ui/block-items/UISoundItem.vue
index ae48f0c47..a0d2718df 100644
--- a/spx-gui/src/components/ui/block-items/UISoundItem.vue
+++ b/spx-gui/src/components/ui/block-items/UISoundItem.vue
@@ -30,10 +30,17 @@ const props = withDefaults(
 
 const selected = computed(() => props.selectable && props.selectable.selected)
 </script>
+
+<style lang="scss">
+@layer components {
+  .ui-block-item.ui-sound-item {
+    padding: 2px;
+  }
+}
+</style>
+
 <style scoped lang="scss">
 .ui-sound-item {
-  padding: 2px;
-
   .name {
     height: 20px;
   }
diff --git a/spx-gui/src/components/ui/block-items/UISpriteItem.vue b/spx-gui/src/components/ui/block-items/UISpriteItem.vue
index 269879e31..c58533ec8 100644
--- a/spx-gui/src/components/ui/block-items/UISpriteItem.vue
+++ b/spx-gui/src/components/ui/block-items/UISpriteItem.vue
@@ -29,8 +29,11 @@ const imgStyle = {
   width: '99px'
 }
 </script>
-<style scoped lang="scss">
-.ui-sprite-item {
-  padding: 2px;
+
+<style lang="scss">
+@layer components {
+  .ui-block-item.ui-sprite-item {
+    padding: 2px;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/checkbox/UICheckbox.vue b/spx-gui/src/components/ui/checkbox/UICheckbox.vue
index e2c5d24de..826537868 100644
--- a/spx-gui/src/components/ui/checkbox/UICheckbox.vue
+++ b/spx-gui/src/components/ui/checkbox/UICheckbox.vue
@@ -17,5 +17,3 @@ const emit = defineEmits<{
   'update:checked': [boolean]
 }>()
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/ui/checkbox/UICheckboxGroup.vue b/spx-gui/src/components/ui/checkbox/UICheckboxGroup.vue
index 34b9816c9..815de6909 100644
--- a/spx-gui/src/components/ui/checkbox/UICheckboxGroup.vue
+++ b/spx-gui/src/components/ui/checkbox/UICheckboxGroup.vue
@@ -16,5 +16,3 @@ const emit = defineEmits<{
   'update:value': [string[]]
 }>()
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/ui/collapse/UICollapse.vue b/spx-gui/src/components/ui/collapse/UICollapse.vue
index 1019fc0df..96de777fe 100644
--- a/spx-gui/src/components/ui/collapse/UICollapse.vue
+++ b/spx-gui/src/components/ui/collapse/UICollapse.vue
@@ -34,12 +34,14 @@ provide(collapseCtxKey, { expandedNames })
   </ul>
 </template>
 
-<style lang="scss" scoped>
-.ui-collapse {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  padding: 0;
-  margin: 0;
+<style lang="scss">
+@layer components {
+  .ui-collapse {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/collapse/UICollapseItem.vue b/spx-gui/src/components/ui/collapse/UICollapseItem.vue
index af63b3275..4549f7299 100644
--- a/spx-gui/src/components/ui/collapse/UICollapseItem.vue
+++ b/spx-gui/src/components/ui/collapse/UICollapseItem.vue
@@ -31,22 +31,26 @@ function handleToggle() {
   </li>
 </template>
 
-<style lang="scss" scoped>
-.ui-collapse-item {
-  display: flex;
-  flex-direction: column;
+<style lang="scss">
+@layer components {
+  .ui-collapse-item {
+    display: flex;
+    flex-direction: column;
 
-  + .ui-collapse-item {
-    &::before {
-      content: '';
-      display: block;
-      height: 1px;
-      background: var(--ui-color-grey-400);
-      margin: 16px 0;
+    + .ui-collapse-item {
+      &::before {
+        content: '';
+        display: block;
+        height: 1px;
+        background: var(--ui-color-grey-400);
+        margin: 16px 0;
+      }
     }
   }
 }
+</style>
 
+<style lang="scss" scoped>
 .header {
   display: flex;
   justify-content: space-between;
diff --git a/spx-gui/src/components/ui/empty/UIEmpty.vue b/spx-gui/src/components/ui/empty/UIEmpty.vue
index 45015e132..14083bde6 100644
--- a/spx-gui/src/components/ui/empty/UIEmpty.vue
+++ b/spx-gui/src/components/ui/empty/UIEmpty.vue
@@ -75,28 +75,40 @@ const slots = useSlots()
 // TODO: support button for size:large ?
 </script>
 
-<style scoped lang="scss">
-.ui-empty {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+<style lang="scss">
+@layer components {
+  .ui-empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ui-empty-size-large {
+    width: 100%;
+    flex-direction: column;
+    gap: 12px;
+
+    font-size: 16px;
+    line-height: 26px;
+    color: var(--ui-color-grey-1000);
+  }
 
-.ui-empty-size-large {
-  width: 100%;
-  flex-direction: column;
-  gap: 12px;
+  .ui-empty-size-extra-large {
+    flex-direction: column;
+  }
 
-  font-size: 16px;
-  line-height: 26px;
-  color: var(--ui-color-grey-1000);
+  .ui-empty-size-small,
+  .ui-empty-size-medium {
+    color: var(--ui-color-grey-600);
+    gap: 8px;
+  }
 }
+</style>
 
+<style scoped lang="scss">
 .ui-empty-size-extra-large {
-  flex-direction: column;
-
   .text {
     margin-top: 12px;
     color: var(--ui-color-grey-700);
@@ -117,10 +129,4 @@ const slots = useSlots()
     }
   }
 }
-
-.ui-empty-size-small,
-.ui-empty-size-medium {
-  color: var(--ui-color-grey-600);
-  gap: 8px;
-}
 </style>
diff --git a/spx-gui/src/components/ui/error/UIError.vue b/spx-gui/src/components/ui/error/UIError.vue
index 51ff49ea0..a2578c917 100644
--- a/spx-gui/src/components/ui/error/UIError.vue
+++ b/spx-gui/src/components/ui/error/UIError.vue
@@ -60,25 +60,29 @@ const retry = computed(() =>
 )
 </script>
 
-<style scoped lang="scss">
-.ui-error {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+<style lang="scss">
+@layer components {
+  .ui-error {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
-  &.cover {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    overflow: hidden;
-    opacity: 0.97;
-    background-color: var(--ui-color-grey-100);
+    &.cover {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      overflow: hidden;
+      opacity: 0.97;
+      background-color: var(--ui-color-grey-100);
+    }
   }
 }
+</style>
 
+<style scoped lang="scss">
 .message {
   margin-top: 12px;
   font-size: 16px;
diff --git a/spx-gui/src/components/ui/form/UIForm.vue b/spx-gui/src/components/ui/form/UIForm.vue
index 55b48a198..22fbc2bac 100644
--- a/spx-gui/src/components/ui/form/UIForm.vue
+++ b/spx-gui/src/components/ui/form/UIForm.vue
@@ -46,5 +46,3 @@ async function handleSubmit() {
   emit('submit')
 }
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/ui/form/UIFormItem.vue b/spx-gui/src/components/ui/form/UIFormItem.vue
index 2ab6c54e7..177c20789 100644
--- a/spx-gui/src/components/ui/form/UIFormItem.vue
+++ b/spx-gui/src/components/ui/form/UIFormItem.vue
@@ -71,6 +71,14 @@ const handleContentInput = debounce(() => {
 }, 300)
 </script>
 
+<style lang="scss">
+@layer components {
+  .ui-form-item + .ui-form-item {
+    margin-top: 24px;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 .ui-form-item :deep(.n-form-item-feedback-wrapper) {
   line-height: 1.57143;
@@ -79,10 +87,6 @@ const handleContentInput = debounce(() => {
   }
 }
 
-.ui-form-item + .ui-form-item {
-  margin-top: 24px;
-}
-
 .tip {
   margin-top: 4px;
   color: var(--ui-color-hint-1);
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index ff543c4d4..602420a4b 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -154,12 +154,18 @@ defineProps<{
 }>()
 </script>
 
+<style lang="scss">
+@layer components {
+  .ui-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+  }
+}
+</style>
+
 <style scoped lang="scss">
 .ui-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-
   :deep(svg) {
     width: 100%;
     height: 100%;
diff --git a/spx-gui/src/components/ui/loading/UIDetailedLoading.vue b/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
index 9227507b1..fa878c6df 100644
--- a/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
+++ b/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
@@ -53,44 +53,48 @@ watch(
   </div>
 </template>
 
-<style lang="scss" scoped>
-.ui-detailed-loading {
-  width: 100%;
-  height: 80%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  visibility: hidden;
-  opacity: 0;
-  transition:
-    visibility 0.3s,
-    opacity 0.3s;
-
-  &.cover {
-    position: absolute;
-    left: 0;
-    top: 0;
+<style lang="scss">
+@layer components {
+  .ui-detailed-loading {
     width: 100%;
-    height: 100%;
+    height: 80%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      visibility 0.3s,
+      opacity 0.3s;
 
-    &.mask-semi-transparent {
-      background-color: rgba(36, 41, 47, 0.6);
-      backdrop-filter: blur(5px);
-      -webkit-backdrop-filter: blur(5px);
+    &.cover {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
 
-      .text {
-        color: var(--ui-color-grey-100);
+      &.mask-semi-transparent {
+        background-color: rgba(36, 41, 47, 0.6);
+        backdrop-filter: blur(5px);
+        -webkit-backdrop-filter: blur(5px);
+
+        .text {
+          color: var(--ui-color-grey-100);
+        }
       }
     }
-  }
 
-  &.visible {
-    visibility: visible;
-    opacity: 1;
+    &.visible {
+      visibility: visible;
+      opacity: 1;
+    }
   }
 }
+</style>
 
+<style lang="scss" scoped>
 .animation {
   flex: 0 0 auto;
   width: 90px;
diff --git a/spx-gui/src/components/ui/loading/UILoading.vue b/spx-gui/src/components/ui/loading/UILoading.vue
index 3bbdd77f9..5d01cd24b 100644
--- a/spx-gui/src/components/ui/loading/UILoading.vue
+++ b/spx-gui/src/components/ui/loading/UILoading.vue
@@ -30,37 +30,39 @@ const mask = computed(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-// TODO: loading style not designed yet
-.ui-loading {
-  width: 100%;
-  height: 80%;
-  display: flex;
-  justify-content: center;
-  visibility: hidden;
-  opacity: 0;
-  transition:
-    visibility 0.3s,
-    opacity 0.3s;
-
-  &.cover {
-    position: absolute;
-    left: 0;
-    top: 0;
+<style lang="scss">
+@layer components {
+  // TODO: loading style not designed yet
+  .ui-loading {
     width: 100%;
-    height: 100%;
+    height: 80%;
+    display: flex;
+    justify-content: center;
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      visibility 0.3s,
+      opacity 0.3s;
 
-    &.mask-semi-transparent {
-      background-color: rgba(255, 255, 255, 0.5);
-    }
-    &.mask-solid {
-      background-color: var(--ui-color-grey-100);
+    &.cover {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+
+      &.mask-semi-transparent {
+        background-color: rgba(255, 255, 255, 0.5);
+      }
+      &.mask-solid {
+        background-color: var(--ui-color-grey-100);
+      }
     }
-  }
 
-  &.visible {
-    visibility: visible;
-    opacity: 1;
+    &.visible {
+      visibility: visible;
+      opacity: 1;
+    }
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/menu/UIMenu.vue b/spx-gui/src/components/ui/menu/UIMenu.vue
index adc6aa6d8..79920ad99 100644
--- a/spx-gui/src/components/ui/menu/UIMenu.vue
+++ b/spx-gui/src/components/ui/menu/UIMenu.vue
@@ -17,8 +17,10 @@ export const ctxKey: InjectionKey<MenuCtx> = Symbol('menu-ctx')
 provide(ctxKey, { disabled: false, inGroup: false })
 </script>
 
-<style lang="scss" scoped>
-.ui-menu {
-  padding: 8px;
+<style lang="scss">
+@layer components {
+  .ui-menu {
+    padding: 8px;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/menu/UIMenuGroup.vue b/spx-gui/src/components/ui/menu/UIMenuGroup.vue
index 0648196b3..9ec668524 100644
--- a/spx-gui/src/components/ui/menu/UIMenuGroup.vue
+++ b/spx-gui/src/components/ui/menu/UIMenuGroup.vue
@@ -27,24 +27,26 @@ provide(
 )
 </script>
 
-<style lang="scss" scoped>
-.ui-menu-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
+<style lang="scss">
+@layer components {
+  .ui-menu-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
 
-.ui-menu-group + .ui-menu-group {
-  margin-top: 13px;
-  position: relative;
-  &::before {
-    content: '';
-    position: absolute;
-    top: -7px;
-    left: 0;
-    width: 100%;
-    height: 0;
-    border-top: 1px solid var(--ui-color-dividing-line-2);
+  .ui-menu-group + .ui-menu-group {
+    margin-top: 13px;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      top: -7px;
+      left: 0;
+      width: 100%;
+      height: 0;
+      border-top: 1px solid var(--ui-color-dividing-line-2);
+    }
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/menu/UIMenuItem.vue b/spx-gui/src/components/ui/menu/UIMenuItem.vue
index 809a9e55b..0a889b756 100644
--- a/spx-gui/src/components/ui/menu/UIMenuItem.vue
+++ b/spx-gui/src/components/ui/menu/UIMenuItem.vue
@@ -47,48 +47,52 @@ function handleClick(e: MouseEvent) {
 }
 </script>
 
-<style lang="scss" scoped>
-.ui-menu-item {
-  padding: 8px 40px 8px 8px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-radius: var(--ui-border-radius-1);
-  color: var(--ui-color-grey-1000);
+<style lang="scss">
+@layer components {
+  .ui-menu-item {
+    padding: 8px 40px 8px 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border-radius: var(--ui-border-radius-1);
+    color: var(--ui-color-grey-1000);
 
-  &.disabled {
-    cursor: not-allowed;
-    color: var(--ui-color-grey-600);
-    .icon {
-      opacity: 0.5;
+    &.disabled {
+      cursor: not-allowed;
+      color: var(--ui-color-grey-600);
+      .icon {
+        opacity: 0.5;
+      }
     }
-  }
 
-  &.interactive:not(.disabled) {
-    cursor: pointer;
+    &.interactive:not(.disabled) {
+      cursor: pointer;
 
-    &:hover {
-      background-color: var(--ui-color-grey-300);
+      &:hover {
+        background-color: var(--ui-color-grey-300);
+      }
     }
-  }
 
-  &:not(.in-group) {
-    & + .ui-menu-item {
-      margin-top: 13px;
-      position: relative;
-      &:before {
-        content: '';
-        position: absolute;
-        top: -7px;
-        left: 0;
-        width: 100%;
-        height: 0;
-        border-top: 1px solid var(--ui-color-dividing-line-2);
+    &:not(.in-group) {
+      & + .ui-menu-item {
+        margin-top: 13px;
+        position: relative;
+        &:before {
+          content: '';
+          position: absolute;
+          top: -7px;
+          left: 0;
+          width: 100%;
+          height: 0;
+          border-top: 1px solid var(--ui-color-dividing-line-2);
+        }
       }
     }
   }
 }
+</style>
 
+<style lang="scss" scoped>
 .icon {
   width: 24px;
   height: 24px;
diff --git a/spx-gui/src/components/ui/modal/UIModalClose.vue b/spx-gui/src/components/ui/modal/UIModalClose.vue
index 9bbf67361..1ad73aa66 100644
--- a/spx-gui/src/components/ui/modal/UIModalClose.vue
+++ b/spx-gui/src/components/ui/modal/UIModalClose.vue
@@ -20,40 +20,42 @@ withDefaults(
 )
 </script>
 
-<style scoped lang="scss">
-.ui-modal-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  color: var(--ui-color-grey-700);
-  cursor: pointer;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: var(--ui-color-grey-400);
-  }
-  &:active {
-    background-color: var(--ui-color-grey-500);
-  }
+<style lang="scss">
+@layer components {
+  .ui-modal-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: var(--ui-color-grey-700);
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--ui-color-grey-400);
+    }
+    &:active {
+      background-color: var(--ui-color-grey-500);
+    }
 
-  &.ui-modal-close-size-medium {
-    width: 28px;
-    height: 28px;
+    &.ui-modal-close-size-medium {
+      width: 28px;
+      height: 28px;
 
-    .icon {
-      width: 20px;
-      height: 20px;
+      .icon {
+        width: 20px;
+        height: 20px;
+      }
     }
-  }
 
-  &.ui-modal-close-size-large {
-    width: 32px;
-    height: 32px;
+    &.ui-modal-close-size-large {
+      width: 32px;
+      height: 32px;
 
-    .icon {
-      width: 24px;
-      height: 24px;
+      .icon {
+        width: 24px;
+        height: 24px;
+      }
     }
   }
 }
diff --git a/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue b/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
index 4b9922d3e..2d15fe851 100644
--- a/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
+++ b/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
@@ -30,9 +30,11 @@ provide(
 provide(updateRadioValueKey, updateValue)
 </script>
 
-<style scoped lang="scss">
-.ui-tag-radio-group {
-  display: flex;
-  gap: 12px;
+<style lang="scss">
+@layer components {
+  .ui-tag-radio-group {
+    display: flex;
+    gap: 12px;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/radio/UIRadio.vue b/spx-gui/src/components/ui/radio/UIRadio.vue
index ca306808f..540c34ed8 100644
--- a/spx-gui/src/components/ui/radio/UIRadio.vue
+++ b/spx-gui/src/components/ui/radio/UIRadio.vue
@@ -17,5 +17,3 @@ const emit = defineEmits<{
   'update:checked': [boolean]
 }>()
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/ui/radio/UIRadioGroup.vue b/spx-gui/src/components/ui/radio/UIRadioGroup.vue
index fbe716bac..d3a57c221 100644
--- a/spx-gui/src/components/ui/radio/UIRadioGroup.vue
+++ b/spx-gui/src/components/ui/radio/UIRadioGroup.vue
@@ -16,5 +16,3 @@ const emit = defineEmits<{
   'update:value': [string | null]
 }>()
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/ui/radio/UITabRadio.vue b/spx-gui/src/components/ui/radio/UITabRadio.vue
index 795726713..efe5b77f0 100644
--- a/spx-gui/src/components/ui/radio/UITabRadio.vue
+++ b/spx-gui/src/components/ui/radio/UITabRadio.vue
@@ -22,25 +22,27 @@ const handleClick = () => {
 }
 </script>
 
-<style scoped lang="scss">
-.ui-tab-radio {
-  display: flex;
-  flex: 1 1 0;
-  padding: 5px 8px;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-
-  color: var(--ui-color-hint-1);
-  transition: 0.2s; // TODO: animation for background slide?
-
-  &.active {
-    border-radius: 8px;
-    color: var(--ui-color-title);
-    background: var(--ui-color-grey-100);
-    box-shadow:
-      0px 6px 10px 0px rgba(14, 18, 27, 0.06),
-      0px 2px 4px 0px rgba(14, 18, 27, 0.03);
+<style lang="scss">
+@layer components {
+  .ui-tab-radio {
+    display: flex;
+    flex: 1 1 0;
+    padding: 5px 8px;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    color: var(--ui-color-hint-1);
+    transition: 0.2s; // TODO: animation for background slide?
+
+    &.active {
+      border-radius: 8px;
+      color: var(--ui-color-title);
+      background: var(--ui-color-grey-100);
+      box-shadow:
+        0 6px 10px 0 rgba(14, 18, 27, 0.06),
+        0 2px 4px 0 rgba(14, 18, 27, 0.03);
+    }
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/radio/UITabRadioGroup.vue b/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
index a45b9edc6..bdb4f12ce 100644
--- a/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
+++ b/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
@@ -31,14 +31,16 @@ provide(
 provide(updateRadioValueKey, updateValue)
 </script>
 
-<style scoped lang="scss">
-.ui-tab-radio-group {
-  display: flex;
-  padding: 2px;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 8px;
-  background: var(--ui-color-grey-400);
+<style lang="scss">
+@layer components {
+  .ui-tab-radio-group {
+    display: flex;
+    padding: 2px;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 8px;
+    background: var(--ui-color-grey-400);
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/select/UISelect.vue b/spx-gui/src/components/ui/select/UISelect.vue
index 709fb4f5c..3449bdbf7 100644
--- a/spx-gui/src/components/ui/select/UISelect.vue
+++ b/spx-gui/src/components/ui/select/UISelect.vue
@@ -76,36 +76,40 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.ui-select {
-  height: var(--ui-line-height-2);
-  padding: 0px var(--ui-gap-middle);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 2px;
-
-  border-radius: var(--ui-border-radius-2);
-  color: var(--ui-color-grey-1000);
-  background: var(--ui-color-grey-300);
-  transition: 0.3s;
-
-  &:hover {
-    color: var(--ui-color-grey-800);
-    background: var(--ui-color-grey-400);
-  }
-  &:has(:focus) {
-    color: var(--ui-color-grey-1000);
-    background: var(--ui-color-grey-400);
-    box-shadow: inset 0 0 0 1px var(--ui-color-primary-500);
-  }
-  &:has(:active) {
+<style lang="scss">
+@layer components {
+  .ui-select {
+    height: var(--ui-line-height-2);
+    padding: 0px var(--ui-gap-middle);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2px;
+
+    border-radius: var(--ui-border-radius-2);
     color: var(--ui-color-grey-1000);
-    background: var(--ui-color-grey-500);
+    background: var(--ui-color-grey-300);
+    transition: 0.3s;
+
+    &:hover {
+      color: var(--ui-color-grey-800);
+      background: var(--ui-color-grey-400);
+    }
+    &:has(:focus) {
+      color: var(--ui-color-grey-1000);
+      background: var(--ui-color-grey-400);
+      box-shadow: inset 0 0 0 1px var(--ui-color-primary-500);
+    }
+    &:has(:active) {
+      color: var(--ui-color-grey-1000);
+      background: var(--ui-color-grey-500);
+    }
   }
 }
+</style>
 
+<style lang="scss" scoped>
 .label {
   flex: 1 1 auto;
   overflow-x: hidden;
diff --git a/spx-gui/src/components/ui/tab/UITab.vue b/spx-gui/src/components/ui/tab/UITab.vue
index a67bed689..e7d3840ff 100644
--- a/spx-gui/src/components/ui/tab/UITab.vue
+++ b/spx-gui/src/components/ui/tab/UITab.vue
@@ -28,27 +28,29 @@ function handleClick() {
 }
 </script>
 
-<style lang="scss" scoped>
-.ui-tab {
-  padding: 9px var(--ui-gap-middle);
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  color: var(--ui-color-grey-100);
-  opacity: 0.7;
-  background-color: var(--ui-tab-color-main);
-  cursor: pointer;
-  transition: opacity 0.2s;
+<style lang="scss">
+@layer components {
+  .ui-tab {
+    padding: 9px var(--ui-gap-middle);
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    color: var(--ui-color-grey-100);
+    opacity: 0.7;
+    background-color: var(--ui-tab-color-main);
+    cursor: pointer;
+    transition: opacity 0.2s;
 
-  &.active {
-    opacity: 1;
-  }
+    &.active {
+      opacity: 1;
+    }
 
-  &:first-child {
-    border-top-left-radius: var(--ui-border-radius-3);
-  }
-  &:last-child {
-    border-top-right-radius: var(--ui-border-radius-3);
+    &:first-child {
+      border-top-left-radius: var(--ui-border-radius-3);
+    }
+    &:last-child {
+      border-top-right-radius: var(--ui-border-radius-3);
+    }
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/tab/UITabs.vue b/spx-gui/src/components/ui/tab/UITabs.vue
index 361ef65b8..0252b9d1c 100644
--- a/spx-gui/src/components/ui/tab/UITabs.vue
+++ b/spx-gui/src/components/ui/tab/UITabs.vue
@@ -49,8 +49,10 @@ provide(
 )
 </script>
 
-<style lang="scss" scoped>
-.ui-tabs {
-  display: flex;
+<style lang="scss">
+@layer components {
+  .ui-tabs {
+    display: flex;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/timeline/UITimeline.vue b/spx-gui/src/components/ui/timeline/UITimeline.vue
index d59af4cc7..d3e179316 100644
--- a/spx-gui/src/components/ui/timeline/UITimeline.vue
+++ b/spx-gui/src/components/ui/timeline/UITimeline.vue
@@ -7,5 +7,3 @@ import { NTimeline } from 'naive-ui'
     <slot></slot>
   </NTimeline>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index aac175e43..02756183c 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -495,19 +495,19 @@ const remixesRet = useQuery(
             <OwnerInfo :owner="project.owner!" />
             <p class="flex items-center gap-2">
               <span class="flex items-center gap-1 text-hint-2" :title="$t(viewCount!.title)">
-                <UIIcon type="eye" style="width: 14px; height: 14px" />
+                <UIIcon class="w-3.5 h-3.5" type="eye" />
                 {{ $t(viewCount!.text) }}
               </span>
               <template v-if="isOwner">
                 <i class="h-3 w-px bg-dividing-line-1"></i>
                 <span class="flex items-center gap-1 text-hint-2" :title="$t(likeCount!.title)">
-                  <UIIcon type="heart" style="width: 14px; height: 14px" />
+                  <UIIcon class="w-3.5 h-3.5" type="heart" />
                   {{ $t(likeCount!.text) }}
                 </span>
               </template>
               <i class="h-3 w-px bg-dividing-line-1"></i>
               <span class="flex items-center gap-1 text-hint-2" :title="$t(remixCount!.title)">
-                <UIIcon type="remix" style="width: 14px; height: 14px" />
+                <UIIcon class="w-3.5 h-3.5" type="remix" />
                 {{ $t(remixCount!.text) }}
               </span>
             </p>

From 6186c062c9ffb11b0696f4d696f610a5a65eaa1e Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 7 Apr 2026 15:53:19 +0800
Subject: [PATCH 11/29] move template root comment outside

---
 spx-gui/src/components/community/project/OwnerInfo.vue          | 2 +-
 spx-gui/src/components/course/management/CourseItemMini.vue     | 2 +-
 spx-gui/src/components/course/management/CourseSeriesItem.vue   | 2 +-
 .../spx-code-editor/ui/input-helper/SpxDirActionInput.vue       | 2 +-
 .../spx-code-editor/ui/input-helper/SpxLayerActionInput.vue     | 2 +-
 .../code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue | 2 +-
 spx-gui/src/components/editor/panels/common/PanelHeader.vue     | 2 +-
 spx-gui/src/components/editor/preview/EditorPreview.vue         | 2 +-
 spx-gui/src/pages/editor/index.vue                              | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/spx-gui/src/components/community/project/OwnerInfo.vue b/spx-gui/src/components/community/project/OwnerInfo.vue
index 418e0af95..211ec91aa 100644
--- a/spx-gui/src/components/community/project/OwnerInfo.vue
+++ b/spx-gui/src/components/community/project/OwnerInfo.vue
@@ -11,8 +11,8 @@ const { data: user } = useUser(() => props.owner)
 const avatarUrl = useAvatarUrl(() => user.value?.avatar)
 </script>
 
+<!-- TODO: extract to `@/components/ui/`? -->
 <template>
-  <!-- TODO: extract to `@/components/ui/`? -->
   <UserLink
     class="group flex items-center gap-1 text-title underline transition-colors duration-100 hover:text-primary-main active:text-primary-600"
     :user="user?.username ?? null"
diff --git a/spx-gui/src/components/course/management/CourseItemMini.vue b/spx-gui/src/components/course/management/CourseItemMini.vue
index 98b8f8c88..50961730d 100644
--- a/spx-gui/src/components/course/management/CourseItemMini.vue
+++ b/spx-gui/src/components/course/management/CourseItemMini.vue
@@ -18,8 +18,8 @@ const thumbnailUrl = useAsyncComputedLegacy(async (onCleanup) => {
 })
 </script>
 
+<!-- FIXME: `bg-grey-50` is not taking effect -->
 <template>
-  <!-- FIXME: `bg-grey-50` is not taking effect -->
   <div
     class="flex items-center rounded-1 border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
     :class="{
diff --git a/spx-gui/src/components/course/management/CourseSeriesItem.vue b/spx-gui/src/components/course/management/CourseSeriesItem.vue
index 5445a129f..2a6fc6b57 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItem.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItem.vue
@@ -15,8 +15,8 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 })
 </script>
 
+<!-- FIXME: `bg-grey-50` is not taking effect (migrated from legacy code `background: var(--ui-color-grey-50)`) -->
 <template>
-  <!-- FIXME: `bg-grey-50` is not taking effect (migrated from legacy code `background: var(--ui-color-grey-50)`) -->
   <li
     class="course-series-item relative h-40 w-58 cursor-pointer overflow-hidden rounded-3 border-2 border-grey-300 bg-grey-50 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
   >
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirActionInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirActionInput.vue
index 866c4b8f0..cc8681cf4 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirActionInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirActionInput.vue
@@ -28,8 +28,8 @@ const modelValue = computed({
 })
 </script>
 
+<!-- TODO: Update UI for this component -->
 <template>
-  <!-- TODO: Update UI for this component -->
   <UISelect v-model:value="modelValue" :style="{ alignSelf: 'stretch' }">
     <UISelectOption v-for="kind in dirActions" :key="kind.name" :value="kind.name">
       {{ $t(kind.text) }}
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxLayerActionInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxLayerActionInput.vue
index e51ac37ae..e256e4d8a 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxLayerActionInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxLayerActionInput.vue
@@ -28,8 +28,8 @@ const modelValue = computed({
 })
 </script>
 
+<!-- TODO: Update UI for this component -->
 <template>
-  <!-- TODO: Update UI for this component -->
   <UISelect v-model:value="modelValue" :style="{ alignSelf: 'stretch' }">
     <UISelectOption v-for="kind in layerActions" :key="kind.name" :value="kind.name">
       {{ $t(kind.text) }}
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue
index 7ed76e3c3..3f634316e 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue
@@ -15,7 +15,7 @@ const resourceIdentifier = computed<ResourceIdentifier>(() => ({
 }))
 </script>
 
+<!-- TODO: Design specially for `ResourcePreview`, instead of using the same `ResourceItem` as `ResourceSelector` -->
 <template>
-  <!-- TODO: Design specially for `ResourcePreview`, instead of using the same `ResourceItem` as `ResourceSelector` -->
   <component :is="provider?.provideResourceItemRenderer()" :resource="resourceIdentifier" autoplay />
 </template>
diff --git a/spx-gui/src/components/editor/panels/common/PanelHeader.vue b/spx-gui/src/components/editor/panels/common/PanelHeader.vue
index efd339e4a..f5578c8b8 100644
--- a/spx-gui/src/components/editor/panels/common/PanelHeader.vue
+++ b/spx-gui/src/components/editor/panels/common/PanelHeader.vue
@@ -1,7 +1,7 @@
 <!-- Header for Sprite Panel -->
 
+<!-- TODO: use UICardHeader? -->
 <template>
-  <!-- TODO: use UICardHeader? -->
   <div
     class="flex h-11 items-center justify-between border-b border-grey-400 pr-2.5"
     :class="active ? 'border-(--panel-color-main) bg-(--panel-color-main) text-grey-100' : 'text-title'"
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index b1302bf2f..4235a5f79 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -1,5 +1,5 @@
+<!-- TODO: The root fixed height should be removed. Instead, set the StageViewer size (maintaining 4:3 aspect ratio) and let this container adapt its height accordingly. -->
 <template>
-  <!-- TODO: The fixed height here should be removed. Instead, set the StageViewer size (maintaining 4:3 aspect ratio) and let this container adapt its height accordingly. -->
   <UICard
     v-radar="{ name: 'Editor preview', desc: 'Preview panel for stage preview and project running' }"
     class="editor-preview relative flex flex-col overflow-hidden"
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index 325f3ba36..2c1fd20c6 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -1,5 +1,5 @@
+<!-- TODO: review root background color and promote it to a shared UI token if it becomes reused. -->
 <template>
-  <!-- TODO: review this background color and promote it to a shared UI token if it becomes reused. -->
   <section class="flex min-h-full w-full flex-col bg-[#e9fcff]">
     <header class="flex-[0_0_auto]">
       <EditorNavbar :project="state?.project ?? null" :state="state" />

From 91a979e4b1917a832b3f044e3c7d2338c1d564c2 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 7 Apr 2026 17:26:15 +0800
Subject: [PATCH 12/29] fix incompatible css nesting & some details

---
 .../xgo-code-editor/ui/ZoomControl.vue        |  17 +-
 .../ui/api-reference/APIReferenceUI.vue       | 107 ++---------
 .../viewer/quick-config/common/ConfigItem.vue |   4 +-
 .../components/editor/navbar/EditorNavbar.vue |  23 +--
 .../components/editor/sprite/SpriteList.vue   |   5 +-
 spx-gui/src/utils/spotlight/SpotlightUI.vue   | 179 +++++++++---------
 6 files changed, 123 insertions(+), 212 deletions(-)

diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
index c66d8a2f6..b42b8fec6 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
@@ -8,6 +8,9 @@ const emit = defineEmits<{
   out: []
   reset: []
 }>()
+
+const zoomBtnClz =
+  'flex h-10 w-10 cursor-pointer items-center justify-center rounded-2 border-0 bg-transparent p-0 text-text transition-colors hover:bg-grey-300 active:bg-grey-400'
 </script>
 
 <template>
@@ -15,32 +18,24 @@ const emit = defineEmits<{
     <!-- eslint-disable vue/no-v-html -->
     <button
       v-radar="{ name: 'Zoom in', desc: 'Zoom in the code editor' }"
-      class="zoom-btn"
+      :class="zoomBtnClz"
       title="Zoom in"
       @click="emit('in')"
       v-html="iconZoomIn"
     />
     <button
       v-radar="{ name: 'Zoom out', desc: 'Zoom out the code editor' }"
-      class="zoom-btn"
+      :class="zoomBtnClz"
       title="Zoom out"
       @click="emit('out')"
       v-html="iconZoomOut"
     />
     <button
       v-radar="{ name: 'Reset zoom', desc: 'Reset code editor zoom to default' }"
-      class="zoom-btn"
+      :class="zoomBtnClz"
       title="Reset"
       @click="emit('reset')"
       v-html="iconZoomReset"
     />
   </div>
 </template>
-
-<style scoped>
-@reference "../../../../../app.css";
-
-.zoom-btn {
-  @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-2 border-0 bg-transparent p-0 text-text transition-colors hover:bg-grey-300 active:bg-grey-400;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
index 41845662e..081f6fe08 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
@@ -1,7 +1,4 @@
 <script lang="ts">
-import { type LocaleMessage } from '@/utils/i18n'
-import type { APIReferenceItem } from '.'
-
 type SubCategory = {
   id: string
   label: LocaleMessage
@@ -24,12 +21,13 @@ function belongs(item: APIReferenceItem, mcid: string, scid: string) {
 <script setup lang="ts">
 import { throttle } from 'lodash'
 import { computed, ref, shallowRef, watch, watchEffect } from 'vue'
+import { type LocaleMessage } from '@/utils/i18n'
 import { ActionException, Cancelled } from '@/utils/exception'
 import { getCleanupSignal } from '@/utils/disposable'
 import { untilTaskScheduled } from '@/utils/utils'
 import { UIError } from '@/components/ui'
 import { stringifyDefinitionId, type DefinitionDocumentationItem } from '../../common'
-import type { APIReferenceController } from '.'
+import type { APIReferenceController, APIReferenceItem } from '.'
 import APIReferenceItemComp from './APIReferenceItem.vue'
 import { useRegisterUpdateRouteLoaded } from '@/utils/route-loading'
 
@@ -153,31 +151,35 @@ function handleCategoryClick(id: string) {
       name: 'API References',
       desc: 'All available API reference items at left side of the code editor. Drag-n-drop or click one item to insert corresponding code snippet.'
     }"
-    class="api-reference-ui"
+    class="flex min-h-0"
   >
     <UIError v-if="err != null">
       {{ $t(err.userMessage) }}
     </UIError>
     <template v-else>
-      <ul class="categories-wrapper">
+      <ul class="flex flex-none flex-col gap-3 border-r border-dividing-line-2 px-1 py-3">
         <li
           v-for="c in categoriesComputed"
           :key="c.id"
-          class="category"
-          :data-active="c.id === activeCategoryIdRef || null"
+          class="flex h-13 w-13 cursor-pointer flex-col items-center justify-center rounded-1 transition-[color,background-color] duration-100"
+          :class="c.id === activeCategoryIdRef ? 'bg-(--category-color) text-grey-100' : 'text-(--category-color)'"
           :style="{ '--category-color': c.color }"
           @click="handleCategoryClick(c.id)"
         >
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <div class="icon" v-html="c.icon"></div>
-          <p class="label">{{ $t(c.label) }}</p>
+          <div class="h-6 w-6" v-html="c.icon"></div>
+          <p class="mt-0.5 text-center text-10/[1.6]">{{ $t(c.label) }}</p>
         </li>
       </ul>
-      <ul ref="itemsWrapperRef" class="items-wrapper">
+      <ul ref="itemsWrapperRef" class="min-w-0 flex-[1_1_0] overflow-y-auto px-4 pb-3 [scrollbar-width:thin]">
         <li v-for="c in categoriesForItems" :key="c.id" :data-category-id="c.id" class="category-wrapper">
-          <section v-for="sc in c.subCategories" :key="sc.id" class="subcategory-wrapper">
-            <h5 class="title">{{ $t(sc.label) }}</h5>
-            <ul class="items">
+          <section
+            v-for="sc in c.subCategories"
+            :key="sc.id"
+            class="subcategory-wrapper border-b border-dashed border-grey-500"
+          >
+            <h5 class="sticky top-0 z-10 bg-grey-100 py-3 text-12/1.5 text-hint-2">{{ $t(sc.label) }}</h5>
+            <ul class="flex flex-col gap-middle pb-5">
               <APIReferenceItemComp
                 v-for="item in sc.items"
                 :key="stringifyDefinitionId(item.definition)"
@@ -193,82 +195,7 @@ function handleCategoryClick(id: string) {
 </template>
 
 <style scoped>
-.api-reference-ui {
-  display: flex;
-  justify-content: stretch;
-  min-height: 0;
-}
-
-.categories-wrapper {
-  flex: 0 0 auto;
-  padding: 12px 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  border-right: 1px solid var(--ui-color-dividing-line-2);
-}
-
-.category {
-  width: 52px;
-  height: 52px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--ui-border-radius-1);
-  color: var(--category-color);
-  cursor: pointer;
-  transition: 0.1s;
-}
-
-.category[data-active='true'] {
-  color: var(--ui-color-grey-100);
-  background-color: var(--category-color);
-}
-
-.category .icon {
-  width: 24px;
-  height: 24px;
-}
-
-.category .label {
-  margin-top: 2px;
-  text-align: center;
-  font-size: 10px;
-  line-height: 1.6;
-}
-
-.items-wrapper {
-  flex: 1 1 0;
-  padding: 0 16px 12px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-}
-
-.items-wrapper .subcategory-wrapper {
-  border-bottom: 1px dashed var(--ui-color-grey-500);
-}
-
-.items-wrapper .category-wrapper:last-child .subcategory-wrapper:last-child {
-  padding-bottom: 0;
+.category-wrapper:last-child .subcategory-wrapper:last-child {
   border-bottom: none;
 }
-
-.items-wrapper .title {
-  position: sticky;
-  z-index: 10;
-  top: 0;
-  padding: 12px 0;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--ui-color-hint-2);
-  background-color: var(--ui-color-grey-100);
-}
-
-.items-wrapper .items {
-  padding-bottom: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-gap-middle);
-}
 </style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
index 7fa9487da..994987f3e 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
@@ -9,11 +9,11 @@ const slots = useSlots()
 
 <template>
   <div
-    class="group flex h-8 w-8 cursor-pointer items-center justify-center rounded-[10px] text-center hover:bg-turquoise-200 [&.active]:bg-turquoise-200"
+    class="group flex h-8 w-8 cursor-pointer items-center justify-center rounded-[10px] text-center hover:bg-turquoise-200"
   >
     <UIIcon
       v-if="slots.default == null && icon != null"
-      class="text-grey-1000 group-hover:text-turquoise-500 group-[.active]:text-turquoise-500"
+      class="text-grey-1000 group-hover:text-turquoise-500"
       :type="icon"
     />
     <slot v-else></slot>
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index e5620a58b..da602589a 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -74,7 +74,7 @@
       <div class="flex">
         <UITooltip :disabled="undoAction == null">
           <template #trigger>
-            <button class="history-button" :disabled="undoAction == null" @click="handleUndo.fn">
+            <button :class="historyBtnClz" :disabled="undoAction == null" @click="handleUndo.fn">
               <UIIcon class="w-6 h-6" type="undo" />
             </button>
           </template>
@@ -82,7 +82,7 @@
         </UITooltip>
         <UITooltip :disabled="redoAction == null">
           <template #trigger>
-            <button class="history-button" :disabled="redoAction == null" @click="handleRedo.fn">
+            <button :class="historyBtnClz" :disabled="redoAction == null" @click="handleRedo.fn">
               <UIIcon class="w-6 h-6" type="redo" />
             </button>
           </template>
@@ -430,20 +430,7 @@ const autoSaveStateIcon = computed<AutoSaveStateIcon | null>(() => {
       throw new Error(`Unknown editing mode: ${editing.mode}`)
   }
 })
-</script>
-
-<style scoped>
-@reference "../../../app.css";
-
-.history-button {
-  @apply flex h-full items-center justify-center border-none bg-transparent px-5 text-white outline-none;
-}
 
-.history-button:disabled {
-  @apply cursor-not-allowed text-[#9de6ec];
-}
-
-.history-button:enabled:hover {
-  @apply cursor-pointer bg-primary-600;
-}
-</style>
+const historyBtnClz =
+  'flex h-full items-center justify-center border-none bg-transparent px-5 text-white outline-none disabled:cursor-not-allowed disabled:text-[#9de6ec] enabled:hover:cursor-pointer enabled:hover:bg-primary-600'
+</script>
diff --git a/spx-gui/src/components/editor/sprite/SpriteList.vue b/spx-gui/src/components/editor/sprite/SpriteList.vue
index aa10fcd0b..439ff7869 100644
--- a/spx-gui/src/components/editor/sprite/SpriteList.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteList.vue
@@ -135,13 +135,12 @@ const handleSpriteGenClick = useMessageHandle(
   scrollbar-width: thin;
 }
 
+/* Shadow-like effect */
+/* TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem` */
 :deep(.sortable-ghost-item) {
-  /* Shadow-like effect */
-  /* TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem` */
   border-color: var(--ui-color-grey-400) !important;
   background-color: var(--ui-color-grey-400) !important;
 }
-
 :deep(.sortable-ghost-item *) {
   visibility: hidden;
 }
diff --git a/spx-gui/src/utils/spotlight/SpotlightUI.vue b/spx-gui/src/utils/spotlight/SpotlightUI.vue
index 0e8cf5120..ba1b8ea6d 100644
--- a/spx-gui/src/utils/spotlight/SpotlightUI.vue
+++ b/spx-gui/src/utils/spotlight/SpotlightUI.vue
@@ -309,98 +309,101 @@ watch(
   inset: 0;
   pointer-events: none;
   z-index: var(--spotlight-z-index);
+}
 
-  & .spotlight-item {
-    position: absolute;
+.spotlight-ui .spotlight-item {
+  position: absolute;
+}
 
-    &.animated {
-      transition: var(--spotlight-transform-transition);
-    }
+.spotlight-ui .spotlight-item.animated {
+  transition: var(--spotlight-transform-transition);
+}
 
-    &.bottom-right {
-      & .anchor {
-        transform: rotate(0deg);
-      }
-      & .tips {
-        transform: translate(
-          calc(var(--spotlight-anchor-size) - var(--spotlight-anchor-offset-x)),
-          calc(-1 * var(--spotlight-anchor-offset-y))
-        );
-        border-top-left-radius: 2px;
-        & .content {
-          border-top-left-radius: 2px;
-        }
-      }
-    }
-    &.bottom-left {
-      & .anchor {
-        transform: rotate(90deg);
-      }
-      & .tips {
-        transform: translate(
-          calc(-100% - var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-x)),
-          calc(-1 * var(--spotlight-anchor-offset-y))
-        );
-        border-top-right-radius: 2px;
-        & .content {
-          border-top-right-radius: 2px;
-        }
-      }
-    }
-    &.top-right {
-      & .anchor {
-        transform: rotate(270deg);
-      }
-      & .tips {
-        transform: translate(
-          calc(var(--spotlight-anchor-size) - var(--spotlight-anchor-offset-x) / 2),
-          calc(-100% - 2 * var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-y) / 2)
-        );
-        border-bottom-left-radius: 2px;
-        & .content {
-          border-bottom-left-radius: 2px;
-        }
-      }
-    }
-    &.top-left {
-      & .anchor {
-        transform: rotate(180deg);
-      }
-      & .tips {
-        transform: translate(
-          calc(-100% - var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-x) / 2),
-          calc(-100% - 2 * var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-y) / 2)
-        );
-        border-bottom-right-radius: 2px;
-        & .content {
-          border-bottom-right-radius: 2px;
-        }
-      }
-    }
+.spotlight-ui .spotlight-item.bottom-right .anchor {
+  transform: rotate(0deg);
+}
 
-    & .anchor {
-      width: var(--spotlight-anchor-size);
-      height: var(--spotlight-anchor-size);
-      transform-origin: left top;
-    }
+.spotlight-ui .spotlight-item.bottom-right .tips {
+  transform: translate(
+    calc(var(--spotlight-anchor-size) - var(--spotlight-anchor-offset-x)),
+    calc(-1 * var(--spotlight-anchor-offset-y))
+  );
+  border-top-left-radius: 2px;
+}
 
-    & .tips {
-      border-radius: 14px;
-      padding: 2px;
-      font-size: 12px;
-      font-weight: 600;
-      background: var(--ui-color-grey-100);
-      word-wrap: break-word;
-      max-width: 300px;
-      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.17);
-
-      & .content {
-        border-radius: 12px;
-        padding: 5px 8px;
-        background: #7e66fc;
-        color: var(--ui-color-grey-100);
-      }
-    }
-  }
+.spotlight-ui .spotlight-item.bottom-right .tips .content {
+  border-top-left-radius: 2px;
+}
+
+.spotlight-ui .spotlight-item.bottom-left .anchor {
+  transform: rotate(90deg);
+}
+
+.spotlight-ui .spotlight-item.bottom-left .tips {
+  transform: translate(
+    calc(-100% - var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-x)),
+    calc(-1 * var(--spotlight-anchor-offset-y))
+  );
+  border-top-right-radius: 2px;
+}
+
+.spotlight-ui .spotlight-item.bottom-left .tips .content {
+  border-top-right-radius: 2px;
+}
+
+.spotlight-ui .spotlight-item.top-right .anchor {
+  transform: rotate(270deg);
+}
+
+.spotlight-ui .spotlight-item.top-right .tips {
+  transform: translate(
+    calc(var(--spotlight-anchor-size) - var(--spotlight-anchor-offset-x) / 2),
+    calc(-100% - 2 * var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-y) / 2)
+  );
+  border-bottom-left-radius: 2px;
+}
+
+.spotlight-ui .spotlight-item.top-right .tips .content {
+  border-bottom-left-radius: 2px;
+}
+
+.spotlight-ui .spotlight-item.top-left .anchor {
+  transform: rotate(180deg);
+}
+
+.spotlight-ui .spotlight-item.top-left .tips {
+  transform: translate(
+    calc(-100% - var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-x) / 2),
+    calc(-100% - 2 * var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-y) / 2)
+  );
+  border-bottom-right-radius: 2px;
+}
+
+.spotlight-ui .spotlight-item.top-left .tips .content {
+  border-bottom-right-radius: 2px;
+}
+
+.spotlight-ui .spotlight-item .anchor {
+  width: var(--spotlight-anchor-size);
+  height: var(--spotlight-anchor-size);
+  transform-origin: left top;
+}
+
+.spotlight-ui .spotlight-item .tips {
+  border-radius: 14px;
+  padding: 2px;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--ui-color-grey-100);
+  word-wrap: break-word;
+  max-width: 300px;
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.17);
+}
+
+.spotlight-ui .spotlight-item .tips .content {
+  border-radius: 12px;
+  padding: 5px 8px;
+  background: #7e66fc;
+  color: var(--ui-color-grey-100);
 }
 </style>

From 2dcea764a411629ef9b94e2661335150df81e83a Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 7 Apr 2026 18:15:41 +0800
Subject: [PATCH 13/29] update doc

---
 spx-gui/AGENTS.md                                   | 13 +++++++++----
 .../asset/gen/sprite/SpriteGenPhaseContent.vue      |  4 ++--
 .../asset/gen/sprite/SpriteGenPhaseSettings.vue     |  2 +-
 .../src/components/community/CommunityHeader.vue    |  2 +-
 .../components/community/footer/CommunityFooter.vue |  2 +-
 spx-gui/src/components/editor/common/EditorList.vue |  4 ++--
 .../src/components/editor/panels/EditorPanels.vue   |  2 +-
 .../components/editor/panels/stage/StagePanel.vue   |  2 +-
 .../components/editor/stage/sound/SoundDetail.vue   |  4 ++--
 spx-gui/src/pages/community/project.vue             |  2 +-
 spx-gui/src/pages/community/user/index.vue          |  2 +-
 spx-gui/src/pages/editor/index.vue                  |  2 +-
 12 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index d87421191..8eb36bf30 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -87,6 +87,7 @@ When working with backend unique string identifiers such as `username`, project
 * Outside `src/components/ui/`, use Tailwind as the default for local layout and surface styling.
 * Keep styles local to the page/feature/component. Do not move local styles into `src/app.css`.
 * Prefer readable template utilities and remove redundant local style blocks after migration.
+* Prefer direct template utilities over local `@apply` blocks when the styles are only used by one or two template nodes.
 * If local authored styles are still needed, prefer plain CSS over SCSS.
 
 ### Boundaries and Source of Truth
@@ -107,6 +108,7 @@ When working with backend unique string identifiers such as `username`, project
 ### When Local CSS/SCSS Is Better
 
 * Keep local CSS/SCSS for `:deep(...)`, generated content, third-party DOM overrides, and complex stateful widgets.
+* Keep a small local CSS rule for structural selectors that are awkward in template logic (for example nested `:last-child` rules) instead of encoding them with hard-to-read dynamic class expressions.
 * Prefer plain local CSS over complex Tailwind descendant/arbitrary selectors for cross-component or slot-content styling.
 * Preserve semantic hook classes used by parent selectors or slots (for example `.corner-menu`, `.course-item-mini`).
 * For newly added components, avoid introducing `:deep(...)` selectors and cross-file hook classes when possible, since they increase maintenance cost.
@@ -114,11 +116,14 @@ When working with backend unique string identifiers such as `username`, project
 
 ### Practical Migration Notes
 
-* Preserve exact `flex: <grow> <shrink> <basis>` semantics with `flex-[<grow>_<shrink>_<basis>]`.
-* Prefer `:style` for one-off values when clearer than Tailwind arbitrary utilities.
+* Avoid non-equivalent Tailwind simplifications for flex values. In particular, `flex: 1 1 0` is not equivalent to Tailwind `flex-1` (`flex: 1 1 0%`), so do not simplify between them unless the layout behavior has been verified. Likewise, do not simplify `flex: 0 0 auto` to `shrink-0`; use the equivalent `flex-none` when that shorthand is desired.
+* Prefer `style` / `:style` for one-off values when clearer than Tailwind arbitrary utilities. For example, prefer `style="box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1)"` over a long arbitrary utility such as `shadow-[0_24px_32px_-16px_rgba(0,0,0,0.1)]`.
 * For important/non-obvious background assets, prefer TS imports and inline `backgroundImage` binding.
-* For `UIImg`, `UIIcon`, and similar wrappers, verify root-style conflicts; use an outer layout wrapper if needed.
-* In plain `<style scoped>`, flatten `:deep(...)` selectors (for example `.preview :deep(svg)`).
+* For `UIImg`, `UIIcon`, and similar wrappers, verify whether the intended classes/styles should apply to the wrapper root or to an outer layout container. If the wrapper's default root styles would interfere with layout or sizing, prefer an outer wrapper.
+* When extending a base UI component class from another component in the same `@layer components`, prefer a combined selector such as `.ui-block-item.ui-backdrop-item` instead of relying on output order between separate selectors.
+* Keep fixed utility classes in `class`; reserve `:class` for stateful/dynamic parts only.
+* In plain `<style scoped>`, flatten `:deep(...)` selectors (for example `.preview :deep(svg)`) so the final selector structure and specificity stay obvious.
+* Do not use native CSS nesting in plain `<style>` / `<style scoped>` blocks; use flat selectors to avoid browser compatibility issues.
 * Keep single-use values local; only add setup variables when reused/computed or clearly improving readability.
 * Preserve meaningful existing comments/TODOs. For exact local non-token values, keep them local and add a nearby `TODO` for later tokenization review.
 
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
index 4cdd0bd8a..d1d0408d7 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
@@ -194,7 +194,7 @@ const handleSubmit = useMessageHandle(
     class="flex h-full flex-col items-stretch"
   >
     <div class="flex-[1_1_0] flex flex-row items-stretch">
-      <aside class="w-102 flex-[0_0_auto] bg-grey-100 pt-4 border-r border-grey-400 flex flex-col justify-between">
+      <aside class="w-102 flex-none bg-grey-100 pt-4 border-r border-grey-400 flex flex-col justify-between">
         <div class="flex-[1_1_0] overflow-y-auto px-4 flex flex-col gap-6">
           <ListItemWrapper v-radar="{ name: 'Costume list', desc: 'List of costumes' }" @add="handleAddCostume">
             <template #title>{{ $t({ zh: '造型', en: 'Costume' }) }}</template>
@@ -235,7 +235,7 @@ const handleSubmit = useMessageHandle(
         <AnimationGenPreview v-else-if="selectedAnimation != null" :gen="selectedAnimation" />
       </div>
     </div>
-    <footer class="w-full flex-[0_0_auto] px-6 py-5 flex justify-end gap-4">
+    <footer class="w-full flex-none px-6 py-5 flex justify-end gap-4">
       <UITooltip>
         {{
           $t({
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
index c4a9e4117..6f9f7f320 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
@@ -141,7 +141,7 @@ const handleUseAsset = useMessageHandle(
         <ImagePreview :file="gen.image" />
       </template>
     </LayoutWithPreview>
-    <footer class="w-full flex-[0_0_auto] px-6 py-5 flex justify-end gap-4">
+    <footer class="w-full flex-none px-6 py-5 flex justify-end gap-4">
       <UIButton
         v-if="selectedAsset != null"
         v-radar="{
diff --git a/spx-gui/src/components/community/CommunityHeader.vue b/spx-gui/src/components/community/CommunityHeader.vue
index a760bbeb8..e54b65344 100644
--- a/spx-gui/src/components/community/CommunityHeader.vue
+++ b/spx-gui/src/components/community/CommunityHeader.vue
@@ -6,7 +6,7 @@
       <h1 class="min-w-0 flex-[1_1_0] truncate text-16/6.5 text-title">
         <slot></slot>
       </h1>
-      <label class="flex-[0_0_auto]">
+      <label class="flex-none">
         <slot name="options"></slot>
       </label>
     </CenteredWrapper>
diff --git a/spx-gui/src/components/community/footer/CommunityFooter.vue b/spx-gui/src/components/community/footer/CommunityFooter.vue
index e44d65dc2..bc88485e0 100644
--- a/spx-gui/src/components/community/footer/CommunityFooter.vue
+++ b/spx-gui/src/components/community/footer/CommunityFooter.vue
@@ -6,7 +6,7 @@ import { UILink } from '@/components/ui'
 <template>
   <footer
     v-if="showLicense"
-    class="flex h-12.5 w-full flex-[0_0_auto] items-center justify-center gap-6 text-12 text-grey-700"
+    class="flex h-12.5 w-full flex-none items-center justify-center gap-6 text-12 text-grey-700"
   >
     <span class="flex items-center justify-center">{{ $t({ en: '© 2025 Qiniu Cloud.', zh: '© 2025 七牛云' }) }}</span>
     <UILink
diff --git a/spx-gui/src/components/editor/common/EditorList.vue b/spx-gui/src/components/editor/common/EditorList.vue
index b0d3d408c..aa1bf5f9f 100644
--- a/spx-gui/src/components/editor/common/EditorList.vue
+++ b/spx-gui/src/components/editor/common/EditorList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex-[1_1_0] flex" :style="cssVars">
-    <div class="flex-[0_0_auto] flex flex-col border-r border-dividing-line-2">
+    <div class="flex-none flex flex-col border-r border-dividing-line-2">
       <div
         ref="itemsWrapper"
         v-radar="listRadarInfo"
@@ -18,7 +18,7 @@
         <template #trigger>
           <button
             v-radar="addButtonRadarInfo"
-            class="relative z-1 h-11 flex-[0_0_auto] cursor-pointer flex items-center justify-center rounded-bl-3 border-none bg-(--editor-list-color-main) text-grey-100 hover:bg-(--editor-list-color-400) active:bg-(--editor-list-color-600)"
+            class="relative z-1 h-11 flex-none cursor-pointer flex items-center justify-center rounded-bl-3 border-none bg-(--editor-list-color-main) text-grey-100 hover:bg-(--editor-list-color-400) active:bg-(--editor-list-color-600)"
           >
             <UIIcon type="plus" />
           </button>
diff --git a/spx-gui/src/components/editor/panels/EditorPanels.vue b/spx-gui/src/components/editor/panels/EditorPanels.vue
index 6ca57aec1..84fb2ad57 100644
--- a/spx-gui/src/components/editor/panels/EditorPanels.vue
+++ b/spx-gui/src/components/editor/panels/EditorPanels.vue
@@ -11,7 +11,7 @@
         name: 'Stage panel',
         desc: 'Panel for stage of the project, with quick entries to widgets, sounds and backdrops tabs'
       }"
-      class="flex-[0_0_auto]"
+      class="flex-none"
     >
       <StagePanel />
     </UICard>
diff --git a/spx-gui/src/components/editor/panels/stage/StagePanel.vue b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
index 368014189..52318cfe2 100644
--- a/spx-gui/src/components/editor/panels/stage/StagePanel.vue
+++ b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
@@ -8,7 +8,7 @@
       {{ $t({ en: 'Stage', zh: '舞台' }) }}
     </h4>
     <main class="flex flex-[1_1_0] flex-col items-center">
-      <div class="flex-[0_0_auto] p-3">
+      <div class="flex-none p-3">
         <div
           v-radar="{ name: 'Stage overview', desc: 'Overview of the stage, click to view stage details' }"
           class="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-1 bg-grey-300"
diff --git a/spx-gui/src/components/editor/stage/sound/SoundDetail.vue b/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
index ebc91d184..9aef47423 100644
--- a/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
+++ b/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
@@ -27,7 +27,7 @@
     />
     <div class="flex">
       <PlayControl
-        class="flex-[0_0_auto]"
+        class="flex-none"
         color="sound"
         :playing="playing != null"
         :progress="playing?.progress ?? 0"
@@ -37,7 +37,7 @@
       />
       <VolumeSlider class="mx-6 flex-[0_1_438px]" :value="gain" @update:value="handleGainUpdate" />
       <div class="flex-[1_1_0]" />
-      <div v-if="editing" class="flex flex-[0_0_auto] items-center gap-2">
+      <div v-if="editing" class="flex flex-none items-center gap-2">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel sound editing' }"
           color="boring"
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index 02756183c..c25161d52 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -363,7 +363,7 @@ const remixesRet = useQuery(
   <CenteredWrapper size="large">
     <CommunityCard
       v-radar="{ name: 'Project content', desc: 'Main content area for project details and runner' }"
-      class="relative mt-6 flex flex-[0_0_auto] gap-10 bg-grey-100 p-5"
+      class="relative mt-6 flex flex-none gap-10 bg-grey-100 p-5"
     >
       <UILoading v-if="isLoading" cover mask="solid" />
       <UIError v-else-if="error != null" class="error" :retry="reloadProject">
diff --git a/spx-gui/src/pages/community/user/index.vue b/spx-gui/src/pages/community/user/index.vue
index 78b9213f0..42106acff 100644
--- a/spx-gui/src/pages/community/user/index.vue
+++ b/spx-gui/src/pages/community/user/index.vue
@@ -36,7 +36,7 @@ watch(user, (currentUser) => {
     <template v-else-if="user != null">
       <UserHeader :user="user" />
       <div class="flex items-start gap-5">
-        <UserSidebar class="flex-[0_0_auto]" :username="user.username" />
+        <UserSidebar class="flex-none" :username="user.username" />
         <div class="min-w-0 flex-[1_1_0]">
           <router-view />
         </div>
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index 2c1fd20c6..ef1864668 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -1,7 +1,7 @@
 <!-- TODO: review root background color and promote it to a shared UI token if it becomes reused. -->
 <template>
   <section class="flex min-h-full w-full flex-col bg-[#e9fcff]">
-    <header class="flex-[0_0_auto]">
+    <header class="flex-none">
       <EditorNavbar :project="state?.project ?? null" :state="state" />
     </header>
     <main class="flex-[1_1_0] flex gap-middle p-middle">

From 4de24d9b0f8d4b6e0b049fbd71e3b9107446555c Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 7 Apr 2026 20:36:15 +0800
Subject: [PATCH 14/29] refine tailwind flex utility usage and styling
 guidelines

---
 .../app/device-check/MobileReminder.vue       |  2 +-
 .../UpdateNotificationWrapper.vue             |  6 ++--
 .../asset/animation/GroupCostumesModal.vue    |  4 +--
 .../asset/gen/backdrop/BackdropGen.vue        |  4 +--
 .../asset/gen/backdrop/BackdropGenModal.vue   |  2 +-
 .../asset/gen/common/AssetSuggestions.vue     |  2 +-
 .../asset/gen/common/GenPreview.vue           |  6 ++--
 .../asset/gen/common/ImageSelector.vue        |  2 +-
 .../asset/gen/common/LayoutWithPreview.vue    |  4 +--
 .../asset/gen/common/ListItemWrapper.vue      |  4 +--
 .../gen/common/PreviewWithCheckerboardBg.vue  |  4 +--
 .../common/param-settings/ParamSelector.vue   |  4 +--
 .../asset/gen/sprite/SpriteGenModal.vue       |  2 +-
 .../gen/sprite/SpriteGenPhaseContent.vue      |  2 +-
 .../gen/sprite/SpriteGenPhaseSettings.vue     |  2 +-
 .../asset/library/AssetLibraryModal.vue       |  6 ++--
 .../asset/library/AssetSaveModal.vue          |  2 +-
 .../library/management/AssetEditModal.vue     |  2 +-
 .../AssetLibraryManagementModal.vue           |  4 +--
 .../library/management/VisibilityIcon.vue     |  2 +-
 .../asset/preprocessing/PreprocessModal.vue   |  4 +--
 .../asset/preprocessing/common/ImgPreview.vue |  2 +-
 .../preprocessing/common/ProcessDetail.vue    |  6 ++--
 .../preprocessing/common/ProcessItem.vue      |  4 +--
 .../common/ModificationWarningModal.vue       |  2 +-
 .../components/community/CommunityHeader.vue  |  4 +--
 .../components/community/CommunityNavbar.vue  |  2 +-
 .../community/footer/CommunityFooter.vue      |  2 +-
 .../community/user/AvatarZoomSlider.vue       |  6 ++--
 .../community/user/content/UserContent.vue    |  2 +-
 .../community/user/sidebar/UserSidebar.vue    |  2 +-
 .../user/sidebar/UserSidebarItem.vue          |  4 +--
 .../src/components/copilot/CopilotInput.vue   |  6 ++--
 .../custom-elements/common/BlockActionBtn.vue |  2 +-
 .../copilot/feedback/RetryableWrapper.vue     |  2 +-
 .../management/CourseItemCornerMenu.vue       |  2 +-
 .../management/CourseManagementModal.vue      |  2 +-
 .../course/management/CourseSelector.vue      |  2 +-
 .../management/CourseSeriesEditModal.vue      | 28 ++++++++++---------
 .../course/management/CourseSeriesItem.vue    |  2 +-
 .../management/CourseSeriesItemCornerMenu.vue |  2 +-
 .../CourseSeriesManagementModal.vue           |  2 +-
 .../management/ProjectReferencesInput.vue     |  4 +--
 .../course/management/ThumbnailUploader.vue   |  2 +-
 .../src/components/editor/ProjectEditor.vue   |  2 +-
 .../spx-color-input/SpxColorInput.vue         |  2 +-
 .../ui/api-reference/APIReferenceUI.vue       |  6 ++--
 .../ui/completion/CompletionCard.vue          |  4 +--
 .../ui/completion/CompletionItem.vue          |  4 +--
 .../ui/document-tab/DocumentTab.vue           |  2 +-
 .../ui/document-tab/DocumentTabs.vue          |  4 +--
 .../xgo-code-editor/ui/hover/HoverCard.vue    |  2 +-
 .../ui/input-helper/BooleanInput.vue          |  4 +--
 .../ui/input-helper/InputHelper.vue           |  2 +-
 .../ui/input-helper/ResourceInput.vue         |  2 +-
 .../components/editor/common/EditorHeader.vue |  2 +-
 .../viewer/quick-config/common/ConfigItem.vue |  2 +-
 .../editor/map-editor/MapEditor.vue           |  2 +-
 .../editor/map-editor/SpriteBasicConfig.vue   |  2 +-
 .../editor/map-editor/SpritesPanel.vue        |  2 +-
 .../map-editor/map-viewer/MapViewer.vue       |  2 +-
 .../components/editor/panels/ConsolePanel.vue |  2 +-
 .../components/editor/panels/EditorPanels.vue |  4 +--
 .../editor/panels/common/PanelFooter.vue      |  2 +-
 .../editor/panels/common/PanelHeader.vue      |  6 ++--
 .../editor/panels/sprite/SpritesPanel.vue     |  2 +-
 .../editor/panels/stage/StagePanel.vue        | 14 +++++-----
 .../editor/preview/EditorPreview.vue          |  2 +-
 .../preview/stage-viewer/StageViewer.vue      |  2 +-
 .../editor/sprite/SpriteCollisionEditor.vue   |  2 +-
 .../sprite/animation/AnimationSettings.vue    |  6 ++--
 .../editor/sprite/animation/MuteSwitch.vue    |  2 +-
 .../editor/stage/backdrop/BackdropDetail.vue  |  2 +-
 .../editor/stage/sound/SoundDetail.vue        |  4 +--
 .../editor/stage/sound/SoundRecorder.vue      |  4 +--
 .../stage/widget/detail/MonitorDetail.vue     |  2 +-
 .../src/components/navbar/NavbarDropdown.vue  |  2 +-
 spx-gui/src/components/navbar/NavbarLang.vue  |  2 +-
 spx-gui/src/components/navbar/NavbarLogo.vue  |  2 +-
 .../src/components/navbar/NavbarProfile.vue   |  4 +--
 .../src/components/navbar/NavbarTutorials.vue |  2 +-
 .../src/components/navbar/NavbarWrapper.vue   | 10 +++----
 .../src/components/project/ProjectItem.vue    |  8 +++---
 .../project/runner/ProjectRunner.vue          |  2 +-
 .../tutorials/TutorialCourseSuccessModal.vue  |  2 +-
 .../tutorials/TutorialStateIndicator.vue      |  2 +-
 spx-gui/src/pages/404/index.vue               |  4 +--
 spx-gui/src/pages/community/explore.vue       |  2 +-
 spx-gui/src/pages/community/index.vue         |  2 +-
 spx-gui/src/pages/community/project.vue       |  8 +++---
 spx-gui/src/pages/community/search.vue        |  2 +-
 spx-gui/src/pages/community/user/index.vue    |  6 ++--
 spx-gui/src/pages/docs/ui-design.vue          |  2 +-
 spx-gui/src/pages/editor/index.vue            |  2 +-
 spx-gui/src/pages/sign-in/callback.vue        |  2 +-
 spx-gui/src/pages/sign-in/token.vue           |  4 +--
 spx-gui/src/pages/tutorials/course-series.vue |  8 +++---
 spx-gui/src/pages/tutorials/course-start.vue  |  2 +-
 spx-gui/src/pages/tutorials/index.vue         |  4 +--
 99 files changed, 175 insertions(+), 173 deletions(-)

diff --git a/spx-gui/src/components/app/device-check/MobileReminder.vue b/spx-gui/src/components/app/device-check/MobileReminder.vue
index 4a2444d57..4d331bed3 100644
--- a/spx-gui/src/components/app/device-check/MobileReminder.vue
+++ b/spx-gui/src/components/app/device-check/MobileReminder.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex min-h-screen flex-col items-center justify-center px-15 py-10">
+  <div class="min-h-screen flex flex-col items-center justify-center px-15 py-10">
     <div class="mb-12">
       <img class="h-auto w-60" :src="imgDesktopRequired" alt="Desktop Required Image" />
     </div>
diff --git a/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue b/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
index 7ded17675..0c6abc756 100644
--- a/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
+++ b/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex h-full min-h-0 flex-col">
+  <div class="h-full min-h-0 flex flex-col">
     <div
       v-if="visible"
-      class="flex flex-none items-center justify-center gap-6 bg-yellow-200 px-6 py-2.75 text-grey-900"
+      class="flex-none flex items-center justify-center gap-6 bg-yellow-200 px-6 py-2.75 text-grey-900"
       role="status"
       aria-live="polite"
     >
@@ -25,7 +25,7 @@
         {{ $t({ en: 'Reload now', zh: '立即刷新' }) }}
       </UIButton>
     </div>
-    <div class="min-h-0 flex-1">
+    <div class="min-h-0 flex-auto">
       <slot></slot>
     </div>
   </div>
diff --git a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
index 8bb8f1226..930e1bd9e 100644
--- a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
+++ b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
@@ -12,8 +12,8 @@
     :body-style="{ padding: '0' }"
     @update:visible="emit('cancelled')"
   >
-    <div class="flex min-h-119 max-h-150">
-      <ul class="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto pt-5 pr-0 pb-5 pl-6">
+    <div class="min-h-119 max-h-150 flex">
+      <ul class="flex-[1_1_0] flex flex-wrap content-start gap-2 overflow-y-auto pt-5 pr-0 pb-5 pl-6">
         <CostumeItem
           v-for="costume in props.sprite.costumes"
           :key="costume.id"
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
index 9d14e78ca..c0d9c91f2 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
@@ -84,7 +84,7 @@ const handleUseAsset = useMessageHandle(
 <template>
   <main
     v-radar="{ name: 'Backdrop generation', desc: 'Interface for generating and selecting backdrops' }"
-    class="backdrop-gen flex h-full flex-col items-stretch"
+    class="backdrop-gen h-full flex flex-col items-stretch"
   >
     <LayoutWithPreview :has-preview="hasPreview">
       <BackdropSettingInput
@@ -141,7 +141,7 @@ const handleUseAsset = useMessageHandle(
         <ImagePreview :file="gen.image" />
       </template>
     </LayoutWithPreview>
-    <footer class="flex w-full flex-none justify-end gap-4 px-6 py-5">
+    <footer class="w-full flex-none flex justify-end gap-4 px-6 py-5">
       <UIButton
         v-if="selectedAsset != null"
         v-radar="{
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
index d37ac99ba..18f403b29 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
@@ -61,7 +61,7 @@ const handleModalClose = useMessageHandle(
     mask-closable
     @update:visible="handleModalClose"
   >
-    <header class="flex h-14 items-center justify-between border-b border-grey-400 px-6">
+    <header class="h-14 flex items-center justify-between border-b border-grey-400 px-6">
       <h2 class="text-16 text-title">{{ $t({ zh: '生成背景', en: 'Backdrop Generator' }) }}</h2>
       <UIModalClose class="close" @click="handleModalClose" />
     </header>
diff --git a/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue b/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
index c551c678f..4a71cffae 100644
--- a/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
+++ b/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
@@ -31,7 +31,7 @@ const entityMessage = computed(() => entityMessages[props.type])
   <UILoading v-if="loading" />
   <div v-else class="flex flex-col items-center gap-3">
     <template v-if="suggestions.length > 0">
-      <ul class="m-0 flex list-none flex-nowrap items-center justify-center gap-2 p-0">
+      <ul class="m-0 list-none flex flex-nowrap items-center justify-center gap-2 p-0">
         <template v-for="asset in suggestions" :key="asset.id">
           <slot name="item" :asset="asset" :selected="isSelected(asset)" :on-click="() => emit('toggle', asset)"></slot>
         </template>
diff --git a/spx-gui/src/components/asset/gen/common/GenPreview.vue b/spx-gui/src/components/asset/gen/common/GenPreview.vue
index 633b55eb0..d57b4c168 100644
--- a/spx-gui/src/components/asset/gen/common/GenPreview.vue
+++ b/spx-gui/src/components/asset/gen/common/GenPreview.vue
@@ -19,9 +19,9 @@ const emit = defineEmits<{
       name: `Preview for '${name}'`,
       desc: `Preview for the generation item '${name}'`
     }"
-    class="flex flex-1 flex-col gap-5 px-5 py-6"
+    class="flex-[1_1_0] flex flex-col gap-5 px-5 py-6"
   >
-    <header class="relative flex flex-none items-center justify-center">
+    <header class="relative flex-none flex items-center justify-center">
       <div class="flex items-center justify-center gap-1">
         <!-- TODO: confirm style details with @qingqing-ux here -->
         <AssetName>{{ name }}</AssetName>
@@ -37,7 +37,7 @@ const emit = defineEmits<{
         <slot name="ops"></slot>
       </div>
     </header>
-    <main class="relative flex flex-1 overflow-hidden">
+    <main class="relative flex-[1_1_0] flex overflow-hidden">
       <slot></slot>
     </main>
   </div>
diff --git a/spx-gui/src/components/asset/gen/common/ImageSelector.vue b/spx-gui/src/components/asset/gen/common/ImageSelector.vue
index 71eeaf5ce..8d41eb4be 100644
--- a/spx-gui/src/components/asset/gen/common/ImageSelector.vue
+++ b/spx-gui/src/components/asset/gen/common/ImageSelector.vue
@@ -69,7 +69,7 @@ function handleSelect(index: number) {
     v-radar="{ name: 'Image selector', desc: 'Selector for choosing from generated images' }"
     class="flex flex-col items-center gap-3"
   >
-    <ul class="m-0 flex list-none flex-nowrap items-center content-center justify-center gap-2 p-0">
+    <ul class="m-0 list-none flex flex-nowrap items-center content-center justify-center gap-2 p-0">
       <template v-if="state.status === 'running'">
         <template v-for="idx in 4" :key="idx">
           <slot name="loading-item" :index="idx"></slot>
diff --git a/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue b/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
index 2e21eb557..34e42e72f 100644
--- a/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
+++ b/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
@@ -11,10 +11,10 @@ defineProps<{
 
 <template>
   <div
-    class="layout-with-preview flex min-w-0 flex-1 items-stretch justify-center"
+    class="layout-with-preview flex-[1_1_0] min-w-0 flex items-stretch justify-center"
     :class="{ 'has-preview': hasPreview }"
   >
-    <section class="main-panel flex min-w-0 flex-col gap-6">
+    <section class="main-panel flex flex-col min-w-0 gap-6">
       <slot></slot>
     </section>
 
diff --git a/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue b/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
index ed1e53bcf..d7ee9a84a 100644
--- a/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
+++ b/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
@@ -7,12 +7,12 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="flex w-full flex-col gap-3">
+  <div class="w-full flex flex-col gap-3">
     <header class="text-16/6.5 font-semibold text-grey-1000">
       <slot name="title"></slot>
     </header>
 
-    <div class="flex w-94 flex-row flex-wrap gap-2">
+    <div class="w-94 flex flex-row flex-wrap gap-2">
       <slot></slot>
       <UIBlockItem
         v-radar="{ name: 'Add', desc: 'Click to add a new item' }"
diff --git a/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue b/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
index aec96ed8a..4b69ef4d0 100644
--- a/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
+++ b/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
@@ -8,10 +8,10 @@ import CheckerboardBackground from '@/components/editor/sprite/CheckerboardBackg
 </script>
 
 <template>
-  <div class="relative flex-1 overflow-hidden rounded-1 w-full">
+  <div class="relative flex-[1_1_0] overflow-hidden rounded-1 w-full">
     <CheckerboardBackground class="absolute inset-0" />
     <slot>
-      <div class="relative flex h-full w-full items-center justify-center text-hint-2">
+      <div class="relative h-full w-full flex items-center justify-center text-hint-2">
         {{
           $t({
             en: 'Enter details in the lower-left box and click "Generate".',
diff --git a/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue b/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
index 249e8db84..e701e0ab0 100644
--- a/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
+++ b/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
@@ -63,7 +63,7 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
           name: $t(name),
           desc: `Click to select '${$t(name)}' (e.g., ${optionsText})`
         }"
-        class="flex h-8 items-center justify-center gap-1 rounded-2 border border-grey-400 bg-grey-100 pr-2 pl-1 text-13/5 text-grey-900 cursor-pointer hover:bg-grey-300 disabled:cursor-not-allowed disabled:bg-grey-300 disabled:text-grey-600"
+        class="h-8 flex items-center justify-center gap-1 rounded-2 border border-grey-400 bg-grey-100 pr-2 pl-1 text-13/5 text-grey-900 cursor-pointer hover:bg-grey-300 disabled:cursor-not-allowed disabled:bg-grey-300 disabled:text-grey-600"
         :class="[{ 'aspect-square px-0': iconOnly }]"
         :disabled="disabled"
       >
@@ -82,7 +82,7 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
       {{ $t(tooltipText) }}
     </template>
     <template #dropdown-content>
-      <div class="flex max-w-102 flex-col gap-3 p-4">
+      <div class="max-w-102 flex flex-col gap-3 p-4">
         <div>{{ $t(tips) }}</div>
         <ul class="flex flex-row flex-wrap gap-2">
           <UIBlockItem
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
index ed75d888d..4400e76e9 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
@@ -80,7 +80,7 @@ const handleModalClose = useMessageHandle(
     mask-closable
     @update:visible="handleModalClose"
   >
-    <header class="flex h-14 items-center justify-between border-b border-grey-400 px-6">
+    <header class="h-14 flex items-center justify-between border-b border-grey-400 px-6">
       <h2 class="text-16 text-title">{{ $t({ zh: '生成精灵', en: 'Sprite Generator' }) }}</h2>
       <UIModalClose class="close" @click="handleModalClose" />
     </header>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
index d1d0408d7..4cd24b4df 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
@@ -191,7 +191,7 @@ const handleSubmit = useMessageHandle(
 <template>
   <main
     v-radar="{ name: 'Sprite generation content phase', desc: 'Sprite costume and animation generation' }"
-    class="flex h-full flex-col items-stretch"
+    class="h-full flex flex-col items-stretch"
   >
     <div class="flex-[1_1_0] flex flex-row items-stretch">
       <aside class="w-102 flex-none bg-grey-100 pt-4 border-r border-grey-400 flex flex-col justify-between">
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
index 6f9f7f320..463511c96 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
@@ -85,7 +85,7 @@ const handleUseAsset = useMessageHandle(
       name: 'Sprite generation settings phase',
       desc: 'Generate default costume for the sprite based on settings'
     }"
-    class="phase-settings flex h-full flex-col items-stretch"
+    class="phase-settings h-full flex flex-col items-stretch"
   >
     <LayoutWithPreview :has-preview="hasPreview">
       <SpriteSettingsInput
diff --git a/spx-gui/src/components/asset/library/AssetLibraryModal.vue b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
index 12701bea9..ddb1cafe6 100644
--- a/spx-gui/src/components/asset/library/AssetLibraryModal.vue
+++ b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
@@ -346,7 +346,7 @@ const title = computed(() => {
     mask-closable
     @update:visible="handleModalClose"
   >
-    <header class="flex h-14 items-center justify-between border-b border-grey-400 px-6">
+    <header class="h-14 flex items-center justify-between border-b border-grey-400 px-6">
       <div class="flex items-center gap-middle">
         <UIButton
           v-if="isGenPhase && backButtonVisible"
@@ -369,7 +369,7 @@ const title = computed(() => {
       <div class="min-h-0 flex-[1_1_0] flex flex-col">
         <div class="flex-1 overflow-y-auto">
           <header
-            class="flex h-45 w-full flex-col items-center justify-center gap-5 bg-center bg-cover bg-no-repeat px-62.5"
+            class="h-45 w-full flex flex-col items-center justify-center gap-5 bg-center bg-cover bg-no-repeat px-62.5"
             :style="headerStyle"
           >
             <UITextInput
@@ -415,7 +415,7 @@ const title = computed(() => {
               </div>
               <ListResultWrapper :query-ret="queryRet" :height="436">
                 <template v-if="SettingsInput != null && assetGen != null && owner === 'all'" #empty>
-                  <div class="mx-auto flex h-109 flex-col items-center gap-6 pt-10">
+                  <div class="mx-auto h-109 flex flex-col items-center gap-6 pt-10">
                     <div class="text-grey-700">
                       <span>{{ $t({ zh: `没找到`, en: `No assets found for ` }) }}</span>
                       <span class="text-grey-1000">{{ $t({ zh: `“${keyword}”`, en: `"${keyword}"` }) }}</span>
diff --git a/spx-gui/src/components/asset/library/AssetSaveModal.vue b/spx-gui/src/components/asset/library/AssetSaveModal.vue
index 961218e08..71a4b64a7 100644
--- a/spx-gui/src/components/asset/library/AssetSaveModal.vue
+++ b/spx-gui/src/components/asset/library/AssetSaveModal.vue
@@ -213,7 +213,7 @@ async function addAssetWithPartialData({
           <SpritePreview v-if="model instanceof Sprite" class="h-21 w-28 rounded-1 bg-grey-300" :sprite="model" />
           <SoundPreview v-if="model instanceof Sound" class="h-21 w-28 rounded-1 bg-grey-300" :sound="model" />
         </div>
-        <div class="flex-1 px-6 pt-5 pb-10">
+        <div class="flex-[1_1_0] px-6 pt-5 pb-10">
           <UIFormItem path="name">
             <UITextInput
               v-model:value="form.value.name"
diff --git a/spx-gui/src/components/asset/library/management/AssetEditModal.vue b/spx-gui/src/components/asset/library/management/AssetEditModal.vue
index 9f8183dc4..ba4d3b3c2 100644
--- a/spx-gui/src/components/asset/library/management/AssetEditModal.vue
+++ b/spx-gui/src/components/asset/library/management/AssetEditModal.vue
@@ -67,7 +67,7 @@ const handleSubmit = useMessageHandle(
           />
           <SoundPreview v-if="assetType === AssetType.Sound" class="h-21 w-28 rounded-1 bg-grey-300" :sound="asset" />
         </div>
-        <div class="flex-1 px-6 pt-5 pb-10">
+        <div class="flex-[1_1_0] px-6 pt-5 pb-10">
           <UIFormItem path="name">
             <UITextInput
               v-model:value="form.value.name"
diff --git a/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue b/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
index 281d3966e..f7bb7ad18 100644
--- a/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
+++ b/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
@@ -195,7 +195,7 @@ const handleRemove = useMessageHandle(
       </UITextInput>
     </template>
     <section class="flex">
-      <div class="min-w-0 w-42 flex-none flex-col gap-3 border-r border-grey-400 p-middle flex">
+      <div class="flex-[0_0_168px] min-w-0 flex-col gap-3 border-r border-grey-400 p-middle flex">
         <UIChip
           v-for="c in categories"
           :key="c.value"
@@ -205,7 +205,7 @@ const handleRemove = useMessageHandle(
           {{ $t(c.message) }}
         </UIChip>
       </div>
-      <main class="flex flex-1 flex-col">
+      <main class="flex-[1_1_0] flex flex-col">
         <h3 class="px-6 pt-5 text-grey-900">{{ $t(category.message) }}</h3>
         <div class="px-6 pt-2 pb-5">
           <ListResultWrapper v-slot="slotProps" :query-ret="queryRet" :height="584">
diff --git a/spx-gui/src/components/asset/library/management/VisibilityIcon.vue b/spx-gui/src/components/asset/library/management/VisibilityIcon.vue
index ee1bf3b7c..d115ba0ba 100644
--- a/spx-gui/src/components/asset/library/management/VisibilityIcon.vue
+++ b/spx-gui/src/components/asset/library/management/VisibilityIcon.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="absolute top-1.5 left-1.5 flex h-6 w-6 items-center justify-center rounded-full bg-grey-100">
+  <div class="absolute top-1.5 left-1.5 h-6 w-6 flex items-center justify-center rounded-full bg-grey-100">
     <i v-if="visibility === Visibility.Public" class="h-4 w-4" :title="$t({ en: 'Public', zh: '公开' })">
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
diff --git a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
index a2120f0ea..dafc2d46e 100644
--- a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
+++ b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
@@ -16,7 +16,7 @@
           name: 'Preprocessing method entries',
           desc: 'Sidebar which contains entries for preprocessing methods'
         }"
-        class="flex flex-none flex-col gap-3 border-r border-dividing-line-2 px-4 py-3"
+        class="flex-none flex flex-col gap-3 border-r border-dividing-line-2 px-4 py-3"
       >
         <ProcessItem
           v-radar="{
@@ -43,7 +43,7 @@
           @click="handleMethodClick(method.value)"
         />
       </div>
-      <div class="min-w-0 flex-1">
+      <div class="flex-[1_1_0] min-w-0">
         <!-- Use `v-show` instead of `v-if` to avoid exception. See details in https://github.com/goplus/builder/issues/2022 -->
         <ProcessDetail
           v-show="activeMethod == null"
diff --git a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
index 9e02106f9..b0ef78986 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
@@ -1,5 +1,5 @@
 <template>
-  <section ref="wrapperRef" class="flex w-full items-center justify-center [&+&]:mt-5" :style="wrapperStyle">
+  <section ref="wrapperRef" class="w-full flex items-center justify-center [&+&]:mt-5" :style="wrapperStyle">
     <canvas ref="canvasRef" class="bg-bottom-left bg-repeat" :style="{ backgroundImage: `url(${imgBgUrl})` }"></canvas>
   </section>
 </template>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
index edae01f79..54c9ce22a 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
@@ -1,7 +1,7 @@
 <template>
-  <section class="relative flex h-full flex-col gap-2.5 px-5 py-2.5">
+  <section class="relative h-full flex flex-col gap-2.5 px-5 py-2.5">
     <header class="flex">
-      <div class="flex h-8 flex-1 items-center gap-3">
+      <div class="flex-[1_1_0] h-8 flex items-center gap-3">
         <slot name="header"></slot>
       </div>
       <UIButton
@@ -22,7 +22,7 @@
         {{ $t({ en: 'Cancel', zh: '取消' }) }}
       </UIButton>
     </header>
-    <main class="flex-1 overflow-y-auto rounded-1 bg-grey-300">
+    <main class="flex-[1_1_0] overflow-y-auto rounded-1 bg-grey-300">
       <slot></slot>
     </main>
   </section>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
index 4895351c9..0eb6dcd58 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
@@ -1,12 +1,12 @@
 <template>
-  <li class="relative flex h-fit w-22 cursor-pointer flex-col items-center">
+  <li class="relative h-fit w-22 cursor-pointer flex flex-col items-center">
     <UIImg
       class="h-16.5 w-22 rounded-1"
       :style="active ? { boxShadow: 'inset 0 0 0 2px var(--ui-color-primary-main)' } : null"
       :src="imgSrc"
     />
     <div
-      class="absolute top-5.25 left-8 flex h-6 w-6 items-center justify-center rounded-full bg-green-main text-grey-100 transition-opacity duration-200"
+      class="absolute top-5.25 left-8 h-6 w-6 flex items-center justify-center rounded-full bg-green-main text-grey-100 transition-opacity duration-200"
       :class="applied ? 'opacity-100' : 'opacity-0'"
     >
       <UIIcon type="check" />
diff --git a/spx-gui/src/components/common/ModificationWarningModal.vue b/spx-gui/src/components/common/ModificationWarningModal.vue
index 461262651..78c2b2356 100644
--- a/spx-gui/src/components/common/ModificationWarningModal.vue
+++ b/spx-gui/src/components/common/ModificationWarningModal.vue
@@ -48,7 +48,7 @@ function handleCancel() {
         </span>
         <span>{{ $t(props.tip) }}</span>
       </div>
-      <ul class="m-0 flex list-none flex-col gap-0.5 pl-0 text-grey-800">
+      <ul class="m-0 list-none flex flex-col gap-0.5 pl-0 text-grey-800">
         <li v-for="(item, index) in props.items" :key="index">
           {{ $t(item) }}
         </li>
diff --git a/spx-gui/src/components/community/CommunityHeader.vue b/spx-gui/src/components/community/CommunityHeader.vue
index e54b65344..bac2ffac3 100644
--- a/spx-gui/src/components/community/CommunityHeader.vue
+++ b/spx-gui/src/components/community/CommunityHeader.vue
@@ -2,8 +2,8 @@
 
 <template>
   <section class="flex-none bg-grey-100">
-    <CenteredWrapper class="flex h-16 items-center justify-between gap-5">
-      <h1 class="min-w-0 flex-[1_1_0] truncate text-16/6.5 text-title">
+    <CenteredWrapper class="h-16 flex items-center justify-between gap-5">
+      <h1 class="flex-[1_1_0] min-w-0 truncate text-16/6.5 text-title">
         <slot></slot>
       </h1>
       <label class="flex-none">
diff --git a/spx-gui/src/components/community/CommunityNavbar.vue b/spx-gui/src/components/community/CommunityNavbar.vue
index 7fc5f773b..51b28e1bb 100644
--- a/spx-gui/src/components/community/CommunityNavbar.vue
+++ b/spx-gui/src/components/community/CommunityNavbar.vue
@@ -16,7 +16,7 @@
       <NavbarTutorials v-if="showTutorialsEntry" />
     </template>
     <template #right>
-      <div class="flex w-85 items-center px-3">
+      <div class="w-85 flex items-center px-3">
         <UITextInput
           v-model:value="searchInput"
           v-radar="{ name: 'Search input', desc: 'Input and press enter to search projects' }"
diff --git a/spx-gui/src/components/community/footer/CommunityFooter.vue b/spx-gui/src/components/community/footer/CommunityFooter.vue
index bc88485e0..1f8a1b879 100644
--- a/spx-gui/src/components/community/footer/CommunityFooter.vue
+++ b/spx-gui/src/components/community/footer/CommunityFooter.vue
@@ -6,7 +6,7 @@ import { UILink } from '@/components/ui'
 <template>
   <footer
     v-if="showLicense"
-    class="flex h-12.5 w-full flex-none items-center justify-center gap-6 text-12 text-grey-700"
+    class="h-12.5 w-full flex-none flex items-center justify-center gap-6 text-12 text-grey-700"
   >
     <span class="flex items-center justify-center">{{ $t({ en: '© 2025 Qiniu Cloud.', zh: '© 2025 七牛云' }) }}</span>
     <UILink
diff --git a/spx-gui/src/components/community/user/AvatarZoomSlider.vue b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
index 263880cc8..446aba1a6 100644
--- a/spx-gui/src/components/community/user/AvatarZoomSlider.vue
+++ b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
@@ -31,10 +31,10 @@ function handleValueUpdate(value: number) {
 </script>
 
 <template>
-  <div class="flex h-12 w-91.5 items-center justify-center gap-2.5">
+  <div class="h-12 w-91.5 flex items-center justify-center gap-2.5">
     <button
       v-radar="{ name: 'Zoom out avatar button', desc: 'Click to zoom out the avatar image' }"
-      class="flex h-6 w-6 flex-none items-center justify-center border-none bg-transparent p-0 text-grey-900 enabled:cursor-pointer enabled:hover:text-grey-1000 disabled:cursor-not-allowed disabled:text-grey-700"
+      class="h-6 w-6 flex-none flex items-center justify-center border-none bg-transparent p-0 text-grey-900 enabled:cursor-pointer enabled:hover:text-grey-1000 disabled:cursor-not-allowed disabled:text-grey-700"
       type="button"
       :disabled="props.disabled || props.value <= props.min"
       @click="handleValueUpdate(props.value - props.buttonStep)"
@@ -56,7 +56,7 @@ function handleValueUpdate(value: number) {
 
     <button
       v-radar="{ name: 'Zoom in avatar button', desc: 'Click to zoom in the avatar image' }"
-      class="flex h-6 w-6 flex-none items-center justify-center border-none bg-transparent p-0 text-grey-900 enabled:cursor-pointer enabled:hover:text-grey-1000 disabled:cursor-not-allowed disabled:text-grey-700"
+      class="h-6 w-6 flex-none flex items-center justify-center border-none bg-transparent p-0 text-grey-900 enabled:cursor-pointer enabled:hover:text-grey-1000 disabled:cursor-not-allowed disabled:text-grey-700"
       type="button"
       :disabled="props.disabled || props.value >= props.max"
       @click="handleValueUpdate(props.value + props.buttonStep)"
diff --git a/spx-gui/src/components/community/user/content/UserContent.vue b/spx-gui/src/components/community/user/content/UserContent.vue
index 14626a891..d3bb11123 100644
--- a/spx-gui/src/components/community/user/content/UserContent.vue
+++ b/spx-gui/src/components/community/user/content/UserContent.vue
@@ -9,7 +9,7 @@ import CommunityCard from '../../CommunityCard.vue'
     v-radar="{ name: 'User content', desc: 'Main content area for user pages' }"
     class="flex flex-col px-middle py-5"
   >
-    <header class="mb-2 flex h-8 items-center justify-between gap-5">
+    <header class="mb-2 h-8 flex items-center justify-between gap-5">
       <!-- TODO: Layout here shifts when jumping from `/user/:name` to `/user/:name/projects`, which is not ideal -->
       <h2 class="text-16/6.5 text-title">
         <slot name="title"></slot>
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebar.vue b/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
index 0fa56060a..e65d3d942 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
@@ -11,7 +11,7 @@ defineProps<{
 <template>
   <CommunityCard
     v-radar="{ name: 'User sidebar', desc: 'Sidebar navigation for user pages' }"
-    class="flex w-53 flex-col gap-1 p-2 desktop-large:w-54"
+    class="w-53 flex flex-col gap-1 p-2 desktop-large:w-54"
   >
     <!-- TODO: check text here -->
     <UserSidebarItem
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
index 7e52f2c54..a5836ca44 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
@@ -16,10 +16,10 @@ defineProps<{
       class="absolute left-3 top-3.5 h-4.25 w-4.25 rounded-full bg-grey-500 transition-all duration-100 group-[.active]:bg-primary-300"
     />
     <span
-      class="relative flex-1 pl-6.5 text-13/5 [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-1/2 [&_svg]:z-1 [&_svg]:-translate-y-1/2"
+      class="relative flex-[1_1_0] pl-6.5 text-13/5 [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-1/2 [&_svg]:z-1 [&_svg]:-translate-y-1/2"
     >
       <slot></slot>
     </span>
-    <UIIcon type="arrowAlt" class="h-3 w-3 flex-none rotate-90 text-grey-800" />
+    <UIIcon type="arrowAlt" class="flex-none h-3 w-3 rotate-90 text-grey-800" />
   </RouterLink>
 </template>
diff --git a/spx-gui/src/components/copilot/CopilotInput.vue b/spx-gui/src/components/copilot/CopilotInput.vue
index 458de97a7..77fcf6e8d 100644
--- a/spx-gui/src/components/copilot/CopilotInput.vue
+++ b/spx-gui/src/components/copilot/CopilotInput.vue
@@ -41,11 +41,11 @@ defineExpose({ focus })
 
 <template>
   <div class="group/loading" :class="{ loading }" @click="focus">
-    <div class="content flex h-full items-center gap-2.5 bg-grey-100 px-3.5 py-3">
+    <div class="content h-full flex items-center gap-2.5 bg-grey-100 px-3.5 py-3">
       <div v-if="loading" class="dot-loading flex items-center justify-between gap-0.5">
         <div class="dot"></div>
       </div>
-      <div class="input-wrapper relative min-h-5 min-w-0 flex-[1_1_0] text-13/5" :data-value="inputStr">
+      <div class="input-wrapper relative flex-[1_1_0] min-w-0 min-h-5 text-13/5" :data-value="inputStr">
         <textarea
           ref="textareaRef"
           v-model="inputStr"
@@ -57,7 +57,7 @@ defineExpose({ focus })
         ></textarea>
       </div>
       <button
-        class="submit-btn flex h-8 w-8 flex-none cursor-pointer items-center justify-center rounded-full border-none p-1.5 outline-none group-[.loading]/loading:hidden"
+        class="submit-btn h-8 w-8 flex-none cursor-pointer flex items-center justify-center rounded-full border-none p-1.5 outline-none group-[.loading]/loading:hidden"
         :class="{ disabled: inputStr.length === 0 }"
         @click="handleSubmit"
       >
diff --git a/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue b/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue
index 44eb993e0..27e478f99 100644
--- a/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue
+++ b/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue
@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <button
-    class="flex h-4.5 cursor-pointer items-center gap-1 rounded border-none bg-transparent p-0 text-12 text-text hover:text-grey-700"
+    class="h-4.5 cursor-pointer flex items-center gap-1 rounded border-none bg-transparent p-0 text-12 text-text hover:text-grey-700"
   >
     <UIIcon :type="icon" />
     <slot></slot>
diff --git a/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue b/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue
index c8ee149be..8712fd259 100644
--- a/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue
+++ b/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue
@@ -24,7 +24,7 @@ function handleRetry() {
     </div>
     <button
       v-if="retryable"
-      class="ml-6 flex w-fit items-center gap-1 rounded border-none bg-transparent px-0 py-0.75 text-grey-800 transition-colors duration-200 hover:text-grey-700 active:text-grey-900"
+      class="ml-6 w-fit flex items-center gap-1 rounded border-none bg-transparent px-0 py-0.75 text-grey-800 transition-colors duration-200 hover:text-grey-700 active:text-grey-900"
       @click="handleRetry"
     >
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
diff --git a/spx-gui/src/components/course/management/CourseItemCornerMenu.vue b/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
index 34cd8c89e..8f7afd5e7 100644
--- a/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
+++ b/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
   <UIDropdown trigger="click" placement="bottom-end">
     <template #trigger>
       <div
-        class="corner-menu flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-grey-100 text-grey-800 transition-all duration-100 hover:bg-primary-main hover:text-grey-100"
+        class="corner-menu h-8 w-8 cursor-pointer flex items-center justify-center rounded-full bg-grey-100 text-grey-800 transition-all duration-100 hover:bg-primary-main hover:text-grey-100"
         @click.stop.prevent
       >
         <UIIcon class="w-5.25 h-5.25" type="more" />
diff --git a/spx-gui/src/components/course/management/CourseManagementModal.vue b/spx-gui/src/components/course/management/CourseManagementModal.vue
index eea034e81..539ee543f 100644
--- a/spx-gui/src/components/course/management/CourseManagementModal.vue
+++ b/spx-gui/src/components/course/management/CourseManagementModal.vue
@@ -114,7 +114,7 @@ const handleRemove = useMessageHandle(
         <div class="flex flex-col">
           <div
             v-if="slotProps.data.data.length === 0"
-            class="flex flex-1 flex-col items-center justify-center text-grey-700"
+            class="flex-1 flex flex-col items-center justify-center text-grey-700"
           >
             <p>{{ $t({ en: 'No courses yet', zh: '还没有课程' }) }}</p>
             <p class="mt-2 text-body text-grey-600">
diff --git a/spx-gui/src/components/course/management/CourseSelector.vue b/spx-gui/src/components/course/management/CourseSelector.vue
index 275c5839f..2d7814d46 100644
--- a/spx-gui/src/components/course/management/CourseSelector.vue
+++ b/spx-gui/src/components/course/management/CourseSelector.vue
@@ -31,7 +31,7 @@ const availableCourses = computed(() => {
 </script>
 
 <template>
-  <div class="flex h-full flex-col">
+  <div class="h-full flex flex-col">
     <div class="border-b border-dividing-line-2 p-3">
       <UITextInput v-model:value="searchKeyword" :placeholder="$t({ en: 'Search courses...', zh: '搜索课程...' })">
         <template #prefix>
diff --git a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
index b4b8ec8b4..a8447461f 100644
--- a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
@@ -223,25 +223,27 @@ const handleSubmit = useMessageHandle(
             <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
               {{ $t({ en: 'Available courses', zh: '可选课程' }) }}
             </label>
-            <CourseSelector
-              class="min-h-0 flex-1"
-              :courses="allCourses"
-              :selected-ids="form.value.courseIDs"
-              :loading="coursesLoading"
-              @select="(id) => (form.value.courseIDs = [...form.value.courseIDs, id])"
-            />
+            <div class="flex-1 min-h-0">
+              <CourseSelector
+                :courses="allCourses"
+                :selected-ids="form.value.courseIDs"
+                :loading="coursesLoading"
+                @select="(id) => (form.value.courseIDs = [...form.value.courseIDs, id])"
+              />
+            </div>
           </div>
           <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
             <!-- FIXME: `bg-grey-50` is not taking effect -->
             <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
               {{ $t({ en: 'Selected courses', zh: '已选课程' }) }}
             </label>
-            <SelectedCoursesList
-              class="min-h-0 flex-1"
-              :course-ids="form.value.courseIDs"
-              :all-courses="allCourses"
-              @update:course-ids="(ids) => (form.value.courseIDs = ids)"
-            />
+            <div class="flex-1 min-h-0">
+              <SelectedCoursesList
+                :course-ids="form.value.courseIDs"
+                :all-courses="allCourses"
+                @update:course-ids="(ids) => (form.value.courseIDs = ids)"
+              />
+            </div>
           </div>
         </div>
         <div v-if="form.validated.courseIDs?.hasError" class="mt-2 text-danger-500">
diff --git a/spx-gui/src/components/course/management/CourseSeriesItem.vue b/spx-gui/src/components/course/management/CourseSeriesItem.vue
index 2a6fc6b57..2f5bdb864 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItem.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItem.vue
@@ -24,7 +24,7 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
       <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
     </div>
     <div
-      class="relative flex h-full flex-col items-center justify-center p-5 text-center"
+      class="relative h-full flex flex-col items-center justify-center p-5 text-center"
       :class="{ 'has-thumbnail': thumbnailUrl != null }"
     >
       <div
diff --git a/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue b/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
index 56147b8c5..3c98a0d65 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
   <UIDropdown trigger="click" placement="bottom-end">
     <template #trigger>
       <div
-        class="corner-menu flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-grey-100 text-grey-800 transition-all duration-100 hover:bg-primary-main hover:text-grey-100"
+        class="corner-menu h-8 w-8 cursor-pointer flex items-center justify-center rounded-full bg-grey-100 text-grey-800 transition-all duration-100 hover:bg-primary-main hover:text-grey-100"
         @click.stop.prevent
       >
         <UIIcon class="w-5.25 h-5.25" type="more" />
diff --git a/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue b/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
index 518cb5212..73e620851 100644
--- a/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
@@ -117,7 +117,7 @@ const handleRemove = useMessageHandle(
         <div class="flex flex-col">
           <div
             v-if="slotProps.data.data.length === 0"
-            class="flex flex-1 flex-col items-center justify-center text-grey-700"
+            class="flex-1 flex flex-col items-center justify-center text-grey-700"
           >
             <p>{{ $t({ en: 'No course series yet', zh: '还没有课程系列' }) }}</p>
             <p class="mt-2 text-body text-grey-600">
diff --git a/spx-gui/src/components/course/management/ProjectReferencesInput.vue b/spx-gui/src/components/course/management/ProjectReferencesInput.vue
index 43d003dcf..460a8cfe6 100644
--- a/spx-gui/src/components/course/management/ProjectReferencesInput.vue
+++ b/spx-gui/src/components/course/management/ProjectReferencesInput.vue
@@ -95,7 +95,7 @@ function handleRemove(index: number) {
       </template>
     </UITextInput>
 
-    <div class="flex flex-1 flex-col gap-2 overflow-y-auto rounded-2 border border-grey-400 p-2">
+    <div class="flex-[1_1_0] flex flex-col gap-2 overflow-y-auto rounded-2 border border-grey-400 p-2">
       <template v-if="references.length > 0">
         <div
           v-for="(reference, index) in references"
@@ -110,7 +110,7 @@ function handleRemove(index: number) {
           />
         </div>
       </template>
-      <div v-else class="flex flex-1 items-center justify-center text-grey-700">
+      <div v-else class="flex-1 flex items-center justify-center text-grey-700">
         {{ $t({ en: 'No reference projects added yet', zh: '尚未添加参考项目' }) }}
       </div>
     </div>
diff --git a/spx-gui/src/components/course/management/ThumbnailUploader.vue b/spx-gui/src/components/course/management/ThumbnailUploader.vue
index 09bdb182b..65342171e 100644
--- a/spx-gui/src/components/course/management/ThumbnailUploader.vue
+++ b/spx-gui/src/components/course/management/ThumbnailUploader.vue
@@ -35,7 +35,7 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 
 <template>
   <div
-    class="flex cursor-pointer items-center justify-center overflow-hidden rounded-2 border border-dashed border-grey-400 transition-[border-color,background-color] duration-300 hover:border-primary-main hover:bg-grey-400"
+    class="cursor-pointer flex items-center justify-center overflow-hidden rounded-2 border border-dashed border-grey-400 transition-[border-color,background-color] duration-300 hover:border-primary-main hover:bg-grey-400"
     @click="handleUpload.fn"
   >
     <UILoading v-if="handleUpload.isLoading.value" />
diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index 0c7d19e2e..c576515bd 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -4,7 +4,7 @@
   <UICard
     v-show="isPreviewMode"
     v-radar="{ name: `Editor for ${selected.type}`, desc: `Main editor panel for editing ${selected.type}` }"
-    class="relative min-w-0 flex-[1_1_0] flex flex-col overflow-visible!"
+    class="relative flex-[1_1_0] min-w-0 flex flex-col overflow-visible!"
   >
     <!--
       TODO: optimize performance for switching between editors, which corresponds to selection change.
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue
index 59eb37428..e7f9e99ce 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue
@@ -98,7 +98,7 @@ function handleSubmit() {
 </script>
 
 <template>
-  <div class="flex w-78 flex-col gap-3">
+  <div class="w-78 flex flex-col gap-3">
     <section class="flex flex-col gap-2">
       <div class="slider-wrapper">
         <h5 class="text-12">
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
index 081f6fe08..d5fd31362 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
@@ -157,11 +157,11 @@ function handleCategoryClick(id: string) {
       {{ $t(err.userMessage) }}
     </UIError>
     <template v-else>
-      <ul class="flex flex-none flex-col gap-3 border-r border-dividing-line-2 px-1 py-3">
+      <ul class="flex-none flex flex-col gap-3 border-r border-dividing-line-2 px-1 py-3">
         <li
           v-for="c in categoriesComputed"
           :key="c.id"
-          class="flex h-13 w-13 cursor-pointer flex-col items-center justify-center rounded-1 transition-[color,background-color] duration-100"
+          class="h-13 w-13 cursor-pointer flex flex-col items-center justify-center rounded-1 transition-[color,background-color] duration-100"
           :class="c.id === activeCategoryIdRef ? 'bg-(--category-color) text-grey-100' : 'text-(--category-color)'"
           :style="{ '--category-color': c.color }"
           @click="handleCategoryClick(c.id)"
@@ -171,7 +171,7 @@ function handleCategoryClick(id: string) {
           <p class="mt-0.5 text-center text-10/[1.6]">{{ $t(c.label) }}</p>
         </li>
       </ul>
-      <ul ref="itemsWrapperRef" class="min-w-0 flex-[1_1_0] overflow-y-auto px-4 pb-3 [scrollbar-width:thin]">
+      <ul ref="itemsWrapperRef" class="flex-[1_1_0] min-w-0 overflow-y-auto px-4 pb-3 [scrollbar-width:thin]">
         <li v-for="c in categoriesForItems" :key="c.id" :data-category-id="c.id" class="category-wrapper">
           <section
             v-for="sc in c.subCategories"
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue
index c590e6bbc..a576fb399 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue
@@ -68,8 +68,8 @@ function applyItem(item: InternalCompletionItem) {
 </script>
 
 <template>
-  <CodeEditorCard class="flex max-h-56.75 w-111.75 items-stretch py-3 pr-0 pl-3 text-12">
-    <ul class="flex min-h-0 flex-none flex-col gap-2 overflow-y-auto pr-3 [scrollbar-width:thin]">
+  <CodeEditorCard class="max-h-56.75 w-111.75 flex items-stretch py-3 pr-0 pl-3 text-12">
+    <ul class="flex-none min-h-0 flex flex-col gap-2 overflow-y-auto pr-3 [scrollbar-width:thin]">
       <CompletionItemComp
         v-for="(item, i) in items"
         :key="i"
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
index 96f42d4fa..df9f77453 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
@@ -42,11 +42,11 @@ watchEffect(() => {
 <template>
   <li
     ref="wrapperRef"
-    class="flex min-w-24 max-w-42 cursor-pointer items-center rounded-1 p-1.75 text-xs text-grey-1000 hover:bg-grey-300"
+    class="min-w-24 max-w-42 cursor-pointer flex items-center rounded-1 p-1.75 text-xs text-grey-1000 hover:bg-grey-300"
     :class="active ? 'bg-grey-400' : ''"
     :title="item.label"
   >
-    <code class="min-w-0 flex-1 truncate font-code">
+    <code class="flex-[1_1_0] truncate font-code">
       <span v-for="(part, i) in parts" :key="i" :class="part.isMatched ? 'text-primary-main' : ''">
         {{ part.content }}
       </span>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
index 26368a153..396237e97 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
@@ -25,7 +25,7 @@ const [thumbnailUrl] = useFileUrl(() => props.textDocument.thumbnailFile)
     <template #trigger>
       <div
         v-radar="{ name: 'Code document tab', desc: `Click to open code of ${textDocument.id.uri}` }"
-        class="document-tab flex h-10 w-10 flex-none items-center rounded-1 border-2 transition-all"
+        class="document-tab h-10 w-10 flex-none flex items-center rounded-1 border-2 transition-all"
         :class="isActive ? 'border-yellow-500 bg-yellow-200' : 'border-transparent bg-grey-300 cursor-pointer'"
         @click="emit('click')"
       >
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
index 4e0c4ae68..cf1a4a87e 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
@@ -33,7 +33,7 @@ function handleClose() {
     />
     <template v-if="tempTextDocuments.length > 0">
       <UIDivider class="my-3 w-8" />
-      <div class="flex min-h-0 flex-[0_1_auto] flex-col gap-2 overflow-y-auto [scrollbar-width:none]">
+      <div class="flex-[0_1_auto] min-h-0 flex flex-col gap-2 overflow-y-auto [scrollbar-width:none]">
         <DocumentTab
           v-for="textDocument in tempTextDocuments"
           :key="textDocument.id.uri"
@@ -46,7 +46,7 @@ function handleClose() {
         {{ $t({ en: 'Close all', zh: '全部关闭' }) }}
         <template #trigger>
           <button
-            class="mt-2 flex h-10 w-10 flex-none cursor-pointer items-center justify-center rounded-1 border-0 bg-transparent text-inherit hover:bg-grey-300"
+            class="mt-2 h-10 w-10 flex-none cursor-pointer flex items-center justify-center rounded-1 border-0 bg-transparent text-inherit hover:bg-grey-300"
             @click="handleClose"
           >
             <UIIcon class="w-5 h-5" type="closeCircle" />
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue
index 40fd4fcbc..7b5b4885b 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue
@@ -32,7 +32,7 @@ const handleAction = useMessageHandle(
 
 <template>
   <CodeEditorCard class="flex flex-col items-stretch p-2">
-    <ul class="flex min-h-0 min-w-62.5 max-w-82 flex-col overflow-y-auto [scrollbar-width:thin]">
+    <ul class="min-h-0 max-h-75 min-w-62.5 max-w-82 flex flex-col overflow-y-auto [scrollbar-width:thin]">
       <slot></slot>
     </ul>
     <footer v-if="actions.length > 0" class="mt-1.5 flex gap-3 border-t border-dividing-line-2 px-2 pt-3.5 pb-2">
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
index 02b28cfe3..71a7fea74 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
@@ -30,13 +30,13 @@ const modelValue = computed({
 <template>
   <UIRadioGroup v-model:value="modelValue" class="flex self-stretch items-center gap-3 py-1.25">
     <UIRadio
-      class="option flex h-8 flex-[1_1_0] items-center justify-center gap-0.5 rounded-2 border border-grey-400 transition-all"
+      class="option h-8 flex-[1_1_0] flex items-center justify-center gap-0.5 rounded-2 border border-grey-400 transition-all"
       value="true"
     >
       <code>true</code>
     </UIRadio>
     <UIRadio
-      class="option flex h-8 flex-[1_1_0] items-center justify-center gap-0.5 rounded-2 border border-grey-400 transition-all"
+      class="option h-8 flex-[1_1_0] flex items-center justify-center gap-0.5 rounded-2 border border-grey-400 transition-all"
       value="false"
     >
       <code>false</code>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue
index a2963720c..0e6ccccf6 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue
@@ -99,7 +99,7 @@ function handlePredefinedNameUpdate(name: string | null) {
 </script>
 
 <template>
-  <div class="flex min-w-86 flex-col items-center gap-5 px-4 pt-5 pb-6">
+  <div class="min-w-86 flex flex-col items-center gap-5 px-4 pt-5 pb-6">
     <UITabRadioGroup class="w-78" :value="kind" @update:value="(v) => handleKindUpdate(v as InputKind)">
       <UITabRadio :value="InputKind.InPlace">
         {{ $t(inPlaceValueTitle) }}
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
index 372909e76..d317e00e6 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
@@ -56,7 +56,7 @@ onMounted(() => {
 <template>
   <ul
     v-if="provider != null && selector != null"
-    class="flex w-94 max-h-70 flex-none flex-wrap content-start gap-2 overflow-y-auto"
+    class="w-94 max-h-70 flex-none flex flex-wrap content-start gap-2 overflow-y-auto"
   >
     <component
       :is="provider.provideResourceItemRenderer()"
diff --git a/spx-gui/src/components/editor/common/EditorHeader.vue b/spx-gui/src/components/editor/common/EditorHeader.vue
index 32ed86df0..8c0a67e31 100644
--- a/spx-gui/src/components/editor/common/EditorHeader.vue
+++ b/spx-gui/src/components/editor/common/EditorHeader.vue
@@ -1,7 +1,7 @@
 <!-- Header for Sprite/Sound/Stage Editor -->
 
 <template>
-  <div class="flex h-11 items-center justify-between border-b border-grey-400 pr-middle">
+  <div class="h-11 flex items-center justify-between border-b border-grey-400 pr-middle">
     <slot></slot>
     <div class="extra">
       <slot name="extra"></slot>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
index 994987f3e..40f0bf161 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
@@ -9,7 +9,7 @@ const slots = useSlots()
 
 <template>
   <div
-    class="group flex h-8 w-8 cursor-pointer items-center justify-center rounded-[10px] text-center hover:bg-turquoise-200"
+    class="group h-8 w-8 cursor-pointer flex items-center justify-center rounded-[10px] text-center hover:bg-turquoise-200"
   >
     <UIIcon
       v-if="slots.default == null && icon != null"
diff --git a/spx-gui/src/components/editor/map-editor/MapEditor.vue b/spx-gui/src/components/editor/map-editor/MapEditor.vue
index c91c7ed51..0b4361bfc 100644
--- a/spx-gui/src/components/editor/map-editor/MapEditor.vue
+++ b/spx-gui/src/components/editor/map-editor/MapEditor.vue
@@ -27,7 +27,7 @@ function handleSpriteSelect(sprite: Sprite | null) {
 
 <template>
   <div class="flex-[1_1_0] flex flex-row gap-middle">
-    <div class="flex w-0 min-w-0 flex-1 items-center justify-center">
+    <div class="flex-1 w-0 min-w-0 flex items-center justify-center">
       <MapViewer :project="project" :selected-sprite="selectedSprite" @update:selected-sprite="handleSpriteSelect" />
     </div>
     <div class="flex-[0_0_400px] flex flex-col gap-middle desktop-large:basis-124">
diff --git a/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue b/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
index 892f48cef..7412e5bba 100644
--- a/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
+++ b/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
@@ -46,7 +46,7 @@ const handleEditCollision = useMessageHandle(
 </script>
 
 <template>
-  <div class="flex h-7 items-center text-title">
+  <div class="h-7 flex items-center text-title">
     <AssetName>{{ sprite.name }}</AssetName>
     <UIIcon
       v-radar="{ name: 'Rename button', desc: 'Button to rename the sprite' }"
diff --git a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
index af72d7169..f6f4f0110 100644
--- a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
@@ -132,7 +132,7 @@ const handleGenerate = useMessageHandle(
             name: 'Expand button',
             desc: 'Button to expand the basic configuration panel for selected sprite'
           }"
-          class="absolute right-3 bottom-0 flex h-6 w-6 cursor-pointer items-center justify-center bg-grey-300 shadow-small"
+          class="absolute right-3 bottom-0 h-6 w-6 cursor-pointer flex items-center justify-center bg-grey-300 shadow-small"
           @click="footerExpanded = true"
         >
           <UIIcon class="rotate-180" type="doubleArrowDown" />
diff --git a/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue b/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
index 90977a546..d6a0760b7 100644
--- a/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
+++ b/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
@@ -526,7 +526,7 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
       name: 'Map viewer',
       desc: 'View and manipulate the map and sprites on the map. Click on sprite to select it.'
     }"
-    class="relative flex h-full w-full items-center justify-center overflow-hidden rounded-3 bg-center bg-repeat bg-contain"
+    class="relative h-full w-full flex items-center justify-center overflow-hidden rounded-3 bg-center bg-repeat bg-contain"
     :style="{ backgroundImage: `url(${stageBgUrl})` }"
     @mousemove="updateMousePos"
   >
diff --git a/spx-gui/src/components/editor/panels/ConsolePanel.vue b/spx-gui/src/components/editor/panels/ConsolePanel.vue
index f455b8b6e..4beaf3a73 100644
--- a/spx-gui/src/components/editor/panels/ConsolePanel.vue
+++ b/spx-gui/src/components/editor/panels/ConsolePanel.vue
@@ -55,7 +55,7 @@ const initializingError = computed(() => {
     <UICardHeader>
       {{ $t({ en: 'Console', zh: '控制台' }) }}
     </UICardHeader>
-    <ul ref="outputContainerRef" class="flex flex-[1_1_0] flex-col gap-1 overflow-y-auto p-3">
+    <ul ref="outputContainerRef" class="flex-[1_1_0] flex flex-col gap-1 overflow-y-auto p-3">
       <UIEmpty v-if="runtime.running.mode !== 'debug'" size="small">
         {{ $t({ en: 'Not running in debug mode', zh: '未处于调试模式' }) }}
       </UIEmpty>
diff --git a/spx-gui/src/components/editor/panels/EditorPanels.vue b/spx-gui/src/components/editor/panels/EditorPanels.vue
index 84fb2ad57..708649d5e 100644
--- a/spx-gui/src/components/editor/panels/EditorPanels.vue
+++ b/spx-gui/src/components/editor/panels/EditorPanels.vue
@@ -1,8 +1,8 @@
 <template>
-  <div v-show="running.mode !== 'debug'" class="flex flex-[1_1_0] gap-middle">
+  <div v-show="running.mode !== 'debug'" class="flex-[1_1_0] flex gap-middle">
     <UICard
       v-radar="{ name: 'Sprites panel', desc: 'Panel containing sprites for the project' }"
-      class="flex min-w-0 flex-[1_1_0]"
+      class="flex-[1_1_0] min-w-0 flex"
     >
       <SpritesPanel />
     </UICard>
diff --git a/spx-gui/src/components/editor/panels/common/PanelFooter.vue b/spx-gui/src/components/editor/panels/common/PanelFooter.vue
index 5e67e4640..57591f0a2 100644
--- a/spx-gui/src/components/editor/panels/common/PanelFooter.vue
+++ b/spx-gui/src/components/editor/panels/common/PanelFooter.vue
@@ -2,7 +2,7 @@
 
 <template>
   <div
-    class="flex flex-none flex-col gap-3 bg-grey-100 p-3"
+    class="flex-none flex flex-col gap-3 bg-grey-100 p-3"
     :style="{
       // slightly different with --ui-box-shadow-small
       boxShadow: '0px -2px 8px 0px rgba(51, 51, 51, 0.08)'
diff --git a/spx-gui/src/components/editor/panels/common/PanelHeader.vue b/spx-gui/src/components/editor/panels/common/PanelHeader.vue
index f5578c8b8..cd18e1257 100644
--- a/spx-gui/src/components/editor/panels/common/PanelHeader.vue
+++ b/spx-gui/src/components/editor/panels/common/PanelHeader.vue
@@ -3,17 +3,17 @@
 <!-- TODO: use UICardHeader? -->
 <template>
   <div
-    class="flex h-11 items-center justify-between border-b border-grey-400 pr-2.5"
+    class="h-11 flex items-center justify-between border-b border-grey-400 pr-2.5"
     :class="active ? 'border-(--panel-color-main) bg-(--panel-color-main) text-grey-100' : 'text-title'"
   >
-    <div class="flex h-full items-center px-middle text-16">
+    <div class="h-full flex items-center px-middle text-16">
       <slot></slot>
     </div>
     <UIDropdown trigger="click" placement="bottom-end" :offset="{ x: 0, y: 16 }">
       <template #trigger>
         <div
           v-radar="{ name: 'Add', desc: 'Button to add a new item for current panel, click to view more options' }"
-          class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full text-inherit transition-colors"
+          class="h-7 w-7 cursor-pointer flex items-center justify-center rounded-full text-inherit transition-colors"
           :class="
             active
               ? 'hover:bg-(--panel-color-400) active:bg-(--panel-color-600)'
diff --git a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
index f97ec75ed..55654691a 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
@@ -2,7 +2,7 @@
   <div class="h-full w-full overflow-hidden" :style="cssVars">
     <section
       v-radar="{ name: 'Sprites panel', desc: 'Panel for managing project sprites' }"
-      class="flex h-full flex-col overflow-hidden"
+      class="h-full flex flex-col overflow-hidden"
     >
       <PanelHeader :active="selectedSprite != null">
         {{ $t({ en: 'Sprites', zh: '精灵' }) }}
diff --git a/spx-gui/src/components/editor/panels/stage/StagePanel.vue b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
index 52318cfe2..6d3e913b6 100644
--- a/spx-gui/src/components/editor/panels/stage/StagePanel.vue
+++ b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
@@ -1,17 +1,17 @@
 <template>
-  <section class="flex h-full flex-col overflow-hidden" :style="cssVars">
+  <section class="h-full flex flex-col overflow-hidden" :style="cssVars">
     <!-- TODO: use UICardHeader? -->
     <h4
-      class="flex h-11 w-20 items-center justify-center border-b border-grey-400 text-16"
+      class="h-11 w-20 flex items-center justify-center border-b border-grey-400 text-16"
       :class="active ? 'border-stage-main bg-stage-main text-grey-100' : 'text-title'"
     >
       {{ $t({ en: 'Stage', zh: '舞台' }) }}
     </h4>
-    <main class="flex flex-[1_1_0] flex-col items-center">
+    <main class="flex-[1_1_0] flex flex-col items-center">
       <div class="flex-none p-3">
         <div
           v-radar="{ name: 'Stage overview', desc: 'Overview of the stage, click to view stage details' }"
-          class="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-1 bg-grey-300"
+          class="relative h-14 w-14 cursor-pointer flex items-center justify-center rounded-1 bg-grey-300"
           :class="active ? 'border-2 border-stage-main bg-blue-200 p-0' : 'p-0.5 hover:bg-grey-400'"
           @click="activate"
         >
@@ -26,7 +26,7 @@
               name: 'Backdrops quick entry',
               desc: 'Quick entry to open backdrops management tab in stage editor'
             }"
-            class="flex h-14 w-14 cursor-pointer flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
+            class="h-14 w-14 cursor-pointer flex flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('backdrops')"
           >
@@ -36,7 +36,7 @@
           </button>
           <button
             v-radar="{ name: 'Sounds quick entry', desc: 'Quick entry to open sounds management tab in stage editor' }"
-            class="flex h-14 w-14 cursor-pointer flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
+            class="h-14 w-14 cursor-pointer flex flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('sounds')"
           >
@@ -49,7 +49,7 @@
               name: 'Widgets quick entry',
               desc: 'Quick entry to open widgets management tab in stage editor'
             }"
-            class="flex h-14 w-14 cursor-pointer flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
+            class="h-14 w-14 cursor-pointer flex flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('widgets')"
           >
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index 4235a5f79..d15018232 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -70,7 +70,7 @@
       </template>
     </UICardHeader>
 
-    <div class="flex h-full justify-center overflow-hidden p-3">
+    <div class="h-full flex justify-center overflow-hidden p-3">
       <div
         ref="stageContainerRef"
         class="stage-viewer-container relative h-full w-full overflow-hidden rounded-1 bg-grey-200"
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index 4ff5f0640..6054b6a99 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -5,7 +5,7 @@
       name: 'Stage viewer',
       desc: 'View and manipulate the stage and objects (sprites, widgets, etc.) on the stage. Click on object to select it.'
     }"
-    class="stage-viewer relative flex h-full w-full items-center justify-center bg-center bg-repeat bg-contain"
+    class="stage-viewer relative h-full w-full flex items-center justify-center bg-center bg-repeat bg-contain"
     :style="{ backgroundImage: `url(${stageBgUrl})` }"
     @mousemove="updateMousePos"
   >
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
index 6e7611ded..5df213b58 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
@@ -291,7 +291,7 @@ const { fn: handleConfirm } = useMessageHandle(
 </script>
 
 <template>
-  <div class="flex h-full w-full flex-col items-center gap-middle">
+  <div class="h-full w-full flex flex-col items-center gap-middle">
     <div ref="wrapper" class="relative h-full w-full flex-1 overflow-hidden rounded-2">
       <CheckerboardBackground class="absolute inset-0" />
       <v-stage v-if="stageConfig != null" :config="stageConfig">
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
index 6b28d4715..795c40688 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
@@ -11,7 +11,7 @@
         <ul class="flex items-center gap-1 rounded-1 bg-grey-100 p-1 shadow-small">
           <li
             v-radar="{ name: 'Edit duration', desc: 'Click to edit animation duraion' }"
-            class="flex h-8 cursor-pointer items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            class="h-8 cursor-pointer flex items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
             :class="activeSetting === 'duration' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('duration')"
           >
@@ -25,7 +25,7 @@
           </li>
           <li
             v-radar="{ name: 'Edit bound state', desc: 'Click to edit animation bound state' }"
-            class="flex h-8 cursor-pointer items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            class="h-8 cursor-pointer flex items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
             :class="activeSetting === 'bound-state' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('bound-state')"
           >
@@ -41,7 +41,7 @@
           <li
             v-if="soundEditable"
             v-radar="{ name: 'Edit sound', desc: 'Click to edit animation sound' }"
-            class="flex h-8 cursor-pointer items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            class="h-8 cursor-pointer flex items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
             :class="activeSetting === 'sound' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('sound')"
           >
diff --git a/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue b/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
index 604aec0be..391b5494b 100644
--- a/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
+++ b/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
@@ -3,7 +3,7 @@
     <UITooltip>
       <template #trigger>
         <div
-          class="cursor-pointer flex h-8 w-8 items-center justify-center rounded-full border border-grey-500 bg-grey-100 transition-colors hover:bg-grey-300"
+          class="cursor-pointer h-8 w-8 flex items-center justify-center rounded-full border border-grey-500 bg-grey-100 transition-colors hover:bg-grey-300"
         >
           <UIIcon :type="muted ? 'volumeOff' : 'volumeUp'" />
         </div>
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
index 27d9e49fe..31a0d9d61 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <EditorItemDetail :name="backdrop.name" @rename="handleRename">
-    <div class="flex min-h-0 flex-1 items-center justify-center w-full">
+    <div class="w-full flex-[1_1_0] min-h-0 flex items-center justify-center">
       <img v-if="imgSrc != null" class="max-h-full max-w-full rounded-1" :src="imgSrc" />
       <UILoading :visible="imgLoading" cover />
     </div>
diff --git a/spx-gui/src/components/editor/stage/sound/SoundDetail.vue b/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
index 9aef47423..c947ca42d 100644
--- a/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
+++ b/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex w-full flex-col gap-large px-5 py-6">
+  <div class="w-full flex flex-col gap-large px-5 py-6">
     <div class="flex flex-col items-center">
       <div class="flex items-center gap-2 text-title">
         <AssetName>{{ sound.name }}</AssetName>
@@ -37,7 +37,7 @@
       />
       <VolumeSlider class="mx-6 flex-[0_1_438px]" :value="gain" @update:value="handleGainUpdate" />
       <div class="flex-[1_1_0]" />
-      <div v-if="editing" class="flex flex-none items-center gap-2">
+      <div v-if="editing" class="flex-none flex items-center gap-2">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel sound editing' }"
           color="boring"
diff --git a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
index 65c4d29e4..2cf566a90 100644
--- a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
+++ b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
@@ -50,7 +50,7 @@
       </div>
       <template v-else>
         <div class="flex flex-col items-center gap-2 text-body">
-          <div class="flex h-14 items-center">
+          <div class="h-14 flex items-center">
             <UIButton shape="circle" size="large" icon="reload" color="boring" @click="resetRecording" />
           </div>
           <span>
@@ -84,7 +84,7 @@
           </span>
         </div>
         <div class="flex flex-col items-center gap-2 text-body">
-          <div class="flex h-14 items-center">
+          <div class="h-14 flex items-center">
             <UIButton shape="circle" size="large" icon="check" color="success" @click="saveRecording" />
           </div>
           <span>
diff --git a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
index 617f9ffdc..9fabc4e7e 100644
--- a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
+++ b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
@@ -2,7 +2,7 @@
   <EditorItemDetail style="background-color: var(--ui-color-grey-100)" :name="monitor.name" @rename="handleRename">
     <div class="flex justify-center gap-8 py-5">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="monitor-icon flex h-24 w-24 items-center justify-center rounded-1 bg-grey-300" v-html="mntIcon"></div>
+      <div class="monitor-icon h-24 w-24 flex items-center justify-center rounded-1 bg-grey-300" v-html="mntIcon"></div>
       <div class="flex flex-col gap-middle">
         <div class="flex items-center gap-middle">
           <p class="flex items-center gap-2 break-keep">
diff --git a/spx-gui/src/components/navbar/NavbarDropdown.vue b/spx-gui/src/components/navbar/NavbarDropdown.vue
index d05fff111..3e2686e58 100644
--- a/spx-gui/src/components/navbar/NavbarDropdown.vue
+++ b/spx-gui/src/components/navbar/NavbarDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <UIDropdown placement="bottom-start">
     <template #trigger>
-      <div v-radar="triggerRadar" class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600">
+      <div v-radar="triggerRadar" class="h-full cursor-pointer flex items-center px-5 hover:bg-primary-600">
         <slot name="trigger"></slot>
         <UIIcon type="arrowDown" />
       </div>
diff --git a/spx-gui/src/components/navbar/NavbarLang.vue b/spx-gui/src/components/navbar/NavbarLang.vue
index 9ca7532be..c7aceb257 100644
--- a/spx-gui/src/components/navbar/NavbarLang.vue
+++ b/spx-gui/src/components/navbar/NavbarLang.vue
@@ -4,7 +4,7 @@
     <template #trigger>
       <div
         v-radar="{ name: 'Language switcher', desc: 'Click to switch between English and Chinese' }"
-        class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600"
+        class="h-full cursor-pointer flex items-center px-5 hover:bg-primary-600"
         @click="toggleLang"
         v-html="langContent"
       ></div>
diff --git a/spx-gui/src/components/navbar/NavbarLogo.vue b/spx-gui/src/components/navbar/NavbarLogo.vue
index fefb7f766..430315fe0 100644
--- a/spx-gui/src/components/navbar/NavbarLogo.vue
+++ b/spx-gui/src/components/navbar/NavbarLogo.vue
@@ -1,7 +1,7 @@
 <template>
   <router-link
     v-radar="{ name: 'Logo link', desc: 'Logo image as link to the homepage' }"
-    class="logo relative mx-6 flex h-full items-center"
+    class="logo relative mx-6 h-full flex items-center"
     to="/"
   >
     <img :src="logoSvg" />
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index da4e95810..00afe4ee4 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div v-if="!loading && signedInUser == null" class="mr-2 flex h-full items-center px-5 whitespace-nowrap">
+  <div v-if="!loading && signedInUser == null" class="mr-2 h-full flex items-center px-5 whitespace-nowrap">
     <UIButton
       v-radar="{ name: 'Sign-in button', desc: 'Click to sign in' }"
       color="secondary"
@@ -11,7 +11,7 @@
   </div>
   <UIDropdown v-else placement="bottom-end" :offset="{ x: 0, y: 8 }">
     <template #trigger>
-      <div class="mr-2 flex h-full items-center justify-center px-5 hover:bg-primary-600">
+      <div class="mr-2 h-full flex items-center justify-center px-5 hover:bg-primary-600">
         <img class="h-8 w-8 rounded-full" :src="avatarUrl ?? undefined" />
       </div>
     </template>
diff --git a/spx-gui/src/components/navbar/NavbarTutorials.vue b/spx-gui/src/components/navbar/NavbarTutorials.vue
index 694caf026..291ef1cd6 100644
--- a/spx-gui/src/components/navbar/NavbarTutorials.vue
+++ b/spx-gui/src/components/navbar/NavbarTutorials.vue
@@ -3,7 +3,7 @@
     <template #trigger>
       <router-link
         v-radar="{ name: 'Navbar tutorials link', desc: 'Click to open the tutorials page' }"
-        class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600"
+        class="h-full cursor-pointer flex items-center px-5 hover:bg-primary-600"
         to="/tutorials"
       >
         <UIIcon class="w-6 h-6 text-grey-100" type="tutorial" />
diff --git a/spx-gui/src/components/navbar/NavbarWrapper.vue b/spx-gui/src/components/navbar/NavbarWrapper.vue
index 13cdc495c..3ca337b62 100644
--- a/spx-gui/src/components/navbar/NavbarWrapper.vue
+++ b/spx-gui/src/components/navbar/NavbarWrapper.vue
@@ -1,21 +1,21 @@
 <template>
   <nav
     v-radar="{ name: 'Navbar', desc: 'Top navigation bar' }"
-    class="flex w-full justify-center bg-primary-main bg-center bg-repeat text-grey-100 shadow-diffusion"
+    class="w-full flex justify-center bg-primary-main bg-center bg-repeat text-grey-100 shadow-diffusion"
     :style="{ backgroundImage: `url(${bgUrl})` }"
   >
     <div
-      class="flex h-12.5 items-stretch justify-between gap-3"
+      class="h-12.5 flex items-stretch justify-between gap-3"
       :class="centered ? 'w-305 desktop-large:w-370' : 'w-full'"
     >
-      <div class="flex basis-[30%]">
+      <div class="basis-[30%] flex">
         <NavbarLogo />
         <slot name="left"></slot>
       </div>
-      <div class="flex basis-[40%] items-center justify-center overflow-hidden">
+      <div class="basis-[40%] flex items-center justify-center overflow-hidden">
         <slot name="center"></slot>
       </div>
-      <div class="flex basis-[30%] justify-end">
+      <div class="basis-[30%] flex justify-end">
         <slot name="right"></slot>
         <NavbarProfile />
       </div>
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index 4f29ac976..a9db0cfc9 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -16,7 +16,7 @@
                 name: 'Project item operations',
                 desc: 'More operations (edit, remove) for project item, click to open the menu'
               }"
-              class="invisible absolute top-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-grey-100 text-grey-800 opacity-0 transition-all duration-100 group-hover:visible group-hover:opacity-100 hover:bg-primary-main hover:text-grey-100"
+              class="invisible absolute top-2 right-2 h-8 w-8 flex items-center justify-center rounded-full bg-grey-100 text-grey-800 opacity-0 transition-all duration-100 group-hover:visible group-hover:opacity-100 hover:bg-primary-main hover:text-grey-100"
               @click.stop.prevent
             >
               <UIIcon class="w-5.25 h-5.25" type="more" />
@@ -102,12 +102,12 @@
             </i>
           </template>
         </div>
-        <p class="mt-1 flex h-5 gap-3 text-13/5 text-grey-700">
-          <span class="flex flex-none items-center gap-1" :class="{ 'text-red-main': liking }" :title="$t(likesTitle)">
+        <p class="mt-1 h-5 flex gap-3 text-13/5 text-grey-700">
+          <span class="flex-none flex items-center gap-1" :class="{ 'text-red-main': liking }" :title="$t(likesTitle)">
             <UIIcon class="w-3.5 h-3.5" type="heart" />
             {{ $t(humanizeCount(project.likeCount)) }}
           </span>
-          <span class="min-w-0 flex-1 truncate" :title="$t(timeTitle)">
+          <span class="flex-auto block truncate" :title="$t(timeTitle)">
             {{ $t(humanizeTime(project.updatedAt)) }}
           </span>
         </p>
diff --git a/spx-gui/src/components/project/runner/ProjectRunner.vue b/spx-gui/src/components/project/runner/ProjectRunner.vue
index 156db81f2..6f2b8cf6f 100644
--- a/spx-gui/src/components/project/runner/ProjectRunner.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunner.vue
@@ -386,7 +386,7 @@ defineExpose({
       <span>{{ $t(startingProgress?.desc ?? { en: 'Loading...', zh: '加载中...' }) }}</span>
     </UIDetailedLoading>
     <div v-show="state.type === 'failed'" class="absolute inset-0" :style="{ backgroundImage: `url(${errorBgUrl})` }">
-      <div class="flex h-full w-full flex-col items-center justify-center gap-1 bg-black/65 text-grey-100">
+      <div class="h-full w-full flex flex-col items-center justify-center gap-1 bg-black/65 text-grey-100">
         <svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M10.3422 18.9098C10.3422 19.3332 10.5103 19.7392 10.8097 20.0386C11.1091 20.3379 11.5151 20.5061 11.9385 20.5061C12.3619 20.5061 12.7679 20.3379 13.0673 20.0386C13.3666 19.7392 13.5348 19.3332 13.5348 18.9098C13.5348 18.4864 13.3666 18.0804 13.0673 17.781C12.7679 17.4817 12.3619 17.3135 11.9385 17.3135C11.5151 17.3135 11.1091 17.4817 10.8097 17.781C10.5103 18.0804 10.3422 18.4864 10.3422 18.9098Z"
diff --git a/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue b/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue
index 6ec2c1832..e0a7912ae 100644
--- a/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue
+++ b/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue
@@ -97,7 +97,7 @@ const { fn: handleStartNextCourse } = useMessageHandle(
         <div>{{ $t({ zh: '太棒了!', en: 'Great!' }) }}</div>
         <div>{{ courseCompleteMessage }}</div>
 
-        <div class="mt-6 flex w-full flex-col gap-5">
+        <div class="mt-6 w-full flex flex-col gap-5">
           <UIButton color="boring" size="large" @click="handleBrowseTutorials">
             {{ $t({ zh: '浏览所有课程', en: 'Browse all courses' }) }}
           </UIButton>
diff --git a/spx-gui/src/components/tutorials/TutorialStateIndicator.vue b/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
index 0f03af7f1..dd1c001f2 100644
--- a/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
+++ b/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
@@ -27,7 +27,7 @@ const { fn: handleExitTutorial } = useMessageHandle(
   <UIDropdownWithTooltip placement="top">
     <template #trigger>
       <div
-        class="flex h-7 w-13 cursor-pointer items-center justify-center gap-1 rounded-full bg-primary-200 hover:bg-primary-300"
+        class="h-7 w-13 cursor-pointer flex items-center justify-center gap-1 rounded-full bg-primary-200 hover:bg-primary-300"
       >
         <UIIcon class="text-primary-main" type="tutorial" />
         <UIIcon class="w-2.5 h-2.5 rotate-180 text-primary-main" type="arrowAlt" />
diff --git a/spx-gui/src/pages/404/index.vue b/spx-gui/src/pages/404/index.vue
index cfee3c308..0f47f9f23 100644
--- a/spx-gui/src/pages/404/index.vue
+++ b/spx-gui/src/pages/404/index.vue
@@ -12,10 +12,10 @@ const router = useRouter()
 <template>
   <div
     v-radar="{ name: '404 page', desc: 'Displayed when a page is not found' }"
-    class="bg-grey-200 flex h-full flex-col"
+    class="bg-grey-200 h-full flex flex-col"
   >
     <CommunityNavbar />
-    <div class="flex w-full flex-1 flex-col items-center justify-center gap-4">
+    <div class="w-full flex-1 flex flex-col items-center justify-center gap-4">
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div v-html="errorSvg"></div>
       <p class="text-20 text-grey-1000 font-semibold">
diff --git a/spx-gui/src/pages/community/explore.vue b/spx-gui/src/pages/community/explore.vue
index 0a51e5127..07b894661 100644
--- a/spx-gui/src/pages/community/explore.vue
+++ b/spx-gui/src/pages/community/explore.vue
@@ -15,7 +15,7 @@
       </UIChipRadioGroup>
     </template>
   </CommunityHeader>
-  <CenteredWrapper class="flex flex-1 flex-col gap-5 py-5">
+  <CenteredWrapper class="flex-[1_1_0] flex flex-col gap-5 py-5">
     <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet">
       <ul class="flex flex-wrap content-start gap-5">
         <ProjectItem v-for="project in slotProps.data" :key="project.id" :project="project" />
diff --git a/spx-gui/src/pages/community/index.vue b/spx-gui/src/pages/community/index.vue
index e794ff9d0..672e9d09c 100644
--- a/spx-gui/src/pages/community/index.vue
+++ b/spx-gui/src/pages/community/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-grey-300 flex h-full w-full flex-col overflow-y-auto">
+  <div class="bg-grey-300 h-full w-full flex flex-col overflow-y-auto">
     <CommunityNavbar />
     <router-view />
     <CommunityFooter />
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index c25161d52..5280309e8 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -363,7 +363,7 @@ const remixesRet = useQuery(
   <CenteredWrapper size="large">
     <CommunityCard
       v-radar="{ name: 'Project content', desc: 'Main content area for project details and runner' }"
-      class="relative mt-6 flex flex-none gap-10 bg-grey-100 p-5"
+      class="relative mt-6 flex-none flex gap-10 bg-grey-100 p-5"
     >
       <UILoading v-if="isLoading" cover mask="solid" />
       <UIError v-else-if="error != null" class="error" :retry="reloadProject">
@@ -393,9 +393,9 @@ const remixesRet = useQuery(
                     class="absolute inset-0 z-2 flex items-center justify-center rounded-2 bg-[rgba(36,41,47,0.6)] backdrop-blur-[5px]"
                   >
                     <template v-if="runnerState === 'initial'">
-                      <div v-if="needsSignInToRun" class="flex h-full w-full items-center justify-center p-6">
+                      <div v-if="needsSignInToRun" class="h-full w-full flex items-center justify-center p-6">
                         <div
-                          class="relative flex w-85 flex-col items-center overflow-visible rounded-[16px] bg-grey-100 px-6 pt-17 pb-6 text-center"
+                          class="relative w-85 flex flex-col items-center overflow-visible rounded-[16px] bg-grey-100 px-6 pt-17 pb-6 text-center"
                           style="box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1)"
                         >
                           <!-- eslint-disable-next-line vue/no-v-html -->
@@ -487,7 +487,7 @@ const remixesRet = useQuery(
           </UITooltip>
         </div>
       </div>
-      <div class="right flex min-w-0 flex-[1_1_456px] flex-col pr-5">
+      <div class="right flex-[1_1_456px] min-w-0 flex flex-col pr-5">
         <template v-if="project != null">
           <h2 class="text-20/[1.4] text-title break-all">{{ project.displayName }}</h2>
           <RemixedFrom v-if="project.remixedFrom != null" class="mt-2" :remixed-from="project.remixedFrom" />
diff --git a/spx-gui/src/pages/community/search.vue b/spx-gui/src/pages/community/search.vue
index c8d9601d4..04c1c6fc3 100644
--- a/spx-gui/src/pages/community/search.vue
+++ b/spx-gui/src/pages/community/search.vue
@@ -52,7 +52,7 @@
     </ListResultWrapper>
     <footer
       v-show="pageTotal > 1"
-      class="flex flex-[0_0_56px] w-full items-center justify-center rounded-2 border border-grey-400 bg-grey-100"
+      class="flex-[0_0_56px] w-full flex items-center justify-center rounded-2 border border-grey-400 bg-grey-100"
     >
       <UIPagination v-model:current="page" :total="pageTotal" />
     </footer>
diff --git a/spx-gui/src/pages/community/user/index.vue b/spx-gui/src/pages/community/user/index.vue
index 42106acff..ec2c29d8c 100644
--- a/spx-gui/src/pages/community/user/index.vue
+++ b/spx-gui/src/pages/community/user/index.vue
@@ -29,15 +29,15 @@ watch(user, (currentUser) => {
 </script>
 
 <template>
-  <CenteredWrapper class="flex flex-[1_0_auto] flex-col gap-5 pt-6 pb-10" size="large">
-    <UIError v-if="error != null" class="flex flex-[1_1_0] rounded-2 bg-grey-100" :retry="refetch">
+  <CenteredWrapper class="flex-[1_0_auto] flex flex-col gap-5 pt-6 pb-10" size="large">
+    <UIError v-if="error != null" class="flex-[1_1_0] flex rounded-2 bg-grey-100" :retry="refetch">
       {{ $t(error.userMessage) }}
     </UIError>
     <template v-else-if="user != null">
       <UserHeader :user="user" />
       <div class="flex items-start gap-5">
         <UserSidebar class="flex-none" :username="user.username" />
-        <div class="min-w-0 flex-[1_1_0]">
+        <div class="flex-[1_1_0] min-w-0">
           <router-view />
         </div>
       </div>
diff --git a/spx-gui/src/pages/docs/ui-design.vue b/spx-gui/src/pages/docs/ui-design.vue
index de9923d7d..4b3e10aae 100644
--- a/spx-gui/src/pages/docs/ui-design.vue
+++ b/spx-gui/src/pages/docs/ui-design.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full w-full flex-col overflow-y-auto bg-grey-500">
+  <div class="h-full w-full flex flex-col overflow-y-auto bg-grey-500">
     <CommunityNavbar />
 
     <CenteredWrapper class="my-7.5 flex flex-col gap-8">
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index ef1864668..32ce67a18 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -1,6 +1,6 @@
 <!-- TODO: review root background color and promote it to a shared UI token if it becomes reused. -->
 <template>
-  <section class="flex min-h-full w-full flex-col bg-[#e9fcff]">
+  <section class="min-h-full w-full flex flex-col bg-[#e9fcff]">
     <header class="flex-none">
       <EditorNavbar :project="state?.project ?? null" :state="state" />
     </header>
diff --git a/spx-gui/src/pages/sign-in/callback.vue b/spx-gui/src/pages/sign-in/callback.vue
index b1272c482..6b35c66c0 100644
--- a/spx-gui/src/pages/sign-in/callback.vue
+++ b/spx-gui/src/pages/sign-in/callback.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-screen items-center justify-center">
+  <div class="h-screen flex items-center justify-center">
     <h4>{{ $t(title) }}</h4>
   </div>
 </template>
diff --git a/spx-gui/src/pages/sign-in/token.vue b/spx-gui/src/pages/sign-in/token.vue
index d45bd4140..865dec5b5 100644
--- a/spx-gui/src/pages/sign-in/token.vue
+++ b/spx-gui/src/pages/sign-in/token.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex h-full w-full items-center justify-center">
-    <UIForm class="flex w-80 flex-col" :form="form" @submit="handleSubmit.fn">
+  <div class="h-full w-full flex items-center justify-center">
+    <UIForm class="w-80 flex flex-col" :form="form" @submit="handleSubmit.fn">
       <h1 class="mb-4 text-center text-16">{{ $t(title) }}</h1>
       <UIFormItem path="token">
         <UITextInput
diff --git a/spx-gui/src/pages/tutorials/course-series.vue b/spx-gui/src/pages/tutorials/course-series.vue
index 0775d26a7..a8f2acc51 100644
--- a/spx-gui/src/pages/tutorials/course-series.vue
+++ b/spx-gui/src/pages/tutorials/course-series.vue
@@ -98,7 +98,7 @@ const { fn: handleCourseClick } = useMessageHandle(
 </script>
 
 <template>
-  <div class="flex h-full w-full flex-col overflow-y-auto bg-grey-300">
+  <div class="h-full w-full flex flex-col overflow-y-auto bg-grey-300">
     <!-- TODO: Temporarily import the community component -->
     <CommunityNavbar />
 
@@ -109,12 +109,12 @@ const { fn: handleCourseClick } = useMessageHandle(
           {{ $t(courseSeriesError.userMessage) }}
         </UIError>
         <div
-          class="aspect-[1.08] flex-[1_1_200px] overflow-hidden rounded-3 bg-center bg-cover"
+          class="flex-[1_1_200px] aspect-[1.08] overflow-hidden rounded-3 bg-center bg-cover"
           :style="{ backgroundImage: `url(${stageBg})` }"
         >
           <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
         </div>
-        <div class="mr-5 flex flex-[1_1_1000px] flex-col gap-5 overflow-hidden">
+        <div class="flex-[1_1_1000px] mr-5 flex flex-col gap-5 overflow-hidden">
           <template v-if="courseSeries != null">
             <h2 class="overflow-hidden text-20/7 whitespace-nowrap text-ellipsis text-grey-1000">
               {{ courseSeries.title }}
@@ -125,7 +125,7 @@ const { fn: handleCourseClick } = useMessageHandle(
                 name: 'Course series details',
                 desc: 'Course series description'
               }"
-              class="flex-1 overflow-auto"
+              class="flex-[1_1_0] overflow-auto"
             >
               <TextView
                 :text="courseSeries.description"
diff --git a/spx-gui/src/pages/tutorials/course-start.vue b/spx-gui/src/pages/tutorials/course-start.vue
index 6bf0d50ea..789e98206 100644
--- a/spx-gui/src/pages/tutorials/course-start.vue
+++ b/spx-gui/src/pages/tutorials/course-start.vue
@@ -37,7 +37,7 @@ const allQueryRet = useQuery(
 </script>
 
 <template>
-  <section class="flex h-full w-full items-center justify-center">
+  <section class="h-full w-full flex items-center justify-center">
     <UIDetailedLoading v-if="allQueryRet.isLoading.value" :percentage="allQueryRet.progress.value.percentage">
       <span>{{ $t(allQueryRet.progress.value.desc ?? { zh: '跳转中...', en: 'Redirecting...' }) }}</span>
     </UIDetailedLoading>
diff --git a/spx-gui/src/pages/tutorials/index.vue b/spx-gui/src/pages/tutorials/index.vue
index 1fdd094fc..7c7a6018f 100644
--- a/spx-gui/src/pages/tutorials/index.vue
+++ b/spx-gui/src/pages/tutorials/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-grey-300 flex h-full w-full flex-col overflow-y-auto">
+  <div class="bg-grey-300 h-full w-full flex flex-col overflow-y-auto">
     <!-- TODO: Temporarily import the community component -->
     <CommunityNavbar />
 
@@ -7,7 +7,7 @@
 
     <CenteredWrapper
       v-radar="{ name: 'Course series list', desc: 'Scroll to view the course series' }"
-      class="my-8 flex flex-1 flex-col items-center"
+      class="my-8 flex-1 flex flex-col items-center"
       :style="{ '--num-in-row': numInRow }"
     >
       <ListResultWrapper :query-ret="courseSeriesQuery" :height="height">

From f66966c789871e7e56468d2526ac480a1f5fc492 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Wed, 8 Apr 2026 15:28:26 +0800
Subject: [PATCH 15/29] fix: missing navbar background image

---
 spx-gui/src/components/navbar/NavbarWrapper.vue | 9 ++++++++-
 spx-gui/src/pages/tutorials/course-series.vue   | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/spx-gui/src/components/navbar/NavbarWrapper.vue b/spx-gui/src/components/navbar/NavbarWrapper.vue
index 3ca337b62..08d5884f5 100644
--- a/spx-gui/src/components/navbar/NavbarWrapper.vue
+++ b/spx-gui/src/components/navbar/NavbarWrapper.vue
@@ -2,7 +2,7 @@
   <nav
     v-radar="{ name: 'Navbar', desc: 'Top navigation bar' }"
     class="w-full flex justify-center bg-primary-main bg-center bg-repeat text-grey-100 shadow-diffusion"
-    :style="{ backgroundImage: `url(${bgUrl})` }"
+    :style="bgImgStyle"
   >
     <div
       class="h-12.5 flex items-stretch justify-between gap-3"
@@ -28,6 +28,13 @@ import bgUrl from './bg.svg'
 import NavbarLogo from './NavbarLogo.vue'
 import NavbarProfile from './NavbarProfile.vue'
 
+// Keep the quoted `url(...)` construction in script instead of the template.
+// This SVG may be inlined as a data URL, and its content contains `url(#...)`, which breaks
+// unquoted CSS `background-image: url(...)` values in the browser.
+const bgImgStyle = {
+  backgroundImage: `url("${bgUrl}")`
+}
+
 withDefaults(
   defineProps<{
     /**
diff --git a/spx-gui/src/pages/tutorials/course-series.vue b/spx-gui/src/pages/tutorials/course-series.vue
index a8f2acc51..7fa4ec648 100644
--- a/spx-gui/src/pages/tutorials/course-series.vue
+++ b/spx-gui/src/pages/tutorials/course-series.vue
@@ -109,7 +109,7 @@ const { fn: handleCourseClick } = useMessageHandle(
           {{ $t(courseSeriesError.userMessage) }}
         </UIError>
         <div
-          class="flex-[1_1_200px] aspect-[1.08] overflow-hidden rounded-3 bg-center bg-cover"
+          class="flex-[1_1_200px] aspect-[1.08] overflow-hidden rounded-3"
           :style="{ backgroundImage: `url(${stageBg})` }"
         >
           <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />

From 296ad01716fa2f36a2bc8c69784ed46329af5d67 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Wed, 8 Apr 2026 15:31:45 +0800
Subject: [PATCH 16/29] fix: css layer order messed up in split css chunk

---
 spx-gui/src/app.css                       | 3 +--
 spx-gui/src/components/ui/index.ts        | 6 ++++++
 spx-gui/src/components/ui/layer-order.css | 7 +++++++
 3 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 spx-gui/src/components/ui/layer-order.css

diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 604682220..8c52e7ab6 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -1,5 +1,4 @@
-@layer theme, base, components, utilities;
-
+@import './components/ui/layer-order.css';
 @import './components/ui/global.css';
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);
diff --git a/spx-gui/src/components/ui/index.ts b/spx-gui/src/components/ui/index.ts
index 1a5ec002c..76a760cc9 100644
--- a/spx-gui/src/components/ui/index.ts
+++ b/spx-gui/src/components/ui/index.ts
@@ -1,3 +1,9 @@
+// Keep the canonical layer order in this UI entry as well, because after a production
+// build these component styles are emitted into a split CSS chunk. Importing it here
+// ensures that chunk registers the layer order before any `@layer components` rules,
+// so `base` does not accidentally outrank `components` due to cross-chunk load order.
+import './layer-order.css'
+
 export { default as UIConfigProvider, useUIVariables, type Config } from './UIConfigProvider.vue'
 export { default as UICard } from './UICard.vue'
 export { default as UICardHeader } from './UICardHeader.vue'
diff --git a/spx-gui/src/components/ui/layer-order.css b/spx-gui/src/components/ui/layer-order.css
new file mode 100644
index 000000000..194f69a6f
--- /dev/null
+++ b/spx-gui/src/components/ui/layer-order.css
@@ -0,0 +1,7 @@
+/*
+ * Declare the canonical cascade layer order in every entry that can emit a split CSS chunk.
+ * In production, the UI library styles may be extracted before `app.css`; without this,
+ * a chunk that first introduces `@layer components` can make later `@layer base` rules win.
+ */
+@layer theme, base, components, utilities;
+

From 4be17fdfd393763450852fa50b9e4e51fecc308f Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Wed, 8 Apr 2026 16:44:40 +0800
Subject: [PATCH 17/29] fix: utilities not work for
 UITextInput/UIDivider/UIRadioGroup

---
 .../browser-check/BrowserVersionReminder.vue  |  1 -
 .../UpdateNotificationWrapper.vue             |  2 +-
 .../asset/gen/backdrop/BackdropGenModal.vue   |  4 +--
 .../asset/gen/common/LayoutWithPreview.vue    | 16 +++++++---
 .../common/param-settings/ParamSelector.vue   |  5 +--
 .../asset/gen/sprite/SpriteGenModal.vue       |  2 +-
 .../asset/library/AssetLibraryModal.vue       |  1 -
 .../AssetLibraryManagementModal.vue           |  2 +-
 .../community/user/AvatarZoomSlider.vue       |  2 +-
 .../management/ProjectReferencesInput.vue     |  1 -
 .../ui/input-helper/SpxKeyInput.vue           |  2 +-
 .../ui/input-helper/BooleanInput.vue          | 31 +++++++++++++------
 .../editor/map-editor/MapEditor.vue           |  2 +-
 .../editor/map-editor/SpritesPanel.vue        |  2 +-
 .../editor/panels/sprite/SpritesPanel.vue     |  2 +-
 spx-gui/src/components/ui/UIDivider.vue       | 11 ++-----
 spx-gui/src/components/ui/UITextInput.vue     |  1 +
 spx-gui/src/components/ui/layer-order.css     |  1 -
 spx-gui/src/pages/community/project.vue       |  2 +-
 spx-gui/src/pages/sign-in/token.vue           |  2 +-
 20 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue b/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue
index be6886cfb..d7370aea4 100644
--- a/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue
+++ b/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue
@@ -8,7 +8,6 @@
     @update:visible="visible = $event"
   >
     <div>{{ $t(content) }}</div>
-
     <footer class="mt-6 flex justify-end gap-3">
       <UIButton
         v-radar="{
diff --git a/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue b/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
index 0c6abc756..608403708 100644
--- a/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
+++ b/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
@@ -25,7 +25,7 @@
         {{ $t({ en: 'Reload now', zh: '立即刷新' }) }}
       </UIButton>
     </div>
-    <div class="min-h-0 flex-auto">
+    <div class="flex-auto min-h-0">
       <slot></slot>
     </div>
   </div>
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
index 18f403b29..562227ece 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
@@ -61,14 +61,14 @@ const handleModalClose = useMessageHandle(
     mask-closable
     @update:visible="handleModalClose"
   >
-    <header class="h-14 flex items-center justify-between border-b border-grey-400 px-6">
+    <header class="flex-none h-14 flex items-center justify-between border-b border-grey-400 px-6">
       <h2 class="text-16 text-title">{{ $t({ zh: '生成背景', en: 'Backdrop Generator' }) }}</h2>
       <UIModalClose class="close" @click="handleModalClose" />
     </header>
 
     <BackdropGenComp
       v-if="activeGen != null"
-      class="min-h-0 flex-[1_1_0]"
+      class="flex-[1_1_0] min-h-0"
       :gen="activeGen"
       library-search-enabled
       @resolved="emit('resolved', $event)"
diff --git a/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue b/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
index 34e42e72f..d494107b0 100644
--- a/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
+++ b/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
@@ -10,11 +10,8 @@ defineProps<{
 </script>
 
 <template>
-  <div
-    class="layout-with-preview flex-[1_1_0] min-w-0 flex items-stretch justify-center"
-    :class="{ 'has-preview': hasPreview }"
-  >
-    <section class="main-panel flex flex-col min-w-0 gap-6">
+  <div class="layout-with-preview" :class="{ 'has-preview': hasPreview }">
+    <section class="main-panel">
       <slot></slot>
     </section>
 
@@ -26,12 +23,21 @@ defineProps<{
 
 <style scoped>
 .layout-with-preview {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
   transition: gap 0.2s ease;
 }
 
 .main-panel {
   width: 584px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
   justify-content: center;
+  gap: 24px;
   transition-property: flex, width, padding;
   transition-duration: 0.2s;
   transition-timing-function: ease;
diff --git a/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue b/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
index e701e0ab0..6d95f1707 100644
--- a/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
+++ b/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
@@ -64,12 +64,13 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
           desc: `Click to select '${$t(name)}' (e.g., ${optionsText})`
         }"
         class="h-8 flex items-center justify-center gap-1 rounded-2 border border-grey-400 bg-grey-100 pr-2 pl-1 text-13/5 text-grey-900 cursor-pointer hover:bg-grey-300 disabled:cursor-not-allowed disabled:bg-grey-300 disabled:text-grey-600"
-        :class="[{ 'aspect-square px-0': iconOnly }]"
+        :class="{ 'aspect-square px-0': iconOnly }"
         :disabled="disabled"
       >
         <UIImg
           v-if="selectedItem.image != null"
-          :class="['h-6 w-6 rounded-[10px]', { 'opacity-40': disabled, 'disabled-like': disabled && showPlaceholder }]"
+          class="h-6 w-6 rounded-[10px]"
+          :class="{ 'opacity-40': disabled, 'disabled-like': disabled && showPlaceholder }"
           :src="selectedItem.image"
           size="cover"
         />
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
index 4400e76e9..141959755 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
@@ -87,7 +87,7 @@ const handleModalClose = useMessageHandle(
 
     <SpriteGenComp
       v-if="activeGen != null"
-      class="min-h-0 flex-[1_1_0]"
+      class="flex-[1_1_0] min-h-0"
       :gen="activeGen"
       library-search-enabled
       @collapse="handleGenCollapse"
diff --git a/spx-gui/src/components/asset/library/AssetLibraryModal.vue b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
index ddb1cafe6..686a7d993 100644
--- a/spx-gui/src/components/asset/library/AssetLibraryModal.vue
+++ b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
@@ -374,7 +374,6 @@ const title = computed(() => {
           >
             <UITextInput
               v-model:value="searchInput"
-              class="w-full"
               color="white"
               size="large"
               clearable
diff --git a/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue b/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
index f7bb7ad18..60cb75576 100644
--- a/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
+++ b/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
@@ -186,7 +186,7 @@ const handleRemove = useMessageHandle(
       <UITextInput
         v-model:value="searchInput"
         v-radar="{ name: 'Search input', desc: 'Input to search library assets' }"
-        class="w-80"
+        style="width: 320px"
         clearable
         :placeholder="$t({ en: 'Search', zh: '搜索' })"
         @keypress.enter="handleSearch"
diff --git a/spx-gui/src/components/community/user/AvatarZoomSlider.vue b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
index 446aba1a6..f89f7bf8f 100644
--- a/spx-gui/src/components/community/user/AvatarZoomSlider.vue
+++ b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
@@ -43,7 +43,7 @@ function handleValueUpdate(value: number) {
     </button>
 
     <UISlider
-      class="slider min-w-0 flex-[1_1_auto]"
+      class="slider flex-auto min-w-0"
       update-on="input"
       :min="props.min"
       :max="props.max"
diff --git a/spx-gui/src/components/course/management/ProjectReferencesInput.vue b/spx-gui/src/components/course/management/ProjectReferencesInput.vue
index 460a8cfe6..8aeb0ca75 100644
--- a/spx-gui/src/components/course/management/ProjectReferencesInput.vue
+++ b/spx-gui/src/components/course/management/ProjectReferencesInput.vue
@@ -82,7 +82,6 @@ function handleRemove(index: number) {
   <div class="flex flex-col gap-3">
     <UITextInput
       v-model:value="projectInput"
-      class="project-input"
       :placeholder="$t({ en: 'e.g., owner/project', zh: '例如：owner/project' })"
       :disabled="handleAdd.isLoading.value"
       @keypress.enter="handleAdd.fn"
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
index 37e12a01f..4731535c7 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
@@ -52,7 +52,7 @@ function handleKeyDown(e: KeyboardEvent) {
   <div class="flex self-stretch flex-col gap-1">
     <UITextInput
       v-radar="{ name: 'Key input', desc: 'Input field for detecting key press' }"
-      class="text-center"
+      style="text-align: center"
       :value="text"
       autofocus
       @keydown="handleKeyDown"
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
index 71a7fea74..c79f45448 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
@@ -28,23 +28,36 @@ const modelValue = computed({
 </script>
 
 <template>
-  <UIRadioGroup v-model:value="modelValue" class="flex self-stretch items-center gap-3 py-1.25">
-    <UIRadio
-      class="option h-8 flex-[1_1_0] flex items-center justify-center gap-0.5 rounded-2 border border-grey-400 transition-all"
-      value="true"
-    >
+  <UIRadioGroup v-model:value="modelValue" class="boolean-input">
+    <UIRadio class="option" value="true">
       <code>true</code>
     </UIRadio>
-    <UIRadio
-      class="option h-8 flex-[1_1_0] flex items-center justify-center gap-0.5 rounded-2 border border-grey-400 transition-all"
-      value="false"
-    >
+    <UIRadio class="option" value="false">
       <code>false</code>
     </UIRadio>
   </UIRadioGroup>
 </template>
 
 <style scoped>
+.boolean-input {
+  padding: 5px 0;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  gap: 12px;
+}
+
+.option {
+  flex: 1 1 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  height: 32px;
+  border-radius: 12px;
+  transition: 0.2s;
+  border: 1px solid var(--ui-color-grey-400);
+}
 .option.n-radio--checked {
   border: 1px solid var(--ui-color-primary-500);
 }
diff --git a/spx-gui/src/components/editor/map-editor/MapEditor.vue b/spx-gui/src/components/editor/map-editor/MapEditor.vue
index 0b4361bfc..99c9caa29 100644
--- a/spx-gui/src/components/editor/map-editor/MapEditor.vue
+++ b/spx-gui/src/components/editor/map-editor/MapEditor.vue
@@ -56,7 +56,7 @@ function handleSpriteSelect(sprite: Sprite | null) {
         <MapBasicConfig v-if="!collapsed" class="p-4" :project="project" />
       </UICard>
       <SpritesPanel
-        class="min-h-0 flex-[1_1_0]"
+        class="flex-auto min-h-0"
         :project="project"
         :selected-sprite="selectedSprite"
         @update:selected-sprite="handleSpriteSelect"
diff --git a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
index f6f4f0110..aee3326ab 100644
--- a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
@@ -86,7 +86,7 @@ const handleGenerate = useMessageHandle(
     class="relative flex flex-col"
     :style="cssVars"
   >
-    <PanelHeader :active="selectedSprite != null">
+    <PanelHeader class="flex-none" :active="selectedSprite != null">
       {{ $t({ en: 'Sprites', zh: '精灵' }) }}
       <template #add-options>
         <UIMenu>
diff --git a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
index 55654691a..49527d293 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
@@ -4,7 +4,7 @@
       v-radar="{ name: 'Sprites panel', desc: 'Panel for managing project sprites' }"
       class="h-full flex flex-col overflow-hidden"
     >
-      <PanelHeader :active="selectedSprite != null">
+      <PanelHeader class="flex-none" :active="selectedSprite != null">
         {{ $t({ en: 'Sprites', zh: '精灵' }) }}
         <template #add-options>
           <UIMenu>
diff --git a/spx-gui/src/components/ui/UIDivider.vue b/spx-gui/src/components/ui/UIDivider.vue
index 731f00694..f9736cac6 100644
--- a/spx-gui/src/components/ui/UIDivider.vue
+++ b/spx-gui/src/components/ui/UIDivider.vue
@@ -1,5 +1,7 @@
 <template>
-  <NDivider class="ui-divider" :vertical="vertical" />
+  <div>
+    <NDivider style="margin: 0" :vertical="vertical" />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -14,10 +16,3 @@ withDefaults(
   }
 )
 </script>
-
-<style lang="scss" scoped>
-// When the root element is a naive-ui component, this cannot be placed in @layer components; otherwise, its styles will be overridden by naive-ui.
-.ui-divider {
-  margin: 0;
-}
-</style>
diff --git a/spx-gui/src/components/ui/UITextInput.vue b/spx-gui/src/components/ui/UITextInput.vue
index ab0745b5f..d59b54de1 100644
--- a/spx-gui/src/components/ui/UITextInput.vue
+++ b/spx-gui/src/components/ui/UITextInput.vue
@@ -1,3 +1,4 @@
+<!-- TODO: Wrap it with a native node ? -->
 <template>
   <NInput
     ref="nInput"
diff --git a/spx-gui/src/components/ui/layer-order.css b/spx-gui/src/components/ui/layer-order.css
index 194f69a6f..1bd35749b 100644
--- a/spx-gui/src/components/ui/layer-order.css
+++ b/spx-gui/src/components/ui/layer-order.css
@@ -4,4 +4,3 @@
  * a chunk that first introduces `@layer components` can make later `@layer base` rules win.
  */
 @layer theme, base, components, utilities;
-
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index 5280309e8..bde49d1c3 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -612,7 +612,7 @@ const remixesRet = useQuery(
               </UIButton>
             </template>
           </div>
-          <UIDivider style="margin: 24px 0 16px" />
+          <UIDivider class="mt-6 mb-4" />
           <UICollapse
             v-radar="{
               name: 'Project details',
diff --git a/spx-gui/src/pages/sign-in/token.vue b/spx-gui/src/pages/sign-in/token.vue
index 865dec5b5..00154f065 100644
--- a/spx-gui/src/pages/sign-in/token.vue
+++ b/spx-gui/src/pages/sign-in/token.vue
@@ -6,7 +6,7 @@
         <UITextInput
           v-model:value="form.value.token"
           v-radar="{ name: 'Token input', desc: 'Input field for authentication token' }"
-          class="h-40 justify-self-stretch"
+          style="justify-self: stretch; height: 160px"
           type="textarea"
           :placeholder="$t({ en: 'Paste token here', zh: '在此粘贴 Token' })"
         />

From 42113315bd10711f2b57179c5464e4849834d44d Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Thu, 9 Apr 2026 12:28:53 +0800
Subject: [PATCH 18/29] draft: vue 3+ tailwind 4 component guildelines

---
 spx-gui/vue-tailwind-component-guidelines.md | 763 +++++++++++++++++++
 1 file changed, 763 insertions(+)
 create mode 100644 spx-gui/vue-tailwind-component-guidelines.md

diff --git a/spx-gui/vue-tailwind-component-guidelines.md b/spx-gui/vue-tailwind-component-guidelines.md
new file mode 100644
index 000000000..f70602f93
--- /dev/null
+++ b/spx-gui/vue-tailwind-component-guidelines.md
@@ -0,0 +1,763 @@
+# Vue 3 + Tailwind 4 组件设计规范（草稿）
+
+> 适用范围：`spx-gui`
+>
+> 状态：Draft
+>
+> 目标：为后续基于 `Vue 3 + Tailwind 4` 的组件开发提供一套统一的设计和实现约定，分别覆盖 UI 组件与业务组件。
+
+## 1. 目标与边界
+
+本文档关注以下问题：
+
+- 在 `Vue 3 + Tailwind 4` 中，组件应该如何划分职责。
+- 父组件传 `class` 给子组件时，哪些场景应该支持，哪些场景不应该依赖。
+- UI 组件与业务组件分别应该如何暴露样式定制能力。
+- 什么时候优先用 Tailwind utility，什么时候保留少量本地 CSS。
+
+本文档**不**要求兼容当前临时 UI 组件库的实现风格；以长期最佳实践为主，同时给出可接受的备选方案。
+
+---
+
+## 2. 总体原则
+
+### 2.1 先分清组件类型
+
+项目中的组件先分成两类：
+
+1. **UI 组件**
+   - 通用、可复用、偏设计系统能力。
+   - 例如：`Button`、`Input`、`Dialog`、`Tabs`、`Popover`、`Badge`。
+
+2. **业务组件**
+   - 面向具体业务场景，包含页面语义、数据结构或交互流程。
+   - 例如：`ProjectCard`、`SpriteListPanel`、`TutorialChapterSidebar`、`ProjectPublishDialogContent`。
+
+这两类组件最重要的区别不是“长得像不像 UI”，而是：
+
+- **UI 组件**优先提供稳定的抽象能力。
+- **业务组件**优先表达业务语义与页面结构。
+
+---
+
+### 2.2 不要把 utility 冲突顺序当成组件契约
+
+在 `Tailwind 4` 中，如果两个 utility 都命中了同一个 CSS 属性，最终谁生效，通常取决于：
+
+- specificity
+- layer
+- Tailwind 生成的 CSS rule 顺序
+- 是否使用了 `!important`
+
+**不要**把以下写法当成可靠契约：
+
+```vue
+<Child class="px-2" />
+```
+
+去覆盖子组件内部：
+
+```vue
+class="px-4"
+```
+
+原因是：**HTML `class` 字符串顺序本身不是稳定 API。**
+
+结论：
+
+- 不要依赖“父组件传的 utility 总能覆盖子组件默认 utility”。
+- 如果要支持覆盖，应当通过明确 API 或显式合并策略实现。
+
+---
+
+### 2.3 父组件管布局，子组件管外观
+
+这是默认规则：
+
+- **父组件负责布局**：间距、宽高占位、栅格位置、排序、对齐。
+- **子组件负责外观**：颜色、边框、圆角、内部间距、状态样式、动效。
+
+这条规则对两类组件都成立，但业务组件应执行得更严格。
+
+---
+
+### 2.4 优先暴露语义化 API，而不是样式漏洞
+
+当一个组件需要定制时，优先顺序建议如下：
+
+1. **语义化 props**
+2. **slots / scoped slots**
+3. **局部 class props**（例如 `headerClass`、`bodyClass`）
+4. **root `class` 透传**
+5. **依赖 utility 冲突覆盖**
+
+第 5 种不应作为正式约定。
+
+---
+
+### 2.5 默认使用 Tailwind；本地 CSS 保持少量且有理由
+
+默认规则：
+
+- 优先在模板中直接使用 Tailwind utility。
+- 优先使用项目已有的语义 token，例如 `text-text`、`text-title`、`bg-primary-100`。
+- 当以下场景出现时，可保留少量本地 CSS：
+  - `:deep(...)`
+  - 生成内容
+  - 第三方 DOM 覆盖
+  - 难以阅读的结构性选择器
+  - 多节点共享且较复杂的状态样式
+
+如果本地样式只服务于一两个节点，优先直接写在模板里，而不是额外抽一层 `@apply`。
+
+---
+
+## 3. UI 组件规范
+
+## 3.1 UI 组件的目标
+
+UI 组件的主要目标是：
+
+- 为产品提供稳定、可组合的视觉原语。
+- 隐藏实现细节，暴露明确、一致、可预测的 API。
+- 尽量减少业务上下文对组件内部结构的依赖。
+
+UI 组件不是页面片段，也不应承载太多业务判断。
+
+---
+
+## 3.2 UI 组件推荐的公开能力
+
+UI 组件推荐优先暴露以下能力：
+
+### 3.2.1 语义化变体 props
+
+优先用 props 表达稳定的视觉变体，而不是让外部自由覆盖内部样式。
+
+常见 props：
+
+- `size`: `small | medium | large`
+- `tone` / `color`: `primary | secondary | danger | success | neutral`
+- `variant`: `solid | soft | outline | ghost | link`
+- `shape`: `square | rounded | pill | circle`
+- `loading`
+- `disabled`
+- `block`
+
+示例：
+
+```vue
+<UIButton variant="solid" color="primary" size="medium" />
+```
+
+而不是：
+
+```vue
+<UIButton class="h-8 rounded-md bg-primary-main px-4 text-white" />
+```
+
+---
+
+### 3.2.2 slots
+
+当定制内容结构比定制样式更重要时，优先用 slot。
+
+例如：
+
+- `icon`
+- `prefix`
+- `suffix`
+- `title`
+- `description`
+- `actions`
+
+slot 是内容扩展点，不是样式逃生口。
+
+---
+
+### 3.2.3 少量、明确的局部 class props（可选）
+
+如果某个 UI 组件天然有稳定分区，且确实需要在少量场景下开放布局扩展，可以提供少量局部 class props，例如：
+
+- `rootClass`
+- `contentClass`
+- `iconClass`
+- `labelClass`
+
+但要注意：
+
+- 这类 API 是显式扩展点，必须文档化。
+- 不要一次性暴露太多位置；只开放真正稳定的区域。
+- 默认仍然以 props 和 slots 为主。
+
+---
+
+## 3.3 UI 组件的样式归属
+
+### 推荐做法
+
+- 组件自身的视觉样式由组件内部定义。
+- 外部调用方**默认不应**依赖 root `class` 去覆盖内部的颜色、圆角、padding、边框等基础视觉样式。
+- 组件的主视觉变体必须通过 props 控制。
+
+### 为什么
+
+因为 UI 组件属于公共抽象层。如果允许外部任意覆盖内部样式：
+
+- 会破坏组件库的一致性。
+- 会让组件难以重构。
+- 会让调用方依赖内部 DOM 和类名布局。
+
+---
+
+## 3.4 UI 组件对 root `class` 的默认策略
+
+### 默认推荐：仅支持布局扩展，不承诺视觉覆盖
+
+推荐把 root `class` 视为：
+
+- 页面布局用途
+- 容器摆放用途
+- 外层 spacing / sizing 用途
+
+例如：
+
+```vue
+<UIButton class="w-full self-start" />
+```
+
+这是合理的。
+
+但以下不应作为组件契约：
+
+```vue
+<UIButton class="rounded-none bg-red-500 px-2" />
+```
+
+如果产品确实需要这些变化，应当为它们补充语义化 props。
+
+---
+
+## 3.5 UI 组件的两种实现模式
+
+### 模式 A：严格型 UI 组件（默认推荐）
+
+适合：基础组件、设计系统组件、需要稳定一致性的组件。
+
+特点：
+
+- 变体全部由 props 定义。
+- root `class` 只用于布局扩展。
+- 不承诺通过外部 utility 覆盖内部 utility。
+- 内部结构尽量稳定，局部扩展点有限。
+
+这是**首选模式**。
+
+### 模式 B：可扩展型 UI 组件（备选）
+
+适合：容器类基础组件、需要被多个页面轻度定制的组件，例如 `Card`、`Panel`、`EmptyState`。
+
+特点：
+
+- 除 props 外，允许少量局部 `class` 扩展。
+- 需要显式声明哪些位置允许定制。
+- 如果要支持 utility 冲突覆盖，组件内部必须自己做 class 合并，而不是依赖 Vue 自动 fallthrough 的最终效果。
+
+这种模式是**有成本的扩展模式**，不应成为所有 UI 组件的默认形态。
+
+---
+
+## 3.6 如果 UI 组件确实要支持 class 覆盖
+
+如果某些组件确实希望让调用方覆写一部分 utility，建议遵循以下约定：
+
+1. 不要把“是否能覆盖成功”交给 Tailwind rule 顺序碰运气。
+2. 明确哪些位置可覆盖，例如 `rootClass`、`contentClass`。
+3. 在组件内部显式合并 class。
+4. 如果引入专门的 class merge 工具，应统一选型并在项目内共用。
+
+推荐的可选技术方案：
+
+- `clsx`：负责条件拼接。
+- `tailwind-merge`：负责冲突 utility 去重。
+- 项目内封装一个统一的 `cn()` / `mergeClassNames()` 辅助方法。
+
+示例：
+
+```ts
+import { twMerge } from 'tailwind-merge'
+
+function cn(...values: Array<string | false | null>) {
+  return twMerge(values.filter((value) => value != null && value !== false).join(' '))
+}
+```
+
+然后在组件中显式控制：
+
+```vue
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+
+const rootClass = computed(() => {
+  return cn(
+    'inline-flex items-center justify-center rounded-2 text-body',
+    'bg-primary-main text-white',
+    attrs.class as string | null
+  )
+})
+</script>
+
+<template>
+  <button v-bind="{ ...attrs, class: null }" :class="rootClass">
+    <slot />
+  </button>
+</template>
+```
+
+注意：
+
+- 这是**显式开放覆盖能力**，不是默认行为。
+- 一旦开放，就要把它写进文档，并长期维护。
+
+---
+
+## 3.7 UI 组件推荐的结构约定
+
+### 推荐
+
+- 公共状态尽量暴露为 props：`disabled`、`loading`、`active`、`selected` 等。
+- DOM 状态尽量通过语义属性表达：
+  - `disabled`
+  - `aria-*`
+  - `data-state`
+  - `data-selected`
+  - `data-loading`
+- 当样式依赖组件内部状态时，优先让模板直接表达，而不是隐藏到复杂选择器里。
+
+示例：
+
+```vue
+<button
+  :data-loading="loading || null"
+  :disabled="disabled || loading"
+  class="inline-flex items-center justify-center rounded-2 px-4 py-2 text-body transition"
+  :class="[
+    variant === 'solid' && 'bg-primary-main text-white',
+    variant === 'outline' && 'border border-border bg-white text-text',
+    disabled && 'cursor-not-allowed opacity-50'
+  ]"
+>
+  <slot />
+</button>
+```
+
+---
+
+## 3.8 UI 组件评审标准
+
+评审 UI 组件时，重点检查：
+
+- 是否把主视觉变体暴露成了 props。
+- 是否错误依赖了外部 root `class` 覆盖内部视觉样式。
+- 是否为长期稳定的内部区域提供了明确扩展点。
+- 是否保持了可访问性属性与交互语义。
+- 是否使用了语义 token，而不是硬编码产品色值。
+
+---
+
+## 4. 业务组件规范
+
+## 4.1 业务组件的目标
+
+业务组件的主要目标是：
+
+- 表达一个具体业务场景的结构和语义。
+- 降低页面复杂度，提高业务逻辑可读性。
+- 让页面装配清晰，而不是追求高度通用。
+
+业务组件不是小型 UI 库；不要为了“可复用”而过度抽象。
+
+---
+
+## 4.2 业务组件的默认样式策略
+
+### 默认推荐：父组件控制布局，业务组件自己控制视觉
+
+业务组件默认遵循以下分工：
+
+- 父组件通过 root `class` 控制布局：
+  - `mt-*`
+  - `w-*`
+  - `flex-*`
+  - `grid-*`
+  - `self-*`
+  - `order-*`
+- 业务组件内部控制自己的视觉和内部结构：
+  - 背景
+  - 内边距
+  - 标题层级
+  - 信息层次
+  - 状态色
+  - 内部块之间的间距
+
+这条规则比 UI 组件更重要，因为业务组件更容易和具体 DOM 结构耦合。
+
+---
+
+## 4.3 业务组件推荐的公开能力顺序
+
+业务组件对外的定制能力推荐按以下顺序设计：
+
+1. **业务语义 props**
+2. **slots**
+3. **少量局部 class props**
+4. **root `class` 用于布局**
+
+### 4.3.1 优先暴露业务语义 props
+
+例如：
+
+- `status`
+- `readonly`
+- `collapsed`
+- `highlighted`
+- `editable`
+- `showActions`
+- `dense`
+
+推荐：
+
+```vue
+<ProjectCard status="draft" highlighted />
+```
+
+不推荐：
+
+```vue
+<ProjectCard class="border-yellow-400 bg-yellow-50" />
+```
+
+后者没有表达业务意图，只是暴露了某个视觉实现。
+
+---
+
+### 4.3.2 需要改内容结构时，用 slots
+
+例如一个业务面板：
+
+- 标题区域
+- 描述区域
+- 操作区域
+- 空状态区域
+
+这类定制应优先用 slots，而不是让父组件猜测内部 DOM 结构。
+
+---
+
+### 4.3.3 需要改局部布局时，用局部 class props
+
+当业务组件内部确实有稳定区域，且父组件需要补充少量局部布局时，可以开放：
+
+- `headerClass`
+- `bodyClass`
+- `actionsClass`
+- `listClass`
+
+例如：
+
+```vue
+<ProjectCardList bodyClass="max-h-80 overflow-auto" />
+```
+
+这种做法比只给一个 root `class` 更可控。
+
+---
+
+## 4.4 业务组件对 root `class` 的推荐策略
+
+### 推荐：支持 root `class`，但仅作为外部布局接口
+
+业务组件通常应该允许这样使用：
+
+```vue
+<ProjectCard class="mt-4 w-full desktop:w-[420px]" />
+```
+
+因为父组件确实需要决定它在页面中的摆放方式。
+
+但不推荐把以下能力当成正式契约：
+
+```vue
+<ProjectCard class="rounded-none bg-red-500 p-0 text-xs" />
+```
+
+如果某个业务组件频繁被这样使用，通常说明：
+
+- 这个组件还没抽出足够明确的语义 props；或
+- 这个组件的边界划分不对；或
+- 它其实更像一个 UI 容器组件，而不是业务组件。
+
+---
+
+## 4.5 业务组件推荐的两种实现模式
+
+### 模式 A：结构型业务组件（默认推荐）
+
+适合：绝大多数业务组件。
+
+特点：
+
+- 组件对外表达业务语义。
+- 页面传入数据与业务状态。
+- root `class` 只处理外部布局。
+- 内部视觉由组件自己定义。
+- 少量局部扩展通过 slot 或局部 class prop 提供。
+
+这是默认首选。
+
+### 模式 B：页面级壳组件（备选）
+
+适合：更接近页面片段、布局容器、一次性组合组件。
+
+特点：
+
+- 可以更自由地接收 root `class`。
+- 可以把更多布局责任留给父层。
+- 复用性不是首要目标。
+
+如果组件只在一个页面或一个流程里使用，不必强行把它做成“严格业务组件”。
+
+---
+
+## 4.6 什么时候不应该再抽业务组件
+
+当一个片段满足以下条件时，可以先保持在页面内，而不是急着抽组件：
+
+- 只会在一个页面使用。
+- 业务语义还没稳定。
+- 结构变化很快。
+- 抽出来后，props 和 slots 反而比模板本身更难懂。
+
+建议：
+
+- 页面内先用小范围的 Tailwind 模板表达。
+- 等结构稳定后再抽成业务组件。
+
+---
+
+## 4.7 业务组件推荐示例
+
+### 推荐
+
+```vue
+<ProjectCard
+  :project="project"
+  :highlighted="project.id === selectedProjectId"
+  class="w-full desktop:w-[360px]"
+  bodyClass="min-h-48"
+>
+  <template #actions>
+    <UIButton size="small">Open</UIButton>
+  </template>
+</ProjectCard>
+```
+
+这里：
+
+- `highlighted` 是业务语义。
+- root `class` 只负责摆放宽度。
+- `bodyClass` 是局部稳定扩展点。
+- `actions` 用 slot 表达内容扩展。
+
+### 不推荐
+
+```vue
+<ProjectCard
+  :project="project"
+  class="w-full rounded-none border-red-500 bg-red-50 p-0 [&_.title]:text-xs"
+/>
+```
+
+问题：
+
+- 父组件直接接管了子组件外观。
+- 依赖内部 DOM 结构。
+- 未来重构成本很高。
+
+---
+
+## 5. 选型建议：什么时候选哪种模式
+
+| 场景 | 推荐方案 |
+| --- | --- |
+| 基础按钮、输入框、标签、菜单等 | 严格型 UI 组件 |
+| 通用卡片、空状态、面板等基础容器 | 可扩展型 UI 组件 |
+| 项目卡片、资源列表、教程侧栏等业务结构 | 结构型业务组件 |
+| 页面内一次性布局块 | 页面级壳组件或直接留在页面 |
+
+---
+
+## 6. 关于 root `class` 的统一约定
+
+建议团队统一采用下面这套规则：
+
+### 6.1 UI 组件
+
+- 默认允许 root `class` 透传。
+- 但只把它视为**布局扩展接口**。
+- 不承诺用它覆盖内部主视觉样式。
+- 如果某个 UI 组件需要开放覆写能力，应显式定义 `rootClass` / `contentClass` 等 API，并在内部完成合并。
+
+### 6.2 业务组件
+
+- 默认允许 root `class` 透传。
+- 将其视为**父层布局控制接口**。
+- 不鼓励通过它控制业务组件内部视觉风格。
+- 内部视觉差异优先由业务语义 props 表达。
+
+---
+
+## 7. 推荐的开发流程
+
+### 7.1 开始写组件前，先回答 4 个问题
+
+1. 这是 UI 组件还是业务组件？
+2. 谁拥有这个组件的视觉定义：组件自己，还是调用方？
+3. 调用方真正要定制的是布局、视觉变体，还是内部某个分区？
+4. 这个定制点应该暴露成 props、slots，还是局部 class prop？
+
+如果这 4 个问题没想清楚，通常会很快走向“所有东西都靠 `class` 传”。
+
+---
+
+### 7.2 推荐的 API 设计顺序
+
+1. 先定义组件职责。
+2. 再定义必要的语义 props。
+3. 再定义内容 slots。
+4. 最后才考虑是否需要 class 扩展点。
+
+不要倒过来：先给一个 `class`，再让调用方自己拼出所有语义。
+
+---
+
+## 8. 常见反模式
+
+### 8.1 把 root `class` 当作万能扩展口
+
+表现：
+
+- 调用方通过一长串 utility 改掉组件几乎所有视觉规则。
+- 子组件是否还能“被覆盖”取决于 Tailwind 生成顺序。
+
+问题：
+
+- API 不稳定。
+- 难以维护。
+- 组件重构风险大。
+
+---
+
+### 8.2 业务组件过度组件库化
+
+表现：
+
+- 本来是一个页面私有块，却设计了大量通用 props。
+- 为了“以后可能复用”提前暴露很多抽象。
+
+问题：
+
+- API 复杂度上升。
+- 真实语义反而变弱。
+
+---
+
+### 8.3 只给一个大而全的 `class`，不给语义 props
+
+表现：
+
+- `class` 既负责布局，又负责视觉，又负责局部结构。
+
+问题：
+
+- 组件边界不清楚。
+- 调用代码读不出业务意图。
+
+---
+
+### 8.4 为了复用强行抽复杂 `@apply` 层
+
+表现：
+
+- 一个组件只有一两个节点，却把大量 utility 挪到本地 `@apply`。
+
+问题：
+
+- 跳转成本变高。
+- 维护时看不到真实样式。
+
+建议：
+
+- 单点样式优先保留在模板中。
+- 只有在复用、结构选择器或可读性确实更好时，才抽本地样式。
+
+---
+
+## 9. 评审清单
+
+提交组件代码时，建议按以下清单自查：
+
+### 9.1 通用
+
+- [ ] 组件类型判断是否正确：UI 组件还是业务组件？
+- [ ] 是否优先使用了语义 token，而不是临时色值？
+- [ ] 是否避免把 utility 冲突顺序当成 API？
+- [ ] 是否只在有明确理由时保留本地 CSS？
+
+### 9.2 UI 组件
+
+- [ ] 主视觉差异是否通过 props 暴露？
+- [ ] slots 是否只承担内容扩展，而不是样式逃生口？
+- [ ] 如果开放 class 覆盖，是否是显式、文档化、内部可控的？
+- [ ] root `class` 是否只作为布局扩展约定？
+
+### 9.3 业务组件
+
+- [ ] root `class` 是否只承担外部布局？
+- [ ] 视觉差异是否通过业务语义 props 表达？
+- [ ] 是否避免父组件依赖子组件内部 DOM 结构？
+- [ ] 如果需要局部定制，是否优先用了 slot 或局部 class prop？
+
+---
+
+## 10. 推荐的默认结论
+
+如果没有更强理由，建议采用以下默认策略：
+
+### UI 组件
+
+- **默认使用严格型 UI 组件模式。**
+- 主视觉变体走 props。
+- root `class` 只负责布局扩展。
+- 不承诺外部 utility 覆盖内部 utility。
+
+### 业务组件
+
+- **默认使用结构型业务组件模式。**
+- 父组件负责布局。
+- 业务组件负责视觉和结构。
+- 定制优先用业务 props、slots、局部 class prop。
+
+这套默认策略的核心目标是：
+
+- API 稳定
+- 职责清晰
+- 组件可重构
+- 页面代码仍然保持 Tailwind 的开发效率
+

From 839a15fc2cbf2c3c6d96793627dca833d7c38ced Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Thu, 9 Apr 2026 21:47:20 +0800
Subject: [PATCH 19/29] migrate UIButton to recipe-based tailwind styling

---
 spx-gui/package-lock.json                     |  17 +-
 spx-gui/package.json                          |   1 +
 spx-gui/src/components/ui/UIButton.test.ts    |  81 ++
 spx-gui/src/components/ui/UIButton.vue        | 523 ++++++------
 spx-gui/src/components/ui/utils/cn.test.ts    |  15 +
 spx-gui/src/components/ui/utils/cn.ts         |  28 +
 .../components/ui/utils/create-recipe.test.ts |  54 ++
 .../src/components/ui/utils/create-recipe.ts  | 176 ++++
 spx-gui/src/components/ui/utils/index.ts      |  10 +
 spx-gui/vue-tailwind-component-guidelines.md  | 763 ------------------
 10 files changed, 651 insertions(+), 1017 deletions(-)
 create mode 100644 spx-gui/src/components/ui/UIButton.test.ts
 create mode 100644 spx-gui/src/components/ui/utils/cn.test.ts
 create mode 100644 spx-gui/src/components/ui/utils/cn.ts
 create mode 100644 spx-gui/src/components/ui/utils/create-recipe.test.ts
 create mode 100644 spx-gui/src/components/ui/utils/create-recipe.ts
 delete mode 100644 spx-gui/vue-tailwind-component-guidelines.md

diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index 4df41e105..aef42a1d5 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -59,6 +59,7 @@
         "scss": "^0.2.4",
         "shiki": "^3.2.2",
         "sortablejs": "^1.15.6",
+        "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.2",
         "typescript": "^5.9.3",
         "vite": "^8.0.0",
@@ -2077,6 +2078,16 @@
         "node": ">=20"
       }
     },
+    "node_modules/@scalar/use-hooks/node_modules/tailwind-merge": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
+      "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/@scalar/use-hooks/node_modules/zod": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.11.tgz",
@@ -8194,9 +8205,9 @@
       }
     },
     "node_modules/tailwind-merge": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
-      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
+      "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
       "license": "MIT",
       "funding": {
         "type": "github",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index c4497e54e..2af18f619 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -67,6 +67,7 @@
     "shiki": "^3.2.2",
     "sortablejs": "^1.15.6",
     "tailwindcss": "^4.2.2",
+    "tailwind-merge": "^3.5.0",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
     "vite-plugin-ejs": "^1.7.0",
diff --git a/spx-gui/src/components/ui/UIButton.test.ts b/spx-gui/src/components/ui/UIButton.test.ts
new file mode 100644
index 000000000..c95ff531b
--- /dev/null
+++ b/spx-gui/src/components/ui/UIButton.test.ts
@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest'
+
+import { buttonRecipe, resolveButtonCssVars } from './UIButton.vue'
+
+describe('buttonRecipe', () => {
+  it('uses the documented defaults', () => {
+    const classes = buttonRecipe()
+
+    expect(classes.root()).toContain('pb-1')
+    expect(classes.content()).toContain('bg-(--ui-button-bg-color)')
+    expect(classes.content()).toContain('text-(color:--ui-button-color)')
+    expect(classes.icon()).toContain('size-[14px]')
+  })
+
+  it('applies flat and stroke icon size overrides for medium and large buttons', () => {
+    expect(buttonRecipe({ variant: 'flat', size: 'medium' }).icon()).toContain('size-4')
+    expect(buttonRecipe({ variant: 'stroke', size: 'large' }).icon()).toContain('size-5')
+  })
+
+  it('applies loading and disabled compound variants', () => {
+    const loadingClasses = buttonRecipe({ variant: 'shadow', loading: true })
+    const disabledClasses = buttonRecipe({ variant: 'shadow', disabled: true, loading: false })
+
+    expect(loadingClasses.root()).toContain('pb-0')
+    expect(loadingClasses.content()).toContain('shadow-none')
+    expect(disabledClasses.root()).toContain('enabled:active:pb-0')
+    expect(disabledClasses.content()).toContain('bg-(--ui-button-bg-color)')
+  })
+
+  it('lets root extras stay at the layout layer', () => {
+    const classes = buttonRecipe({ iconOnly: true, shape: 'circle' })
+
+    expect(classes.root('w-full')).toContain('aspect-square')
+    expect(classes.root('w-full')).toContain('w-full')
+    expect(classes.content()).toContain('rounded-full')
+    expect(classes.content()).toContain('px-0')
+  })
+
+  it('merges external root classes with twMerge semantics', () => {
+    const classes = buttonRecipe({ size: 'medium', shape: 'square' })
+    const merged = classes.root(['mt-4 h-9 rounded-full'])
+
+    expect(merged).toContain('mt-4')
+    expect(merged).toContain('h-9')
+    expect(merged).toContain('rounded-full')
+    expect(merged).not.toContain('h-(--ui-line-height-2)')
+    expect(merged).not.toContain('rounded-2')
+  })
+
+  it('accepts booleans for boolean-like variants', () => {
+    expect(buttonRecipe({ loading: false, disabled: false }).root()).toContain('pb-1')
+    expect(buttonRecipe({ loading: true }).root()).toContain('pb-0')
+    expect(buttonRecipe({ iconOnly: true }).root()).toContain('aspect-square')
+  })
+
+  it('resolves button css vars directly for template styles', () => {
+    expect(resolveButtonCssVars({ color: 'primary', disabled: false, loading: false })).toEqual({
+      '--ui-button-color': 'var(--ui-color-grey-100)',
+      '--ui-button-bg-color': 'var(--ui-color-primary-main)',
+      '--ui-button-hover-bg-color': 'var(--ui-color-primary-400)',
+      '--ui-button-shadow-color': 'var(--ui-color-primary-700)',
+      '--ui-button-stroke-color': 'var(--ui-color-grey-400)'
+    })
+
+    expect(resolveButtonCssVars({ color: 'danger', disabled: true, loading: false })).toEqual({
+      '--ui-button-color': 'var(--ui-color-disabled-text)',
+      '--ui-button-bg-color': 'var(--ui-color-disabled-bg)',
+      '--ui-button-hover-bg-color': 'var(--ui-color-disabled-bg)',
+      '--ui-button-shadow-color': 'var(--ui-color-grey-500)',
+      '--ui-button-stroke-color': 'var(--ui-color-grey-400)'
+    })
+
+    expect(resolveButtonCssVars({ color: 'danger', disabled: true, loading: true })).toEqual({
+      '--ui-button-color': 'var(--ui-color-grey-100)',
+      '--ui-button-bg-color': 'var(--ui-color-danger-main)',
+      '--ui-button-hover-bg-color': 'var(--ui-color-danger-400)',
+      '--ui-button-shadow-color': 'var(--ui-color-danger-600)',
+      '--ui-button-stroke-color': 'var(--ui-color-grey-400)'
+    })
+  })
+})
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index ec4680eea..fc8a577ca 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -1,29 +1,6 @@
-<template>
-  <button
-    ref="btnRef"
-    class="ui-button"
-    :class="[
-      `variant-${variant}`,
-      `shape-${shape}`,
-      `color-${color}`,
-      `ui-button-size-${size}`,
-      loading && 'loading',
-      iconOnly && 'icon-only'
-    ]"
-    :disabled="disabled"
-    :type="htmlType"
-  >
-    <div class="content">
-      <UIIcon v-if="icon != null" class="icon" :type="icon" />
-      <slot v-else name="icon"></slot>
-      <slot></slot>
-    </div>
-  </button>
-</template>
+<script lang="ts">
+import { createRecipe, type ClassValue } from './utils'
 
-<script setup lang="ts">
-import { computed, ref, useSlots } from 'vue'
-import UIIcon, { type Type as IconType } from './icons/UIIcon.vue'
 export type ButtonColor =
   | 'primary'
   | 'secondary'
@@ -39,6 +16,222 @@ export type ButtonHtmlType = 'button' | 'submit' | 'reset'
 export type ButtonVariant = 'shadow' | 'flat' | 'stroke'
 export type ButtonShape = 'square' | 'circle'
 
+type ButtonCssVarState = {
+  color: ButtonColor
+  disabled: boolean
+  loading: boolean
+}
+
+type ButtonCssVars = {
+  '--ui-button-color': string
+  '--ui-button-bg-color': string
+  '--ui-button-hover-bg-color': string
+  '--ui-button-shadow-color': string
+  '--ui-button-stroke-color': string
+}
+
+function defineButtonCssVars(
+  color: string,
+  backgroundColor: string,
+  hoverBackgroundColor: string,
+  shadowColor: string,
+  strokeColor = 'var(--ui-color-grey-400)'
+): ButtonCssVars {
+  return {
+    '--ui-button-color': color,
+    '--ui-button-bg-color': backgroundColor,
+    '--ui-button-hover-bg-color': hoverBackgroundColor,
+    '--ui-button-shadow-color': shadowColor,
+    '--ui-button-stroke-color': strokeColor
+  }
+}
+
+const buttonColorVars: Record<ButtonColor, ButtonCssVars> = {
+  primary: defineButtonCssVars(
+    'var(--ui-color-grey-100)',
+    'var(--ui-color-primary-main)',
+    'var(--ui-color-primary-400)',
+    'var(--ui-color-primary-700)'
+  ),
+  secondary: defineButtonCssVars(
+    'var(--ui-color-primary-main)',
+    'var(--ui-color-primary-200)',
+    'var(--ui-color-primary-100)',
+    'var(--ui-color-primary-300)'
+  ),
+  boring: defineButtonCssVars(
+    'var(--ui-color-text)',
+    'var(--ui-color-grey-300)',
+    'var(--ui-color-grey-200)',
+    'var(--ui-color-grey-600)'
+  ),
+  white: defineButtonCssVars(
+    'var(--ui-color-text)',
+    'var(--ui-color-grey-100)',
+    'var(--ui-color-grey-300)',
+    'var(--ui-color-grey-400)'
+  ),
+  danger: defineButtonCssVars(
+    'var(--ui-color-grey-100)',
+    'var(--ui-color-danger-main)',
+    'var(--ui-color-danger-400)',
+    'var(--ui-color-danger-600)'
+  ),
+  success: defineButtonCssVars(
+    'var(--ui-color-grey-100)',
+    'var(--ui-color-success-main)',
+    'var(--ui-color-success-400)',
+    'var(--ui-color-success-600)'
+  ),
+  blue: defineButtonCssVars(
+    'var(--ui-color-grey-100)',
+    'var(--ui-color-blue-main)',
+    'var(--ui-color-blue-400)',
+    'var(--ui-color-blue-700)'
+  ),
+  purple: defineButtonCssVars(
+    'var(--ui-color-grey-100)',
+    'var(--ui-color-purple-main)',
+    'var(--ui-color-purple-400)',
+    'var(--ui-color-purple-700)'
+  ),
+  yellow: defineButtonCssVars(
+    'var(--ui-color-grey-100)',
+    'var(--ui-color-yellow-main)',
+    'var(--ui-color-yellow-400)',
+    'var(--ui-color-yellow-700)'
+  )
+}
+
+const buttonDisabledVars = defineButtonCssVars(
+  'var(--ui-color-disabled-text)',
+  'var(--ui-color-disabled-bg)',
+  'var(--ui-color-disabled-bg)',
+  'var(--ui-color-grey-500)'
+)
+
+export function resolveButtonCssVars({ color, disabled, loading }: ButtonCssVarState): ButtonCssVars {
+  return disabled && !loading ? buttonDisabledVars : buttonColorVars[color]
+}
+
+const buttonSlots = {
+  root: 'group/ui-button flex cursor-pointer items-stretch border-none bg-transparent p-0 disabled:cursor-not-allowed',
+  content:
+    'flex h-full flex-[1_1_0] items-center justify-center text-(color:--ui-button-color) bg-(--ui-button-bg-color)',
+  icon: 'shrink-0'
+} as const
+
+export const buttonRecipe = createRecipe({
+  slots: buttonSlots,
+  variants: {
+    variant: {
+      shadow: {
+        root: 'pb-1 enabled:active:pb-0',
+        content: 'shadow-[0_4px_var(--ui-button-shadow-color)]'
+      },
+      flat: {
+        root: 'pb-0'
+      },
+      stroke: {
+        root: 'pb-0',
+        content: 'border border-(--ui-button-stroke-color)'
+      }
+    },
+    shape: {
+      square: {
+        root: 'rounded-2',
+        content: 'rounded-2'
+      },
+      circle: {
+        root: 'rounded-full',
+        content: 'rounded-full'
+      }
+    },
+    size: {
+      large: {
+        root: 'h-(--ui-line-height-3)',
+        content: 'gap-2 px-6 text-15 leading-[1.6]',
+        icon: 'size-[18px]'
+      },
+      medium: {
+        root: 'h-(--ui-line-height-2)',
+        content: 'gap-1 px-4 text-[14px] leading-[1.5]',
+        icon: 'size-[14px]'
+      },
+      small: {
+        root: 'h-(--ui-line-height-1)',
+        content: 'gap-1 px-3 text-13 leading-[1.5]',
+        icon: 'size-[13px]'
+      }
+    },
+    loading: {
+      true: {
+        root: 'cursor-not-allowed'
+      },
+      false: null
+    },
+    disabled: {
+      true: null,
+      false: null
+    },
+    iconOnly: {
+      true: {
+        root: 'aspect-square',
+        content: 'px-0'
+      },
+      false: null
+    }
+  },
+  defaultVariants: {
+    variant: 'shadow',
+    shape: 'square',
+    size: 'medium',
+    loading: false,
+    disabled: false,
+    iconOnly: false
+  },
+  compoundVariants: [
+    {
+      when: {
+        variant: ['flat', 'stroke'],
+        size: 'large'
+      },
+      class: {
+        icon: 'size-5'
+      }
+    },
+    {
+      when: {
+        variant: ['flat', 'stroke'],
+        size: 'medium'
+      },
+      class: {
+        icon: 'size-4'
+      }
+    },
+    {
+      when: {
+        variant: 'shadow',
+        loading: true
+      },
+      class: {
+        root: 'pb-0',
+        content: 'shadow-none'
+      }
+    }
+  ]
+})
+</script>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, useSlots } from 'vue'
+
+import UIIcon, { type Type as IconType } from './icons/UIIcon.vue'
+
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = withDefaults(
   defineProps<{
     variant?: ButtonVariant
@@ -62,12 +255,37 @@ const props = withDefaults(
   }
 )
 
-const disabled = computed(() => props.disabled || props.loading)
-const icon = computed(() => (props.loading ? 'loading' : props.icon))
-const btnRef = ref<HTMLButtonElement>()
-
+const btnRef = ref<HTMLButtonElement | null>(null)
+const attrs = useAttrs()
 const slots = useSlots()
-const iconOnly = computed(() => (props.icon != null || slots.icon != null) && slots.default == null)
+const isDisabled = computed(() => props.disabled || props.loading)
+const resolvedIcon = computed(() => (props.loading ? 'loading' : props.icon))
+const hasDefaultSlot = computed(() => slots.default != null)
+const iconOnly = computed(() => (props.icon != null || slots.icon != null) && !hasDefaultSlot.value)
+const contentStyle = computed(() =>
+  resolveButtonCssVars({
+    color: props.color,
+    disabled: props.disabled,
+    loading: props.loading
+  })
+)
+const classes = computed(() =>
+  buttonRecipe({
+    variant: props.variant,
+    shape: props.shape,
+    size: props.size,
+    loading: props.loading,
+    disabled: isDisabled.value,
+    iconOnly: iconOnly.value
+  })
+)
+const rootClass = computed(() => classes.value.root(attrs.class as ClassValue | null))
+const contentClass = computed(() => classes.value.content())
+const iconClass = computed(() => classes.value.icon())
+const buttonAttrs = computed(() => {
+  const { class: _class, disabled: _disabled, type: _type, ...rest } = attrs
+  return rest
+})
 
 defineExpose({
   focus() {
@@ -76,229 +294,32 @@ defineExpose({
 })
 </script>
 
-<style lang="scss">
-@layer components {
-  .ui-button {
-    display: flex;
-    align-items: stretch;
-    background: none;
-    border: none;
-    border-radius: var(--ui-button-radius);
-    height: var(--ui-button-height);
-    cursor: pointer;
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-// base
-.ui-button {
-  --ui-button-color: var(--ui-color-grey-100);
-  --ui-button-bg-color: var(--ui-color-primary-main);
-  --ui-button-shadow-color: var(--ui-color-primary-700);
-  --ui-button-radius: var(--ui-border-radius-2);
-  --ui-button-stroke-color: var(--ui-color-grey-400);
-
-  .content {
-    flex: 1 1 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: var(--ui-button-content-padding);
-    border-radius: var(--ui-button-radius);
-    font-size: var(--ui-button-font-size);
-    line-height: var(--ui-button-line-height);
-    gap: var(--ui-button-gap);
-    color: var(--ui-button-color);
-    background-color: var(--ui-button-bg-color);
-  }
-
-  .icon {
-    width: var(--ui-button-icon-size);
-    height: var(--ui-button-icon-size);
-  }
-
-  &.icon-only {
-    aspect-ratio: 1 / 1;
-    .content {
-      padding: 0;
-    }
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-
-    &:not(.loading) {
-      --ui-button-color: var(--ui-color-disabled-text);
-      --ui-button-bg-color: var(--ui-color-disabled-bg);
-      --ui-button-shadow-color: var(--ui-color-grey-500);
-    }
-  }
-}
-
-// variant
-.variant-shadow {
-  padding: 0 0 4px 0;
-
-  .content {
-    box-shadow: 0 4px var(--ui-button-shadow-color);
-  }
-
-  &:not(:disabled):active,
-  &.loading {
-    padding-bottom: 0;
-    .content {
-      box-shadow: none;
-    }
-  }
-}
-
-.variant-flat {
-  padding: 0;
-}
-
-.variant-stroke {
-  padding: 0;
-
-  .content {
-    border: 1px solid var(--ui-button-stroke-color);
-  }
-}
-// shape
-.shape-square {
-  --ui-button-radius: var(--ui-border-radius-2);
-}
-
-.shape-circle {
-  --ui-button-radius: 100%;
-}
-
-// color
-.color-primary {
-  --ui-button-color: var(--ui-color-grey-100);
-  --ui-button-bg-color: var(--ui-color-primary-main);
-  --ui-button-shadow-color: var(--ui-color-primary-700);
-
-  &:hover:not(:active, :disabled) {
-    --ui-button-bg-color: var(--ui-color-primary-400);
-  }
-}
-
-.color-secondary {
-  --ui-button-color: var(--ui-color-primary-main);
-  --ui-button-bg-color: var(--ui-color-primary-200);
-  --ui-button-shadow-color: var(--ui-color-primary-300);
-
-  &:hover:not(:active, :disabled) {
-    --ui-button-bg-color: var(--ui-color-primary-100);
-  }
-}
-
-.color-boring {
-  --ui-button-color: var(--ui-color-text);
-  --ui-button-bg-color: var(--ui-color-grey-300);
-  --ui-button-shadow-color: var(--ui-color-grey-600);
-
-  &:hover:not(:active, :disabled) {
-    --ui-button-bg-color: var(--ui-color-grey-200);
-  }
-}
-
-.color-white {
-  --ui-button-color: var(--ui-color-text);
-  --ui-button-bg-color: var(--ui-color-grey-100);
-  --ui-button-shadow-color: var(--ui-color-grey-400);
-
-  &:hover:not(:active, :disabled) {
-    --ui-button-bg-color: var(--ui-color-grey-300);
-  }
-}
-
-.color-danger {
-  --ui-button-color: var(--ui-color-grey-100);
-  --ui-button-bg-color: var(--ui-color-danger-main);
-  --ui-button-shadow-color: var(--ui-color-danger-600);
-
-  &:hover:not(:active, :disabled) {
-    --ui-button-bg-color: var(--ui-color-danger-400);
-  }
-}
-
-.color-success {
-  --ui-button-color: var(--ui-color-grey-100);
-  --ui-button-bg-color: var(--ui-color-success-main);
-  --ui-button-shadow-color: var(--ui-color-success-600);
-
-  &:hover:not(:active, :disabled) {
-    --ui-button-bg-color: var(--ui-color-success-400);
-  }
-}
-
-.color-blue {
-  --ui-button-color: var(--ui-color-grey-100);
-  --ui-button-bg-color: var(--ui-color-blue-main);
-  --ui-button-shadow-color: var(--ui-color-blue-700);
-
-  &:hover:not(:active, :disabled) {
-    --ui-button-bg-color: var(--ui-color-blue-400);
-  }
-}
-
-.color-purple {
-  --ui-button-color: var(--ui-color-grey-100);
-  --ui-button-bg-color: var(--ui-color-purple-main);
-  --ui-button-shadow-color: var(--ui-color-purple-700);
-
-  &:hover:not(:active, :disabled) {
-    --ui-button-bg-color: var(--ui-color-purple-400);
-  }
-}
-
-.color-yellow {
-  --ui-button-color: var(--ui-color-grey-100);
-  --ui-button-bg-color: var(--ui-color-yellow-main);
-  --ui-button-shadow-color: var(--ui-color-yellow-700);
-
-  &:hover:not(:active, :disabled) {
-    --ui-button-bg-color: var(--ui-color-yellow-400);
-  }
-}
-
-// size
-.ui-button-size-large {
-  --ui-button-height: var(--ui-line-height-3);
-  --ui-button-icon-size: 18px;
-  --ui-button-content-padding: 0 24px;
-  --ui-button-font-size: 15px;
-  --ui-button-gap: 8px;
-  --ui-button-line-height: 1.6;
-
-  &.variant-flat,
-  &.variant-stroke {
-    --ui-button-icon-size: 20px;
-  }
-}
-
-.ui-button-size-medium {
-  --ui-button-height: var(--ui-line-height-2);
-  --ui-button-icon-size: 14px;
-  --ui-button-content-padding: 0 16px;
-  --ui-button-font-size: 14px;
-  --ui-button-gap: 4px;
-  --ui-button-line-height: 1.5;
+<template>
+  <button
+    ref="btnRef"
+    v-bind="buttonAttrs"
+    class="ui-button-root"
+    :class="rootClass"
+    :data-loading="loading || null"
+    :data-variant="variant"
+    :disabled="isDisabled"
+    :type="htmlType"
+  >
+    <span class="ui-button-content" :class="contentClass" :style="contentStyle">
+      <UIIcon v-if="resolvedIcon != null" class="ui-button-icon" :class="iconClass" :type="resolvedIcon" />
+      <slot v-else name="icon"></slot>
+      <slot v-if="hasDefaultSlot"></slot>
+    </span>
+  </button>
+</template>
 
-  &.variant-flat,
-  &.variant-stroke {
-    --ui-button-icon-size: 16px;
-  }
+<style scoped>
+.ui-button-root:hover:enabled:not(:active) .ui-button-content {
+  background-color: var(--ui-button-hover-bg-color);
 }
 
-.ui-button-size-small {
-  --ui-button-height: var(--ui-line-height-1);
-  --ui-button-icon-size: 13px;
-  --ui-button-content-padding: 0 12px;
-  --ui-button-font-size: 13px;
-  --ui-button-gap: 4px;
-  --ui-button-line-height: 1.5;
+.ui-button-root[data-variant='shadow']:enabled:active .ui-button-content,
+.ui-button-root[data-variant='shadow'][data-loading='true'] .ui-button-content {
+  box-shadow: none;
 }
 </style>
diff --git a/spx-gui/src/components/ui/utils/cn.test.ts b/spx-gui/src/components/ui/utils/cn.test.ts
new file mode 100644
index 000000000..6bdcedf49
--- /dev/null
+++ b/spx-gui/src/components/ui/utils/cn.test.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+
+import { cn } from './cn'
+
+describe('cn', () => {
+  it('flattens nested class values and skips absent ones', () => {
+    expect(cn('px-4', ['text-white', null, ['bg-primary-main', { 'font-bold': true, hidden: false }]], false)).toBe(
+      'px-4 text-white bg-primary-main font-bold'
+    )
+  })
+
+  it('merges conflicting tailwind classes by keeping the later value', () => {
+    expect(cn('px-4 rounded-2', 'px-2', ['rounded-full'])).toBe('px-2 rounded-full')
+  })
+})
diff --git a/spx-gui/src/components/ui/utils/cn.ts b/spx-gui/src/components/ui/utils/cn.ts
new file mode 100644
index 000000000..a80b5375d
--- /dev/null
+++ b/spx-gui/src/components/ui/utils/cn.ts
@@ -0,0 +1,28 @@
+import { twMerge } from 'tailwind-merge'
+
+export type ClassDictionary = Record<string, boolean | null>
+export type ClassValue = string | ClassDictionary | null | false | ClassValue[]
+
+function flattenClassValue(value: ClassValue, tokens: string[]) {
+  if (value == null || value === false) return
+
+  if (typeof value === 'string') {
+    tokens.push(value)
+    return
+  }
+
+  if (Array.isArray(value)) {
+    for (const item of value) flattenClassValue(item, tokens)
+    return
+  }
+
+  for (const [className, enabled] of Object.entries(value)) {
+    if (enabled === true) tokens.push(className)
+  }
+}
+
+export function cn(...values: ClassValue[]) {
+  const tokens: string[] = []
+  for (const value of values) flattenClassValue(value, tokens)
+  return twMerge(tokens.join(' '))
+}
diff --git a/spx-gui/src/components/ui/utils/create-recipe.test.ts b/spx-gui/src/components/ui/utils/create-recipe.test.ts
new file mode 100644
index 000000000..a8fb2dc59
--- /dev/null
+++ b/spx-gui/src/components/ui/utils/create-recipe.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+
+import { createRecipe } from './create-recipe'
+
+const buttonRecipe = createRecipe({
+  slots: { root: 'inline-flex', content: 'px-4 py-2', icon: 'size-4' },
+  variants: {
+    size: {
+      small: { content: 'px-2 text-12', icon: 'size-[13px]' },
+      large: { content: 'px-6 text-15', icon: 'size-[18px]' }
+    },
+    variant: {
+      solid: { content: 'bg-primary-main text-white' },
+      stroke: { content: 'border border-border bg-white text-text' }
+    },
+    iconOnly: {
+      true: { root: 'aspect-square', content: 'px-0' },
+      false: null
+    }
+  },
+  defaultVariants: { size: 'small', variant: 'solid', iconOnly: false },
+  compoundVariants: [
+    { when: { variant: 'stroke', size: ['small', 'large'] }, class: { icon: 'size-[16px]' } },
+    { when: { variant: 'solid', iconOnly: true }, class: { content: 'rounded-full' } }
+  ]
+})
+
+describe('createRecipe', () => {
+  it('applies default variants and preserves per-slot extra classes', () => {
+    const classes = buttonRecipe()
+    expect(classes.root('w-full')).toBe('inline-flex w-full')
+    expect(classes.content()).toBe('py-2 px-2 text-12 bg-primary-main text-white')
+    expect(classes.icon()).toBe('size-[13px]')
+  })
+
+  it('applies compound variants for matched combinations', () => {
+    const classes = buttonRecipe({ size: 'large', variant: 'stroke' })
+    expect(classes.content()).toBe('py-2 px-6 text-15 border border-border bg-white text-text')
+    expect(classes.icon()).toBe('size-[16px]')
+  })
+
+  it('lets slot extras override resolved classes at the end', () => {
+    const classes = buttonRecipe({ iconOnly: true })
+    expect(classes.root()).toBe('inline-flex aspect-square')
+    expect(classes.content('px-1')).toBe('py-2 text-12 bg-primary-main text-white rounded-full px-1')
+  })
+
+  it('accepts boolean values in variant selection and conditions', () => {
+    const classes = buttonRecipe({ iconOnly: false })
+
+    expect(classes.root()).toBe('inline-flex')
+    expect(buttonRecipe({ iconOnly: true }).content()).toContain('rounded-full')
+  })
+})
diff --git a/spx-gui/src/components/ui/utils/create-recipe.ts b/spx-gui/src/components/ui/utils/create-recipe.ts
new file mode 100644
index 000000000..4be2cba2d
--- /dev/null
+++ b/spx-gui/src/components/ui/utils/create-recipe.ts
@@ -0,0 +1,176 @@
+/**
+ * A minimal slot-based recipe helper for the project's UI library.
+ *
+ * Purpose:
+ * - provide a lightweight, project-local alternative to `tailwind-variants`
+ * - keep slot/variant/compound-variant logic out of large Vue templates
+ * - centralize class generation while still letting the caller merge root classes with `twMerge`
+ *
+ * Typical usage:
+ * ```ts
+ * const buttonRecipe = createRecipe({
+ *   slots: {
+ *     root: 'inline-flex',
+ *     content: 'items-center justify-center',
+ *     icon: 'shrink-0'
+ *   },
+ *   variants: {
+ *     size: {
+ *       small: { content: 'px-2', icon: 'size-3' },
+ *       large: { content: 'px-4', icon: 'size-5' }
+ *     },
+ *     loading: {
+ *       true: { root: 'cursor-not-allowed' },
+ *       false: null
+ *     }
+ *   },
+ *   defaultVariants: {
+ *     size: 'small',
+ *     loading: false
+ *   },
+ *   compoundVariants: [{
+ *     when: { size: 'large', loading: true },
+ *     class: { content: 'opacity-80' }
+ *   }]
+ * })
+ *
+ * const classes = buttonRecipe({ size: 'large', loading: true })
+ * classes.root('w-full')
+ * classes.content()
+ * ```
+ */
+import { cn, type ClassValue } from './cn'
+
+export type SlotClasses<SlotName extends string> = Partial<Record<SlotName, ClassValue>>
+export type VariantDefinitions<SlotName extends string> = Record<string, Record<string, SlotClasses<SlotName> | null>>
+type VariantSelectionDefinitions = Record<string, Record<string, unknown>>
+
+type BooleanVariantKeys = 'true' | 'false'
+
+type BooleanVariantValue<TVariant extends Record<string, unknown>> =
+  TVariant extends Record<BooleanVariantKeys, unknown> ? boolean : never
+
+type VariantInputValue<TVariant extends Record<string, unknown>> = keyof TVariant | BooleanVariantValue<TVariant>
+
+type NormalizedRecipeSelection<TVariants extends VariantSelectionDefinitions> = Partial<{
+  [K in keyof TVariants]: keyof TVariants[K] | null
+}>
+
+export type RecipeSelection<TVariants extends VariantSelectionDefinitions> = Partial<{
+  [K in keyof TVariants]: VariantInputValue<TVariants[K]> | null
+}>
+
+export type RecipeCondition<TVariants extends VariantSelectionDefinitions> = Partial<{
+  [K in keyof TVariants]: VariantInputValue<TVariants[K]> | ReadonlyArray<VariantInputValue<TVariants[K]>> | null
+}>
+
+export type RecipeConfig<SlotName extends string, TVariants extends VariantDefinitions<SlotName>> = {
+  slots: Record<SlotName, ClassValue>
+  variants?: TVariants
+  defaultVariants?: RecipeSelection<TVariants>
+  /**
+   * Extra classes applied only when all `when` conditions match.
+   * This is the main escape hatch for cross-variant combinations such as
+   * `variant=shadow + loading=true`.
+   */
+  compoundVariants?: Array<{
+    when: RecipeCondition<TVariants>
+    class: SlotClasses<SlotName>
+  }>
+}
+
+export type RecipeResult<SlotName extends string> = Record<SlotName, (extra?: ClassValue | null) => string>
+
+function normalizeVariantValue(value: string | boolean | null) {
+  if (typeof value === 'boolean') return String(value) as BooleanVariantKeys
+  return value
+}
+
+/**
+ * Internally normalize boolean-like variant inputs to `'true' | 'false'`.
+ * The public API accepts booleans, but the variant lookup table still uses
+ * object keys, so normalization keeps the caller API ergonomic.
+ */
+function normalizeSelection<TVariants extends VariantSelectionDefinitions>(selection: RecipeSelection<TVariants>) {
+  return Object.fromEntries(
+    Object.entries(selection).map(([variantName, value]) => [variantName, normalizeVariantValue(value ?? null)])
+  ) as NormalizedRecipeSelection<TVariants>
+}
+
+/**
+ * Match a single compound variant against the normalized selection.
+ * Array values in `when` behave like “one of these values”.
+ */
+function matchesCondition<TVariants extends VariantSelectionDefinitions>(
+  selection: NormalizedRecipeSelection<TVariants>,
+  condition: RecipeCondition<TVariants>
+) {
+  for (const [variantName, expectedValue] of Object.entries(condition)) {
+    const currentValue = selection[variantName as keyof TVariants]
+    if (Array.isArray(expectedValue)) {
+      if (currentValue == null) return false
+      const normalizedExpectedValues = expectedValue.map((value) => normalizeVariantValue(value ?? null))
+      if (!normalizedExpectedValues.includes(currentValue as string | null)) return false
+      continue
+    }
+    if (currentValue !== normalizeVariantValue(expectedValue ?? null)) return false
+  }
+  return true
+}
+
+export function createRecipe<const SlotName extends string, const TVariants extends VariantDefinitions<SlotName>>(
+  config: RecipeConfig<SlotName, TVariants>
+) {
+  const variants = config.variants ?? ({} as TVariants)
+  const defaultVariants = normalizeSelection(config.defaultVariants ?? ({} as RecipeSelection<TVariants>))
+  const compoundVariants = config.compoundVariants ?? []
+  const slotNames = Object.keys(config.slots) as SlotName[]
+
+  return (selectionInput: RecipeSelection<TVariants> = {}) => {
+    // Start from defaults, then override with the caller selection.
+    const selection = {
+      ...defaultVariants,
+      ...normalizeSelection(selectionInput)
+    } as NormalizedRecipeSelection<TVariants>
+
+    // Each slot accumulates base classes first, then variant classes,
+    // then compound-variant classes, and finally caller-provided extras.
+    const resolvedClasses = Object.fromEntries(
+      slotNames.map((slotName) => [slotName, [config.slots[slotName]]])
+    ) as Record<SlotName, ClassValue[]>
+
+    for (const [variantName, variantOptions] of Object.entries(variants)) {
+      const variantValue = selection[variantName as keyof TVariants]
+      if (variantValue == null) continue
+
+      const variantClasses = variantOptions[variantValue as string]
+      if (variantClasses == null) continue
+
+      for (const slotName of slotNames) {
+        const slotClass = variantClasses[slotName]
+        if (slotClass == null) continue
+        resolvedClasses[slotName].push(slotClass)
+      }
+    }
+
+    for (const compoundVariant of compoundVariants) {
+      if (!matchesCondition(selection, compoundVariant.when)) continue
+
+      for (const slotName of slotNames) {
+        const slotClass = compoundVariant.class[slotName]
+        if (slotClass == null) continue
+        resolvedClasses[slotName].push(slotClass)
+      }
+    }
+
+    return Object.fromEntries(
+      slotNames.map((slotName) => [
+        slotName,
+        // The caller can pass extra classes here (commonly attrs.class for root).
+        // `cn()` applies `twMerge`, so conflicting Tailwind utilities collapse in
+        // a predictable way.
+        (extra: ClassValue | null = null) => cn(resolvedClasses[slotName], extra)
+      ])
+    ) as RecipeResult<SlotName>
+  }
+}
diff --git a/spx-gui/src/components/ui/utils/index.ts b/spx-gui/src/components/ui/utils/index.ts
index a8b77beb3..1e317889b 100644
--- a/spx-gui/src/components/ui/utils/index.ts
+++ b/spx-gui/src/components/ui/utils/index.ts
@@ -1,5 +1,15 @@
 import { type InjectionKey, provide, type Ref, inject, ref, watchEffect } from 'vue'
 import { getCleanupSignal } from '@/utils/disposable'
+export { cn, type ClassDictionary, type ClassValue } from './cn'
+export {
+  createRecipe,
+  type SlotClasses,
+  type VariantDefinitions,
+  type RecipeSelection,
+  type RecipeCondition,
+  type RecipeConfig,
+  type RecipeResult
+} from './create-recipe'
 
 const rootContainerInjectionKey: InjectionKey<Ref<HTMLElement | undefined>> = Symbol('root-container')
 
diff --git a/spx-gui/vue-tailwind-component-guidelines.md b/spx-gui/vue-tailwind-component-guidelines.md
deleted file mode 100644
index f70602f93..000000000
--- a/spx-gui/vue-tailwind-component-guidelines.md
+++ /dev/null
@@ -1,763 +0,0 @@
-# Vue 3 + Tailwind 4 组件设计规范（草稿）
-
-> 适用范围：`spx-gui`
->
-> 状态：Draft
->
-> 目标：为后续基于 `Vue 3 + Tailwind 4` 的组件开发提供一套统一的设计和实现约定，分别覆盖 UI 组件与业务组件。
-
-## 1. 目标与边界
-
-本文档关注以下问题：
-
-- 在 `Vue 3 + Tailwind 4` 中，组件应该如何划分职责。
-- 父组件传 `class` 给子组件时，哪些场景应该支持，哪些场景不应该依赖。
-- UI 组件与业务组件分别应该如何暴露样式定制能力。
-- 什么时候优先用 Tailwind utility，什么时候保留少量本地 CSS。
-
-本文档**不**要求兼容当前临时 UI 组件库的实现风格；以长期最佳实践为主，同时给出可接受的备选方案。
-
----
-
-## 2. 总体原则
-
-### 2.1 先分清组件类型
-
-项目中的组件先分成两类：
-
-1. **UI 组件**
-   - 通用、可复用、偏设计系统能力。
-   - 例如：`Button`、`Input`、`Dialog`、`Tabs`、`Popover`、`Badge`。
-
-2. **业务组件**
-   - 面向具体业务场景，包含页面语义、数据结构或交互流程。
-   - 例如：`ProjectCard`、`SpriteListPanel`、`TutorialChapterSidebar`、`ProjectPublishDialogContent`。
-
-这两类组件最重要的区别不是“长得像不像 UI”，而是：
-
-- **UI 组件**优先提供稳定的抽象能力。
-- **业务组件**优先表达业务语义与页面结构。
-
----
-
-### 2.2 不要把 utility 冲突顺序当成组件契约
-
-在 `Tailwind 4` 中，如果两个 utility 都命中了同一个 CSS 属性，最终谁生效，通常取决于：
-
-- specificity
-- layer
-- Tailwind 生成的 CSS rule 顺序
-- 是否使用了 `!important`
-
-**不要**把以下写法当成可靠契约：
-
-```vue
-<Child class="px-2" />
-```
-
-去覆盖子组件内部：
-
-```vue
-class="px-4"
-```
-
-原因是：**HTML `class` 字符串顺序本身不是稳定 API。**
-
-结论：
-
-- 不要依赖“父组件传的 utility 总能覆盖子组件默认 utility”。
-- 如果要支持覆盖，应当通过明确 API 或显式合并策略实现。
-
----
-
-### 2.3 父组件管布局，子组件管外观
-
-这是默认规则：
-
-- **父组件负责布局**：间距、宽高占位、栅格位置、排序、对齐。
-- **子组件负责外观**：颜色、边框、圆角、内部间距、状态样式、动效。
-
-这条规则对两类组件都成立，但业务组件应执行得更严格。
-
----
-
-### 2.4 优先暴露语义化 API，而不是样式漏洞
-
-当一个组件需要定制时，优先顺序建议如下：
-
-1. **语义化 props**
-2. **slots / scoped slots**
-3. **局部 class props**（例如 `headerClass`、`bodyClass`）
-4. **root `class` 透传**
-5. **依赖 utility 冲突覆盖**
-
-第 5 种不应作为正式约定。
-
----
-
-### 2.5 默认使用 Tailwind；本地 CSS 保持少量且有理由
-
-默认规则：
-
-- 优先在模板中直接使用 Tailwind utility。
-- 优先使用项目已有的语义 token，例如 `text-text`、`text-title`、`bg-primary-100`。
-- 当以下场景出现时，可保留少量本地 CSS：
-  - `:deep(...)`
-  - 生成内容
-  - 第三方 DOM 覆盖
-  - 难以阅读的结构性选择器
-  - 多节点共享且较复杂的状态样式
-
-如果本地样式只服务于一两个节点，优先直接写在模板里，而不是额外抽一层 `@apply`。
-
----
-
-## 3. UI 组件规范
-
-## 3.1 UI 组件的目标
-
-UI 组件的主要目标是：
-
-- 为产品提供稳定、可组合的视觉原语。
-- 隐藏实现细节，暴露明确、一致、可预测的 API。
-- 尽量减少业务上下文对组件内部结构的依赖。
-
-UI 组件不是页面片段，也不应承载太多业务判断。
-
----
-
-## 3.2 UI 组件推荐的公开能力
-
-UI 组件推荐优先暴露以下能力：
-
-### 3.2.1 语义化变体 props
-
-优先用 props 表达稳定的视觉变体，而不是让外部自由覆盖内部样式。
-
-常见 props：
-
-- `size`: `small | medium | large`
-- `tone` / `color`: `primary | secondary | danger | success | neutral`
-- `variant`: `solid | soft | outline | ghost | link`
-- `shape`: `square | rounded | pill | circle`
-- `loading`
-- `disabled`
-- `block`
-
-示例：
-
-```vue
-<UIButton variant="solid" color="primary" size="medium" />
-```
-
-而不是：
-
-```vue
-<UIButton class="h-8 rounded-md bg-primary-main px-4 text-white" />
-```
-
----
-
-### 3.2.2 slots
-
-当定制内容结构比定制样式更重要时，优先用 slot。
-
-例如：
-
-- `icon`
-- `prefix`
-- `suffix`
-- `title`
-- `description`
-- `actions`
-
-slot 是内容扩展点，不是样式逃生口。
-
----
-
-### 3.2.3 少量、明确的局部 class props（可选）
-
-如果某个 UI 组件天然有稳定分区，且确实需要在少量场景下开放布局扩展，可以提供少量局部 class props，例如：
-
-- `rootClass`
-- `contentClass`
-- `iconClass`
-- `labelClass`
-
-但要注意：
-
-- 这类 API 是显式扩展点，必须文档化。
-- 不要一次性暴露太多位置；只开放真正稳定的区域。
-- 默认仍然以 props 和 slots 为主。
-
----
-
-## 3.3 UI 组件的样式归属
-
-### 推荐做法
-
-- 组件自身的视觉样式由组件内部定义。
-- 外部调用方**默认不应**依赖 root `class` 去覆盖内部的颜色、圆角、padding、边框等基础视觉样式。
-- 组件的主视觉变体必须通过 props 控制。
-
-### 为什么
-
-因为 UI 组件属于公共抽象层。如果允许外部任意覆盖内部样式：
-
-- 会破坏组件库的一致性。
-- 会让组件难以重构。
-- 会让调用方依赖内部 DOM 和类名布局。
-
----
-
-## 3.4 UI 组件对 root `class` 的默认策略
-
-### 默认推荐：仅支持布局扩展，不承诺视觉覆盖
-
-推荐把 root `class` 视为：
-
-- 页面布局用途
-- 容器摆放用途
-- 外层 spacing / sizing 用途
-
-例如：
-
-```vue
-<UIButton class="w-full self-start" />
-```
-
-这是合理的。
-
-但以下不应作为组件契约：
-
-```vue
-<UIButton class="rounded-none bg-red-500 px-2" />
-```
-
-如果产品确实需要这些变化，应当为它们补充语义化 props。
-
----
-
-## 3.5 UI 组件的两种实现模式
-
-### 模式 A：严格型 UI 组件（默认推荐）
-
-适合：基础组件、设计系统组件、需要稳定一致性的组件。
-
-特点：
-
-- 变体全部由 props 定义。
-- root `class` 只用于布局扩展。
-- 不承诺通过外部 utility 覆盖内部 utility。
-- 内部结构尽量稳定，局部扩展点有限。
-
-这是**首选模式**。
-
-### 模式 B：可扩展型 UI 组件（备选）
-
-适合：容器类基础组件、需要被多个页面轻度定制的组件，例如 `Card`、`Panel`、`EmptyState`。
-
-特点：
-
-- 除 props 外，允许少量局部 `class` 扩展。
-- 需要显式声明哪些位置允许定制。
-- 如果要支持 utility 冲突覆盖，组件内部必须自己做 class 合并，而不是依赖 Vue 自动 fallthrough 的最终效果。
-
-这种模式是**有成本的扩展模式**，不应成为所有 UI 组件的默认形态。
-
----
-
-## 3.6 如果 UI 组件确实要支持 class 覆盖
-
-如果某些组件确实希望让调用方覆写一部分 utility，建议遵循以下约定：
-
-1. 不要把“是否能覆盖成功”交给 Tailwind rule 顺序碰运气。
-2. 明确哪些位置可覆盖，例如 `rootClass`、`contentClass`。
-3. 在组件内部显式合并 class。
-4. 如果引入专门的 class merge 工具，应统一选型并在项目内共用。
-
-推荐的可选技术方案：
-
-- `clsx`：负责条件拼接。
-- `tailwind-merge`：负责冲突 utility 去重。
-- 项目内封装一个统一的 `cn()` / `mergeClassNames()` 辅助方法。
-
-示例：
-
-```ts
-import { twMerge } from 'tailwind-merge'
-
-function cn(...values: Array<string | false | null>) {
-  return twMerge(values.filter((value) => value != null && value !== false).join(' '))
-}
-```
-
-然后在组件中显式控制：
-
-```vue
-<script setup lang="ts">
-import { computed, useAttrs } from 'vue'
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const attrs = useAttrs()
-
-const rootClass = computed(() => {
-  return cn(
-    'inline-flex items-center justify-center rounded-2 text-body',
-    'bg-primary-main text-white',
-    attrs.class as string | null
-  )
-})
-</script>
-
-<template>
-  <button v-bind="{ ...attrs, class: null }" :class="rootClass">
-    <slot />
-  </button>
-</template>
-```
-
-注意：
-
-- 这是**显式开放覆盖能力**，不是默认行为。
-- 一旦开放，就要把它写进文档，并长期维护。
-
----
-
-## 3.7 UI 组件推荐的结构约定
-
-### 推荐
-
-- 公共状态尽量暴露为 props：`disabled`、`loading`、`active`、`selected` 等。
-- DOM 状态尽量通过语义属性表达：
-  - `disabled`
-  - `aria-*`
-  - `data-state`
-  - `data-selected`
-  - `data-loading`
-- 当样式依赖组件内部状态时，优先让模板直接表达，而不是隐藏到复杂选择器里。
-
-示例：
-
-```vue
-<button
-  :data-loading="loading || null"
-  :disabled="disabled || loading"
-  class="inline-flex items-center justify-center rounded-2 px-4 py-2 text-body transition"
-  :class="[
-    variant === 'solid' && 'bg-primary-main text-white',
-    variant === 'outline' && 'border border-border bg-white text-text',
-    disabled && 'cursor-not-allowed opacity-50'
-  ]"
->
-  <slot />
-</button>
-```
-
----
-
-## 3.8 UI 组件评审标准
-
-评审 UI 组件时，重点检查：
-
-- 是否把主视觉变体暴露成了 props。
-- 是否错误依赖了外部 root `class` 覆盖内部视觉样式。
-- 是否为长期稳定的内部区域提供了明确扩展点。
-- 是否保持了可访问性属性与交互语义。
-- 是否使用了语义 token，而不是硬编码产品色值。
-
----
-
-## 4. 业务组件规范
-
-## 4.1 业务组件的目标
-
-业务组件的主要目标是：
-
-- 表达一个具体业务场景的结构和语义。
-- 降低页面复杂度，提高业务逻辑可读性。
-- 让页面装配清晰，而不是追求高度通用。
-
-业务组件不是小型 UI 库；不要为了“可复用”而过度抽象。
-
----
-
-## 4.2 业务组件的默认样式策略
-
-### 默认推荐：父组件控制布局，业务组件自己控制视觉
-
-业务组件默认遵循以下分工：
-
-- 父组件通过 root `class` 控制布局：
-  - `mt-*`
-  - `w-*`
-  - `flex-*`
-  - `grid-*`
-  - `self-*`
-  - `order-*`
-- 业务组件内部控制自己的视觉和内部结构：
-  - 背景
-  - 内边距
-  - 标题层级
-  - 信息层次
-  - 状态色
-  - 内部块之间的间距
-
-这条规则比 UI 组件更重要，因为业务组件更容易和具体 DOM 结构耦合。
-
----
-
-## 4.3 业务组件推荐的公开能力顺序
-
-业务组件对外的定制能力推荐按以下顺序设计：
-
-1. **业务语义 props**
-2. **slots**
-3. **少量局部 class props**
-4. **root `class` 用于布局**
-
-### 4.3.1 优先暴露业务语义 props
-
-例如：
-
-- `status`
-- `readonly`
-- `collapsed`
-- `highlighted`
-- `editable`
-- `showActions`
-- `dense`
-
-推荐：
-
-```vue
-<ProjectCard status="draft" highlighted />
-```
-
-不推荐：
-
-```vue
-<ProjectCard class="border-yellow-400 bg-yellow-50" />
-```
-
-后者没有表达业务意图，只是暴露了某个视觉实现。
-
----
-
-### 4.3.2 需要改内容结构时，用 slots
-
-例如一个业务面板：
-
-- 标题区域
-- 描述区域
-- 操作区域
-- 空状态区域
-
-这类定制应优先用 slots，而不是让父组件猜测内部 DOM 结构。
-
----
-
-### 4.3.3 需要改局部布局时，用局部 class props
-
-当业务组件内部确实有稳定区域，且父组件需要补充少量局部布局时，可以开放：
-
-- `headerClass`
-- `bodyClass`
-- `actionsClass`
-- `listClass`
-
-例如：
-
-```vue
-<ProjectCardList bodyClass="max-h-80 overflow-auto" />
-```
-
-这种做法比只给一个 root `class` 更可控。
-
----
-
-## 4.4 业务组件对 root `class` 的推荐策略
-
-### 推荐：支持 root `class`，但仅作为外部布局接口
-
-业务组件通常应该允许这样使用：
-
-```vue
-<ProjectCard class="mt-4 w-full desktop:w-[420px]" />
-```
-
-因为父组件确实需要决定它在页面中的摆放方式。
-
-但不推荐把以下能力当成正式契约：
-
-```vue
-<ProjectCard class="rounded-none bg-red-500 p-0 text-xs" />
-```
-
-如果某个业务组件频繁被这样使用，通常说明：
-
-- 这个组件还没抽出足够明确的语义 props；或
-- 这个组件的边界划分不对；或
-- 它其实更像一个 UI 容器组件，而不是业务组件。
-
----
-
-## 4.5 业务组件推荐的两种实现模式
-
-### 模式 A：结构型业务组件（默认推荐）
-
-适合：绝大多数业务组件。
-
-特点：
-
-- 组件对外表达业务语义。
-- 页面传入数据与业务状态。
-- root `class` 只处理外部布局。
-- 内部视觉由组件自己定义。
-- 少量局部扩展通过 slot 或局部 class prop 提供。
-
-这是默认首选。
-
-### 模式 B：页面级壳组件（备选）
-
-适合：更接近页面片段、布局容器、一次性组合组件。
-
-特点：
-
-- 可以更自由地接收 root `class`。
-- 可以把更多布局责任留给父层。
-- 复用性不是首要目标。
-
-如果组件只在一个页面或一个流程里使用，不必强行把它做成“严格业务组件”。
-
----
-
-## 4.6 什么时候不应该再抽业务组件
-
-当一个片段满足以下条件时，可以先保持在页面内，而不是急着抽组件：
-
-- 只会在一个页面使用。
-- 业务语义还没稳定。
-- 结构变化很快。
-- 抽出来后，props 和 slots 反而比模板本身更难懂。
-
-建议：
-
-- 页面内先用小范围的 Tailwind 模板表达。
-- 等结构稳定后再抽成业务组件。
-
----
-
-## 4.7 业务组件推荐示例
-
-### 推荐
-
-```vue
-<ProjectCard
-  :project="project"
-  :highlighted="project.id === selectedProjectId"
-  class="w-full desktop:w-[360px]"
-  bodyClass="min-h-48"
->
-  <template #actions>
-    <UIButton size="small">Open</UIButton>
-  </template>
-</ProjectCard>
-```
-
-这里：
-
-- `highlighted` 是业务语义。
-- root `class` 只负责摆放宽度。
-- `bodyClass` 是局部稳定扩展点。
-- `actions` 用 slot 表达内容扩展。
-
-### 不推荐
-
-```vue
-<ProjectCard
-  :project="project"
-  class="w-full rounded-none border-red-500 bg-red-50 p-0 [&_.title]:text-xs"
-/>
-```
-
-问题：
-
-- 父组件直接接管了子组件外观。
-- 依赖内部 DOM 结构。
-- 未来重构成本很高。
-
----
-
-## 5. 选型建议：什么时候选哪种模式
-
-| 场景 | 推荐方案 |
-| --- | --- |
-| 基础按钮、输入框、标签、菜单等 | 严格型 UI 组件 |
-| 通用卡片、空状态、面板等基础容器 | 可扩展型 UI 组件 |
-| 项目卡片、资源列表、教程侧栏等业务结构 | 结构型业务组件 |
-| 页面内一次性布局块 | 页面级壳组件或直接留在页面 |
-
----
-
-## 6. 关于 root `class` 的统一约定
-
-建议团队统一采用下面这套规则：
-
-### 6.1 UI 组件
-
-- 默认允许 root `class` 透传。
-- 但只把它视为**布局扩展接口**。
-- 不承诺用它覆盖内部主视觉样式。
-- 如果某个 UI 组件需要开放覆写能力，应显式定义 `rootClass` / `contentClass` 等 API，并在内部完成合并。
-
-### 6.2 业务组件
-
-- 默认允许 root `class` 透传。
-- 将其视为**父层布局控制接口**。
-- 不鼓励通过它控制业务组件内部视觉风格。
-- 内部视觉差异优先由业务语义 props 表达。
-
----
-
-## 7. 推荐的开发流程
-
-### 7.1 开始写组件前，先回答 4 个问题
-
-1. 这是 UI 组件还是业务组件？
-2. 谁拥有这个组件的视觉定义：组件自己，还是调用方？
-3. 调用方真正要定制的是布局、视觉变体，还是内部某个分区？
-4. 这个定制点应该暴露成 props、slots，还是局部 class prop？
-
-如果这 4 个问题没想清楚，通常会很快走向“所有东西都靠 `class` 传”。
-
----
-
-### 7.2 推荐的 API 设计顺序
-
-1. 先定义组件职责。
-2. 再定义必要的语义 props。
-3. 再定义内容 slots。
-4. 最后才考虑是否需要 class 扩展点。
-
-不要倒过来：先给一个 `class`，再让调用方自己拼出所有语义。
-
----
-
-## 8. 常见反模式
-
-### 8.1 把 root `class` 当作万能扩展口
-
-表现：
-
-- 调用方通过一长串 utility 改掉组件几乎所有视觉规则。
-- 子组件是否还能“被覆盖”取决于 Tailwind 生成顺序。
-
-问题：
-
-- API 不稳定。
-- 难以维护。
-- 组件重构风险大。
-
----
-
-### 8.2 业务组件过度组件库化
-
-表现：
-
-- 本来是一个页面私有块，却设计了大量通用 props。
-- 为了“以后可能复用”提前暴露很多抽象。
-
-问题：
-
-- API 复杂度上升。
-- 真实语义反而变弱。
-
----
-
-### 8.3 只给一个大而全的 `class`，不给语义 props
-
-表现：
-
-- `class` 既负责布局，又负责视觉，又负责局部结构。
-
-问题：
-
-- 组件边界不清楚。
-- 调用代码读不出业务意图。
-
----
-
-### 8.4 为了复用强行抽复杂 `@apply` 层
-
-表现：
-
-- 一个组件只有一两个节点，却把大量 utility 挪到本地 `@apply`。
-
-问题：
-
-- 跳转成本变高。
-- 维护时看不到真实样式。
-
-建议：
-
-- 单点样式优先保留在模板中。
-- 只有在复用、结构选择器或可读性确实更好时，才抽本地样式。
-
----
-
-## 9. 评审清单
-
-提交组件代码时，建议按以下清单自查：
-
-### 9.1 通用
-
-- [ ] 组件类型判断是否正确：UI 组件还是业务组件？
-- [ ] 是否优先使用了语义 token，而不是临时色值？
-- [ ] 是否避免把 utility 冲突顺序当成 API？
-- [ ] 是否只在有明确理由时保留本地 CSS？
-
-### 9.2 UI 组件
-
-- [ ] 主视觉差异是否通过 props 暴露？
-- [ ] slots 是否只承担内容扩展，而不是样式逃生口？
-- [ ] 如果开放 class 覆盖，是否是显式、文档化、内部可控的？
-- [ ] root `class` 是否只作为布局扩展约定？
-
-### 9.3 业务组件
-
-- [ ] root `class` 是否只承担外部布局？
-- [ ] 视觉差异是否通过业务语义 props 表达？
-- [ ] 是否避免父组件依赖子组件内部 DOM 结构？
-- [ ] 如果需要局部定制，是否优先用了 slot 或局部 class prop？
-
----
-
-## 10. 推荐的默认结论
-
-如果没有更强理由，建议采用以下默认策略：
-
-### UI 组件
-
-- **默认使用严格型 UI 组件模式。**
-- 主视觉变体走 props。
-- root `class` 只负责布局扩展。
-- 不承诺外部 utility 覆盖内部 utility。
-
-### 业务组件
-
-- **默认使用结构型业务组件模式。**
-- 父组件负责布局。
-- 业务组件负责视觉和结构。
-- 定制优先用业务 props、slots、局部 class prop。
-
-这套默认策略的核心目标是：
-
-- API 稳定
-- 职责清晰
-- 组件可重构
-- 页面代码仍然保持 Tailwind 的开发效率
-

From f5b456d32513f5969224af53fcc80c09ccfb866b Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Thu, 9 Apr 2026 23:06:09 +0800
Subject: [PATCH 20/29] fix: unexpected twMerge result due to non-standard
 tailwind tokens

---
 spx-gui/src/app.css                           | 21 ++++++++++++---
 .../asset/gen/backdrop/BackdropImageItem.vue  |  4 +--
 .../asset/gen/common/ImagePreview.vue         |  2 +-
 .../gen/common/PreviewWithCheckerboardBg.vue  |  2 +-
 .../common/param-settings/ParamSelector.vue   |  4 +--
 .../asset/gen/sprite/SpriteImageItem.vue      |  2 +-
 .../asset/library/AssetSaveModal.vue          | 10 ++++---
 .../library/management/AssetEditModal.vue     |  6 ++---
 .../preprocessing/common/ProcessDetail.vue    |  2 +-
 .../preprocessing/common/ProcessItem.vue      |  2 +-
 .../components/community/ProjectsSection.vue  |  2 +-
 .../community/home/banner/GuestBanner.vue     |  2 +-
 .../user/sidebar/UserSidebarItem.vue          |  2 +-
 .../custom-elements/common/BlockWrapper.vue   |  2 +-
 .../course/management/CourseItem.vue          |  2 +-
 .../course/management/CourseItemMini.vue      |  4 +--
 .../management/CourseSeriesEditModal.vue      |  4 +--
 .../course/management/CourseSeriesItem.vue    |  2 +-
 .../management/ProjectReferencesInput.vue     |  4 +--
 .../course/management/ThumbnailUploader.vue   |  2 +-
 .../xgo-code-editor/ui/CodeEditorCard.vue     |  2 +-
 .../xgo-code-editor/ui/ZoomControl.vue        |  2 +-
 .../ui/api-reference/APIReferenceUI.vue       |  2 +-
 .../ui/completion/CompletionItem.vue          |  2 +-
 .../ui/document-tab/DocumentTab.vue           |  2 +-
 .../ui/document-tab/DocumentTabs.vue          |  2 +-
 .../ui/markdown/DiagnosticItem.vue            |  2 +-
 .../quick-config/common/ConfigPanel.vue       |  2 +-
 .../map-editor/map-viewer/MapViewer.vue       |  2 +-
 .../editor/panels/stage/StagePanel.vue        |  8 +++---
 .../editor/preview/EditorPreview.vue          |  2 +-
 .../editor/sprite/CostumeDetail.vue           |  2 +-
 .../editor/sprite/SpriteCollisionEditor.vue   |  2 +-
 .../sprite/animation/AnimationPlayer.vue      |  2 +-
 .../sprite/animation/AnimationSettings.vue    |  8 +++---
 .../editor/stage/backdrop/BackdropDetail.vue  |  2 +-
 .../editor/stage/sound/SoundRecorder.vue      |  2 +-
 .../sound/waveform/WaveformWithControls.vue   |  2 +-
 .../stage/widget/detail/MonitorDetail.vue     |  5 +++-
 .../src/components/project/ProjectItem.vue    |  2 +-
 .../project/ProjectPublishModal.vue           |  2 +-
 .../src/components/tutorials/CourseItem.vue   |  2 +-
 .../components/tutorials/CourseSeriesItem.vue |  2 +-
 spx-gui/src/components/ui/UIButton.test.ts    | 10 ++++---
 spx-gui/src/components/ui/UIButton.vue        | 10 ++++---
 spx-gui/src/components/ui/UIButtonGroup.vue   | 27 ++++++++++---------
 spx-gui/src/components/ui/utils/cn.test.ts    |  7 ++++-
 spx-gui/src/components/ui/utils/cn.ts         | 14 ++++++++++
 spx-gui/src/pages/community/project.vue       |  5 ++--
 spx-gui/src/pages/community/search.vue        |  2 +-
 spx-gui/src/pages/community/user/index.vue    |  2 +-
 spx-gui/src/pages/tutorials/course-series.vue |  2 +-
 52 files changed, 136 insertions(+), 85 deletions(-)

diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 8c52e7ab6..fde25c4cc 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -60,6 +60,14 @@
   --text-*: initial;
   --radius-*: initial;
 
+  /*
+   * Naming note for Tailwind utility authoring:
+   * - Prefer standard Tailwind token names when possible (for example `rounded-md` instead of old project-local names like `rounded-2`).
+   * - `tailwind-merge` understands standard utility groups much better than project-private aliases, so keeping token names aligned here makes class overrides more predictable.
+   * - For values that still need custom CSS variables, prefer staying inside the original utility namespace when practical.
+   *   Example: use `rounded-md` bridged to `--ui-border-radius-2`, or `h-(--ui-line-height-2)` for height.
+   */
+
   /* Mirrors src/components/ui/responsive.ts. */
   --breakpoint-tablet: 48rem;
   --breakpoint-desktop: 80rem;
@@ -219,9 +227,14 @@
   /* Radius and shadow tokens bridged from the UI token layer. */
   --radius-none: 0px;
   --radius-full: 9999px;
-  --radius-1: var(--ui-border-radius-1, 8px);
-  --radius-2: var(--ui-border-radius-2, 12px);
-  --radius-3: var(--ui-border-radius-3, 20px);
+  --radius-sm: var(--ui-border-radius-1, 8px);
+  --radius-md: var(--ui-border-radius-2, 12px);
+  --radius-lg: var(--ui-border-radius-3, 20px);
+
+  /*
+   * The radius aliases above intentionally use Tailwind's standard names (`sm` / `md` / `lg`).
+   * This keeps component classes readable and also lets `tailwind-merge` treat radius overrides as a single conflict group.
+   */
 
   --shadow-none: 0 0 #0000;
   --shadow-small: var(--ui-box-shadow-small, 0px 2px 8px 0px rgba(51, 51, 51, 0.08));
@@ -239,6 +252,8 @@
   --spacing-middle: var(--ui-gap-middle, 16px);
   --spacing-large: var(--ui-gap-large, 24px);
 
+  /* TODO: Replace the numeric `text-*` aliases below with semantic text tokens (for example `text-button`, `text-body`, `text-heading`). */
+  /* TODO: After the semantic migration, audit components that currently avoid `text-*` color utilities because of `tailwind-merge` conflicts. */
   --text-body: var(--ui-font-size-text, 14px);
   --text-body--line-height: 1.57143;
   --text-10: 10px;
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
index 46dcb0b01..4e94e5a27 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
@@ -33,7 +33,7 @@ const loading = computed(() => props.loading || fileLoading.value)
     }"
     class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[transform,border-radius] duration-200 ease-in-out"
     :class="[
-      compact ? 'h-17 w-22 rounded-1' : 'h-27 w-35 rounded-2',
+      compact ? 'h-17 w-22 rounded-sm' : 'h-27 w-35 rounded-md',
       active ? 'border-turquoise-500 bg-turquoise-200 cursor-default' : '',
       disabled ? 'cursor-not-allowed opacity-50' : '',
       loading ? 'cursor-default pointer-events-none' : '',
@@ -41,6 +41,6 @@ const loading = computed(() => props.loading || fileLoading.value)
     ]"
   >
     <GenLoading v-if="loading" animation-style="width: 60px; height: 60px;" />
-    <UIImg v-else :class="compact ? 'h-15 w-20 rounded-[4px]' : 'h-25 w-33 rounded-1'" :src="url" size="cover" />
+    <UIImg v-else :class="compact ? 'h-15 w-20 rounded-[4px]' : 'h-25 w-33 rounded-sm'" :src="url" size="cover" />
   </div>
 </template>
diff --git a/spx-gui/src/components/asset/gen/common/ImagePreview.vue b/spx-gui/src/components/asset/gen/common/ImagePreview.vue
index 91d373ecb..d0ad72d72 100644
--- a/spx-gui/src/components/asset/gen/common/ImagePreview.vue
+++ b/spx-gui/src/components/asset/gen/common/ImagePreview.vue
@@ -14,7 +14,7 @@ const [fileUrl, fileUrlLoading] = useFileUrl(() => props.file)
 <template>
   <div
     v-radar="{ name: 'Image preview', desc: 'Preview of the selected generated image' }"
-    class="relative h-full w-full overflow-hidden rounded-1"
+    class="relative h-full w-full overflow-hidden rounded-sm"
   >
     <CheckerboardBackground class="absolute inset-0" />
     <UIImg class="h-full w-full" :src="fileUrl" :loading="fileUrlLoading" size="contain" />
diff --git a/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue b/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
index 4b69ef4d0..dcf807c83 100644
--- a/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
+++ b/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
@@ -8,7 +8,7 @@ import CheckerboardBackground from '@/components/editor/sprite/CheckerboardBackg
 </script>
 
 <template>
-  <div class="relative flex-[1_1_0] overflow-hidden rounded-1 w-full">
+  <div class="relative flex-[1_1_0] overflow-hidden rounded-sm w-full">
     <CheckerboardBackground class="absolute inset-0" />
     <slot>
       <div class="relative h-full w-full flex items-center justify-center text-hint-2">
diff --git a/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue b/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
index 6d95f1707..e79c26e1c 100644
--- a/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
+++ b/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
@@ -63,7 +63,7 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
           name: $t(name),
           desc: `Click to select '${$t(name)}' (e.g., ${optionsText})`
         }"
-        class="h-8 flex items-center justify-center gap-1 rounded-2 border border-grey-400 bg-grey-100 pr-2 pl-1 text-13/5 text-grey-900 cursor-pointer hover:bg-grey-300 disabled:cursor-not-allowed disabled:bg-grey-300 disabled:text-grey-600"
+        class="h-8 flex items-center justify-center gap-1 rounded-md border border-grey-400 bg-grey-100 pr-2 pl-1 text-13/5 text-grey-900 cursor-pointer hover:bg-grey-300 disabled:cursor-not-allowed disabled:bg-grey-300 disabled:text-grey-600"
         :class="{ 'aspect-square px-0': iconOnly }"
         :disabled="disabled"
       >
@@ -96,7 +96,7 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
             :active="value === item.value"
             @click="$emit('update:value', clearable && value === item.value ? null : item.value)"
           >
-            <UIImg v-if="item.image != null" class="mt-0.5 mb-1 h-15 w-20 rounded-1" :src="item.image" />
+            <UIImg v-if="item.image != null" class="mt-0.5 mb-1 h-15 w-20 rounded-sm" :src="item.image" />
             <UIBlockItemTitle size="medium">
               {{ $t(item.label) }}
             </UIBlockItemTitle>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue b/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
index 3eab450f6..70bf537ef 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
@@ -33,7 +33,7 @@ const loading = computed(() => props.loading || fileLoading.value)
     }"
     class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[transform,border-radius] duration-200 ease-in-out"
     :class="[
-      compact ? 'h-22 w-22 rounded-1' : 'h-35 w-35 rounded-2',
+      compact ? 'h-22 w-22 rounded-sm' : 'h-35 w-35 rounded-md',
       active ? 'border-turquoise-500 bg-turquoise-200 cursor-default' : '',
       disabled ? 'cursor-not-allowed opacity-50' : '',
       loading ? 'cursor-default pointer-events-none' : '',
diff --git a/spx-gui/src/components/asset/library/AssetSaveModal.vue b/spx-gui/src/components/asset/library/AssetSaveModal.vue
index 71a4b64a7..eb01583d6 100644
--- a/spx-gui/src/components/asset/library/AssetSaveModal.vue
+++ b/spx-gui/src/components/asset/library/AssetSaveModal.vue
@@ -209,9 +209,13 @@ async function addAssetWithPartialData({
     <UIForm v-else :form="form" @submit="handleSubmit.fn">
       <main class="flex">
         <div class="flex-none px-6 py-5">
-          <BackdropPreview v-if="model instanceof Backdrop" class="h-21 w-28 rounded-1 bg-grey-300" :backdrop="model" />
-          <SpritePreview v-if="model instanceof Sprite" class="h-21 w-28 rounded-1 bg-grey-300" :sprite="model" />
-          <SoundPreview v-if="model instanceof Sound" class="h-21 w-28 rounded-1 bg-grey-300" :sound="model" />
+          <BackdropPreview
+            v-if="model instanceof Backdrop"
+            class="h-21 w-28 rounded-sm bg-grey-300"
+            :backdrop="model"
+          />
+          <SpritePreview v-if="model instanceof Sprite" class="h-21 w-28 rounded-sm bg-grey-300" :sprite="model" />
+          <SoundPreview v-if="model instanceof Sound" class="h-21 w-28 rounded-sm bg-grey-300" :sound="model" />
         </div>
         <div class="flex-[1_1_0] px-6 pt-5 pb-10">
           <UIFormItem path="name">
diff --git a/spx-gui/src/components/asset/library/management/AssetEditModal.vue b/spx-gui/src/components/asset/library/management/AssetEditModal.vue
index ba4d3b3c2..7578bc1c9 100644
--- a/spx-gui/src/components/asset/library/management/AssetEditModal.vue
+++ b/spx-gui/src/components/asset/library/management/AssetEditModal.vue
@@ -57,15 +57,15 @@ const handleSubmit = useMessageHandle(
         <div class="flex-none px-6 py-5">
           <BackdropPreview
             v-if="assetType === AssetType.Backdrop"
-            class="h-21 w-28 rounded-1 bg-grey-300"
+            class="h-21 w-28 rounded-sm bg-grey-300"
             :backdrop="asset"
           />
           <SpritePreview
             v-if="assetType === AssetType.Sprite"
-            class="h-21 w-28 rounded-1 bg-grey-300"
+            class="h-21 w-28 rounded-sm bg-grey-300"
             :sprite="asset"
           />
-          <SoundPreview v-if="assetType === AssetType.Sound" class="h-21 w-28 rounded-1 bg-grey-300" :sound="asset" />
+          <SoundPreview v-if="assetType === AssetType.Sound" class="h-21 w-28 rounded-sm bg-grey-300" :sound="asset" />
         </div>
         <div class="flex-[1_1_0] px-6 pt-5 pb-10">
           <UIFormItem path="name">
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
index 54c9ce22a..84ff307ef 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
@@ -22,7 +22,7 @@
         {{ $t({ en: 'Cancel', zh: '取消' }) }}
       </UIButton>
     </header>
-    <main class="flex-[1_1_0] overflow-y-auto rounded-1 bg-grey-300">
+    <main class="flex-[1_1_0] overflow-y-auto rounded-sm bg-grey-300">
       <slot></slot>
     </main>
   </section>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
index 0eb6dcd58..84e36f8da 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
@@ -1,7 +1,7 @@
 <template>
   <li class="relative h-fit w-22 cursor-pointer flex flex-col items-center">
     <UIImg
-      class="h-16.5 w-22 rounded-1"
+      class="h-16.5 w-22 rounded-sm"
       :style="active ? { boxShadow: 'inset 0 0 0 2px var(--ui-color-primary-main)' } : null"
       :src="imgSrc"
     />
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
index 878c4283f..8221c4d87 100644
--- a/spx-gui/src/components/community/ProjectsSection.vue
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -18,7 +18,7 @@
     </header>
     <div
       class="relative mt-2"
-      :class="[isUserContext ? 'mb-4' : 'mb-8', !queryRet.data.value?.length ? 'bg-grey-100 rounded-2' : '']"
+      :class="[isUserContext ? 'mb-4' : 'mb-8', !queryRet.data.value?.length ? 'bg-grey-100 rounded-md' : '']"
     >
       <ListResultWrapper content-type="project" :query-ret="queryRet" :height="254">
         <template v-if="!!slots.empty" #empty="emptyProps">
diff --git a/spx-gui/src/components/community/home/banner/GuestBanner.vue b/spx-gui/src/components/community/home/banner/GuestBanner.vue
index 50f2b6aae..282a63d77 100644
--- a/spx-gui/src/components/community/home/banner/GuestBanner.vue
+++ b/spx-gui/src/components/community/home/banner/GuestBanner.vue
@@ -12,7 +12,7 @@ function handleJoin() {
 <template>
   <CommunityCard class="p-3">
     <div
-      class="relative rounded-2 bg-[#f0faff] bg-no-repeat px-13 pt-12 pb-12.5 text-[#073156]"
+      class="relative rounded-md bg-[#f0faff] bg-no-repeat px-13 pt-12 pb-12.5 text-[#073156]"
       :style="{ backgroundImage: `url(${bgSvg})`, backgroundPosition: 'center right 54px' }"
     >
       <h1 class="text-24">
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
index a5836ca44..406246eb1 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <RouterLink
-    class="group relative flex items-center rounded-2 p-3 text-text no-underline transition-all duration-100 [&.active]:bg-primary-100 [&.active]:text-primary-main"
+    class="group relative flex items-center rounded-md p-3 text-text no-underline transition-all duration-100 [&.active]:bg-primary-100 [&.active]:text-primary-main"
     exact-active-class="active"
     :to="to"
   >
diff --git a/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue b/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue
index d267a4244..f074ad771 100644
--- a/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue
+++ b/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="self-stretch flex flex-col items-stretch rounded-2 border border-dividing-line-1 bg-grey-100">
+  <div class="self-stretch flex flex-col items-stretch rounded-md border border-dividing-line-1 bg-grey-100">
     <slot></slot>
   </div>
 </template>
diff --git a/spx-gui/src/components/course/management/CourseItem.vue b/spx-gui/src/components/course/management/CourseItem.vue
index 1a04089ea..bd0c119a8 100644
--- a/spx-gui/src/components/course/management/CourseItem.vue
+++ b/spx-gui/src/components/course/management/CourseItem.vue
@@ -17,7 +17,7 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 
 <template>
   <li
-    class="course-item relative box-border h-53.5 w-58 shrink-0 cursor-pointer overflow-hidden rounded-3 border-2 border-grey-300 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
+    class="course-item relative box-border h-53.5 w-58 shrink-0 cursor-pointer overflow-hidden rounded-lg border-2 border-grey-300 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
   >
     <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
     <div
diff --git a/spx-gui/src/components/course/management/CourseItemMini.vue b/spx-gui/src/components/course/management/CourseItemMini.vue
index 50961730d..5bf0dde5f 100644
--- a/spx-gui/src/components/course/management/CourseItemMini.vue
+++ b/spx-gui/src/components/course/management/CourseItemMini.vue
@@ -21,7 +21,7 @@ const thumbnailUrl = useAsyncComputedLegacy(async (onCleanup) => {
 <!-- FIXME: `bg-grey-50` is not taking effect -->
 <template>
   <div
-    class="flex items-center rounded-1 border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
+    class="flex items-center rounded-sm border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
     :class="{
       'cursor-pointer hover:bg-primary-100': interactive,
       'border-grey-400 bg-grey-100': highlighted,
@@ -29,7 +29,7 @@ const thumbnailUrl = useAsyncComputedLegacy(async (onCleanup) => {
     }"
   >
     <slot name="prefix" />
-    <UIImg class="h-9 w-12 shrink-0 rounded-1" :src="thumbnailUrl" size="cover" />
+    <UIImg class="h-9 w-12 shrink-0 rounded-sm" :src="thumbnailUrl" size="cover" />
     <div class="mx-3 flex-1 overflow-hidden">
       <div class="overflow-hidden text-body font-medium text-grey-900 text-ellipsis whitespace-nowrap">
         {{ course.title }}
diff --git a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
index a8447461f..0246346c8 100644
--- a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
@@ -218,7 +218,7 @@ const handleSubmit = useMessageHandle(
           {{ $t({ en: 'Courses', zh: '课程' }) }}
         </label>
         <div class="grid h-100 grid-cols-2 gap-6">
-          <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
+          <div class="flex flex-col overflow-hidden rounded-md border border-dividing-line-2">
             <!-- FIXME: `bg-grey-50` is not taking effect -->
             <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
               {{ $t({ en: 'Available courses', zh: '可选课程' }) }}
@@ -232,7 +232,7 @@ const handleSubmit = useMessageHandle(
               />
             </div>
           </div>
-          <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
+          <div class="flex flex-col overflow-hidden rounded-md border border-dividing-line-2">
             <!-- FIXME: `bg-grey-50` is not taking effect -->
             <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
               {{ $t({ en: 'Selected courses', zh: '已选课程' }) }}
diff --git a/spx-gui/src/components/course/management/CourseSeriesItem.vue b/spx-gui/src/components/course/management/CourseSeriesItem.vue
index 2f5bdb864..740f0adef 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItem.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItem.vue
@@ -18,7 +18,7 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 <!-- FIXME: `bg-grey-50` is not taking effect (migrated from legacy code `background: var(--ui-color-grey-50)`) -->
 <template>
   <li
-    class="course-series-item relative h-40 w-58 cursor-pointer overflow-hidden rounded-3 border-2 border-grey-300 bg-grey-50 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
+    class="course-series-item relative h-40 w-58 cursor-pointer overflow-hidden rounded-lg border-2 border-grey-300 bg-grey-50 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
   >
     <div v-if="thumbnailUrl != null" class="absolute inset-0">
       <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
diff --git a/spx-gui/src/components/course/management/ProjectReferencesInput.vue b/spx-gui/src/components/course/management/ProjectReferencesInput.vue
index 8aeb0ca75..ec8c5123d 100644
--- a/spx-gui/src/components/course/management/ProjectReferencesInput.vue
+++ b/spx-gui/src/components/course/management/ProjectReferencesInput.vue
@@ -94,12 +94,12 @@ function handleRemove(index: number) {
       </template>
     </UITextInput>
 
-    <div class="flex-[1_1_0] flex flex-col gap-2 overflow-y-auto rounded-2 border border-grey-400 p-2">
+    <div class="flex-[1_1_0] flex flex-col gap-2 overflow-y-auto rounded-md border border-grey-400 p-2">
       <template v-if="references.length > 0">
         <div
           v-for="(reference, index) in references"
           :key="reference.fullName"
-          class="flex items-center justify-between rounded-1 border border-grey-400 px-3 py-2"
+          class="flex items-center justify-between rounded-sm border border-grey-400 px-3 py-2"
         >
           <span class="reference-name">{{ reference.fullName }}</span>
           <UIIcon
diff --git a/spx-gui/src/components/course/management/ThumbnailUploader.vue b/spx-gui/src/components/course/management/ThumbnailUploader.vue
index 65342171e..c9b1439f5 100644
--- a/spx-gui/src/components/course/management/ThumbnailUploader.vue
+++ b/spx-gui/src/components/course/management/ThumbnailUploader.vue
@@ -35,7 +35,7 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 
 <template>
   <div
-    class="cursor-pointer flex items-center justify-center overflow-hidden rounded-2 border border-dashed border-grey-400 transition-[border-color,background-color] duration-300 hover:border-primary-main hover:bg-grey-400"
+    class="cursor-pointer flex items-center justify-center overflow-hidden rounded-md border border-dashed border-grey-400 transition-[border-color,background-color] duration-300 hover:border-primary-main hover:bg-grey-400"
     @click="handleUpload.fn"
   >
     <UILoading v-if="handleUpload.isLoading.value" />
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue
index 29009b957..bd9875872 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-1 bg-grey-100" style="box-shadow: 0 8px 28px 8px rgba(36, 41, 47, 0.08)">
+  <div class="rounded-sm bg-grey-100" style="box-shadow: 0 8px 28px 8px rgba(36, 41, 47, 0.08)">
     <slot></slot>
   </div>
 </template>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
index b42b8fec6..ee07cb5c7 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
@@ -10,7 +10,7 @@ const emit = defineEmits<{
 }>()
 
 const zoomBtnClz =
-  'flex h-10 w-10 cursor-pointer items-center justify-center rounded-2 border-0 bg-transparent p-0 text-text transition-colors hover:bg-grey-300 active:bg-grey-400'
+  'flex h-10 w-10 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-text transition-colors hover:bg-grey-300 active:bg-grey-400'
 </script>
 
 <template>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
index d5fd31362..052b134a7 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
@@ -161,7 +161,7 @@ function handleCategoryClick(id: string) {
         <li
           v-for="c in categoriesComputed"
           :key="c.id"
-          class="h-13 w-13 cursor-pointer flex flex-col items-center justify-center rounded-1 transition-[color,background-color] duration-100"
+          class="h-13 w-13 cursor-pointer flex flex-col items-center justify-center rounded-sm transition-[color,background-color] duration-100"
           :class="c.id === activeCategoryIdRef ? 'bg-(--category-color) text-grey-100' : 'text-(--category-color)'"
           :style="{ '--category-color': c.color }"
           @click="handleCategoryClick(c.id)"
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
index df9f77453..8c7deaf6d 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
@@ -42,7 +42,7 @@ watchEffect(() => {
 <template>
   <li
     ref="wrapperRef"
-    class="min-w-24 max-w-42 cursor-pointer flex items-center rounded-1 p-1.75 text-xs text-grey-1000 hover:bg-grey-300"
+    class="min-w-24 max-w-42 cursor-pointer flex items-center rounded-sm p-1.75 text-xs text-grey-1000 hover:bg-grey-300"
     :class="active ? 'bg-grey-400' : ''"
     :title="item.label"
   >
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
index 396237e97..040e8da80 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
@@ -25,7 +25,7 @@ const [thumbnailUrl] = useFileUrl(() => props.textDocument.thumbnailFile)
     <template #trigger>
       <div
         v-radar="{ name: 'Code document tab', desc: `Click to open code of ${textDocument.id.uri}` }"
-        class="document-tab h-10 w-10 flex-none flex items-center rounded-1 border-2 transition-all"
+        class="document-tab h-10 w-10 flex-none flex items-center rounded-sm border-2 transition-all"
         :class="isActive ? 'border-yellow-500 bg-yellow-200' : 'border-transparent bg-grey-300 cursor-pointer'"
         @click="emit('click')"
       >
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
index cf1a4a87e..c8b23d5f9 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
@@ -46,7 +46,7 @@ function handleClose() {
         {{ $t({ en: 'Close all', zh: '全部关闭' }) }}
         <template #trigger>
           <button
-            class="mt-2 h-10 w-10 flex-none cursor-pointer flex items-center justify-center rounded-1 border-0 bg-transparent text-inherit hover:bg-grey-300"
+            class="mt-2 h-10 w-10 flex-none cursor-pointer flex items-center justify-center rounded-sm border-0 bg-transparent text-inherit hover:bg-grey-300"
             @click="handleClose"
           >
             <UIIcon class="w-5 h-5" type="closeCircle" />
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
index 646c3220c..09a65481d 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
@@ -9,7 +9,7 @@ defineProps<{
 
 <template>
   <div
-    class="flex items-start gap-2 self-stretch px-2 py-1.5 rounded-1"
+    class="flex items-start gap-2 self-stretch px-2 py-1.5 rounded-sm"
     :class="{
       'bg-yellow-200': severity === 'warning',
       'bg-red-100': severity === 'error'
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
index 1d0d65939..f32f05e2d 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="h-9 w-fit rounded-2 border-2 border-grey-100 bg-grey-100 shadow-big">
+  <div class="h-9 w-fit rounded-md border-2 border-grey-100 bg-grey-100 shadow-big">
     <slot></slot>
   </div>
 </template>
diff --git a/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue b/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
index d6a0760b7..ea450f03b 100644
--- a/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
+++ b/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
@@ -526,7 +526,7 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
       name: 'Map viewer',
       desc: 'View and manipulate the map and sprites on the map. Click on sprite to select it.'
     }"
-    class="relative h-full w-full flex items-center justify-center overflow-hidden rounded-3 bg-center bg-repeat bg-contain"
+    class="relative h-full w-full flex items-center justify-center overflow-hidden rounded-lg bg-center bg-repeat bg-contain"
     :style="{ backgroundImage: `url(${stageBgUrl})` }"
     @mousemove="updateMousePos"
   >
diff --git a/spx-gui/src/components/editor/panels/stage/StagePanel.vue b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
index 6d3e913b6..a65417e74 100644
--- a/spx-gui/src/components/editor/panels/stage/StagePanel.vue
+++ b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
@@ -11,7 +11,7 @@
       <div class="flex-none p-3">
         <div
           v-radar="{ name: 'Stage overview', desc: 'Overview of the stage, click to view stage details' }"
-          class="relative h-14 w-14 cursor-pointer flex items-center justify-center rounded-1 bg-grey-300"
+          class="relative h-14 w-14 cursor-pointer flex items-center justify-center rounded-sm bg-grey-300"
           :class="active ? 'border-2 border-stage-main bg-blue-200 p-0' : 'p-0.5 hover:bg-grey-400'"
           @click="activate"
         >
@@ -26,7 +26,7 @@
               name: 'Backdrops quick entry',
               desc: 'Quick entry to open backdrops management tab in stage editor'
             }"
-            class="h-14 w-14 cursor-pointer flex flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
+            class="h-14 w-14 cursor-pointer flex flex-col items-center justify-center rounded-sm border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('backdrops')"
           >
@@ -36,7 +36,7 @@
           </button>
           <button
             v-radar="{ name: 'Sounds quick entry', desc: 'Quick entry to open sounds management tab in stage editor' }"
-            class="h-14 w-14 cursor-pointer flex flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
+            class="h-14 w-14 cursor-pointer flex flex-col items-center justify-center rounded-sm border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('sounds')"
           >
@@ -49,7 +49,7 @@
               name: 'Widgets quick entry',
               desc: 'Quick entry to open widgets management tab in stage editor'
             }"
-            class="h-14 w-14 cursor-pointer flex flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
+            class="h-14 w-14 cursor-pointer flex flex-col items-center justify-center rounded-sm border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('widgets')"
           >
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index d15018232..99774176f 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -73,7 +73,7 @@
     <div class="h-full flex justify-center overflow-hidden p-3">
       <div
         ref="stageContainerRef"
-        class="stage-viewer-container relative h-full w-full overflow-hidden rounded-1 bg-grey-200"
+        class="stage-viewer-container relative h-full w-full overflow-hidden rounded-sm bg-grey-200"
         :class="{ 'stage-viewer-container--running': runnerState !== 'initial' }"
       >
         <StageViewer />
diff --git a/spx-gui/src/components/editor/sprite/CostumeDetail.vue b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
index 3dfbb115b..b0774a42c 100644
--- a/spx-gui/src/components/editor/sprite/CostumeDetail.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <EditorItemDetail :name="costume.name" @rename="emit('rename')">
-    <div class="relative flex-1 overflow-hidden rounded-1 w-full">
+    <div class="relative flex-1 overflow-hidden rounded-sm w-full">
       <CheckerboardBackground class="absolute inset-0" />
       <UIImg class="h-full w-full" :src="imgSrc" :loading="imgLoading" />
     </div>
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
index 5df213b58..73042a817 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
@@ -292,7 +292,7 @@ const { fn: handleConfirm } = useMessageHandle(
 
 <template>
   <div class="h-full w-full flex flex-col items-center gap-middle">
-    <div ref="wrapper" class="relative h-full w-full flex-1 overflow-hidden rounded-2">
+    <div ref="wrapper" class="relative h-full w-full flex-1 overflow-hidden rounded-md">
       <CheckerboardBackground class="absolute inset-0" />
       <v-stage v-if="stageConfig != null" :config="stageConfig">
         <v-layer v-if="layerConfig != null" :config="layerConfig">
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue b/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
index 9044a88ae..e439126c4 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-radar="{ name: 'Animation player', desc: 'Provides preview for animation' }"
-    class="relative overflow-hidden rounded-1"
+    class="relative overflow-hidden rounded-sm"
   >
     <CheckerboardBackground class="absolute inset-0" />
     <CostumesPlayer ref="costumesPlayerRef" class="absolute h-full w-full" />
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
index 795c40688..652e51855 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
@@ -8,10 +8,10 @@
       @update:visible="handleDropdownVisibleUpdate"
     >
       <template #trigger>
-        <ul class="flex items-center gap-1 rounded-1 bg-grey-100 p-1 shadow-small">
+        <ul class="flex items-center gap-1 rounded-sm bg-grey-100 p-1 shadow-small">
           <li
             v-radar="{ name: 'Edit duration', desc: 'Click to edit animation duraion' }"
-            class="h-8 cursor-pointer flex items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            class="h-8 cursor-pointer flex items-center gap-1 rounded-sm px-3 text-12 text-text transition-all"
             :class="activeSetting === 'duration' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('duration')"
           >
@@ -25,7 +25,7 @@
           </li>
           <li
             v-radar="{ name: 'Edit bound state', desc: 'Click to edit animation bound state' }"
-            class="h-8 cursor-pointer flex items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            class="h-8 cursor-pointer flex items-center gap-1 rounded-sm px-3 text-12 text-text transition-all"
             :class="activeSetting === 'bound-state' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('bound-state')"
           >
@@ -41,7 +41,7 @@
           <li
             v-if="soundEditable"
             v-radar="{ name: 'Edit sound', desc: 'Click to edit animation sound' }"
-            class="h-8 cursor-pointer flex items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            class="h-8 cursor-pointer flex items-center gap-1 rounded-sm px-3 text-12 text-text transition-all"
             :class="activeSetting === 'sound' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('sound')"
           >
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
index 31a0d9d61..339d947f4 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <EditorItemDetail :name="backdrop.name" @rename="handleRename">
     <div class="w-full flex-[1_1_0] min-h-0 flex items-center justify-center">
-      <img v-if="imgSrc != null" class="max-h-full max-w-full rounded-1" :src="imgSrc" />
+      <img v-if="imgSrc != null" class="max-h-full max-w-full rounded-sm" :src="imgSrc" />
       <UILoading :visible="imgLoading" cover />
     </div>
   </EditorItemDetail>
diff --git a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
index 2cf566a90..835178996 100644
--- a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
+++ b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div class="relative h-40 overflow-hidden rounded-2 bg-grey-300">
+    <div class="relative h-40 overflow-hidden rounded-md bg-grey-300">
       <WaveformRecorder
         v-if="recordingState === 'recording' || recordingState === 'recorded'"
         ref="waveformRecorderRef"
diff --git a/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue b/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue
index a4d09ee90..47719e299 100644
--- a/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue
+++ b/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative h-full w-full overflow-hidden rounded-2 bg-grey-300">
+  <div class="relative h-full w-full overflow-hidden rounded-md bg-grey-300">
     <WaveformDisplay
       class="h-full w-full"
       :points="waveformData"
diff --git a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
index 9fabc4e7e..4dd937a84 100644
--- a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
+++ b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
@@ -2,7 +2,10 @@
   <EditorItemDetail style="background-color: var(--ui-color-grey-100)" :name="monitor.name" @rename="handleRename">
     <div class="flex justify-center gap-8 py-5">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="monitor-icon h-24 w-24 flex items-center justify-center rounded-1 bg-grey-300" v-html="mntIcon"></div>
+      <div
+        class="monitor-icon h-24 w-24 flex items-center justify-center rounded-sm bg-grey-300"
+        v-html="mntIcon"
+      ></div>
       <div class="flex flex-col gap-middle">
         <div class="flex items-center gap-middle">
           <p class="flex items-center gap-2 break-keep">
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index a9db0cfc9..9de379327 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -4,7 +4,7 @@
       name: `Project item \u0022${project.owner}/${project.name}\u0022`,
       desc: `Click to ${props.context === 'edit' ? 'edit' : 'view'} the project${operatable ? ', hover for more operations' : ''}`
     }"
-    class="group w-58 flex-none overflow-hidden rounded-2 border border-grey-400 bg-grey-100 transition-all duration-100 hover:shadow-[0px_4px_12px_0px_rgba(36,41,47,0.08)]"
+    class="group w-58 flex-none overflow-hidden rounded-md border border-grey-400 bg-grey-100 transition-all duration-100 hover:shadow-[0px_4px_12px_0px_rgba(36,41,47,0.08)]"
   >
     <RouterLink class="flex flex-col no-underline" :to="to" @click="emit('selected')">
       <div class="relative h-43 w-full bg-center bg-contain" :style="{ backgroundImage: `url(${stageBgUrl})` }">
diff --git a/spx-gui/src/components/project/ProjectPublishModal.vue b/spx-gui/src/components/project/ProjectPublishModal.vue
index ea3ae1b17..6d0a3b908 100644
--- a/spx-gui/src/components/project/ProjectPublishModal.vue
+++ b/spx-gui/src/components/project/ProjectPublishModal.vue
@@ -103,7 +103,7 @@ const handleSubmit = useMessageHandle(
         }}
       </p>
       <div
-        class="mb-6 h-56 w-full overflow-hidden rounded-1 bg-center bg-cover bg-no-repeat"
+        class="mb-6 h-56 w-full overflow-hidden rounded-sm bg-center bg-cover bg-no-repeat"
         :style="{ backgroundImage: `url(${stageBg})` }"
       >
         <UIImg class="h-full w-full" :src="thumbnailUrl" :loading="thumbnailUrlLoading" size="contain" />
diff --git a/spx-gui/src/components/tutorials/CourseItem.vue b/spx-gui/src/components/tutorials/CourseItem.vue
index 905ac855c..ceceebea4 100644
--- a/spx-gui/src/components/tutorials/CourseItem.vue
+++ b/spx-gui/src/components/tutorials/CourseItem.vue
@@ -23,7 +23,7 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 <template>
   <li
     v-radar="{ name: `Course item \u0022${props.course.title}\u0022`, desc: 'Click to start the course' }"
-    class="relative w-58 overflow-hidden rounded-3 transition-all hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
+    class="relative w-58 overflow-hidden rounded-lg transition-all hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
     :style="{ height: `${courseItemHeight}px` }"
   >
     <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
diff --git a/spx-gui/src/components/tutorials/CourseSeriesItem.vue b/spx-gui/src/components/tutorials/CourseSeriesItem.vue
index 23922a632..ddcca10e0 100644
--- a/spx-gui/src/components/tutorials/CourseSeriesItem.vue
+++ b/spx-gui/src/components/tutorials/CourseSeriesItem.vue
@@ -27,7 +27,7 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
       name: `Course series item \u0022${props.courseSeries.title}\u0022`,
       desc: 'Click to view the course series'
     }"
-    class="relative w-58 overflow-hidden rounded-3 transition-all duration-200 hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
+    class="relative w-58 overflow-hidden rounded-lg transition-all duration-200 hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
     :style="{ height: `${courseSeriesItemHeight}px`, backgroundImage: `url(${stageBgUrl})` }"
   >
     <RouterLink :to="`/course-series/${props.courseSeries.id}`">
diff --git a/spx-gui/src/components/ui/UIButton.test.ts b/spx-gui/src/components/ui/UIButton.test.ts
index c95ff531b..6e684b2ac 100644
--- a/spx-gui/src/components/ui/UIButton.test.ts
+++ b/spx-gui/src/components/ui/UIButton.test.ts
@@ -7,8 +7,8 @@ describe('buttonRecipe', () => {
     const classes = buttonRecipe()
 
     expect(classes.root()).toContain('pb-1')
-    expect(classes.content()).toContain('bg-(--ui-button-bg-color)')
-    expect(classes.content()).toContain('text-(color:--ui-button-color)')
+    expect(classes.content()).toContain('[color:var(--ui-button-color)]')
+    expect(classes.content()).toContain('[background-color:var(--ui-button-bg-color)]')
     expect(classes.icon()).toContain('size-[14px]')
   })
 
@@ -24,7 +24,9 @@ describe('buttonRecipe', () => {
     expect(loadingClasses.root()).toContain('pb-0')
     expect(loadingClasses.content()).toContain('shadow-none')
     expect(disabledClasses.root()).toContain('enabled:active:pb-0')
-    expect(disabledClasses.content()).toContain('bg-(--ui-button-bg-color)')
+    expect(resolveButtonCssVars({ color: 'primary', disabled: true, loading: false })['--ui-button-bg-color']).toBe(
+      'var(--ui-color-disabled-bg)'
+    )
   })
 
   it('lets root extras stay at the layout layer', () => {
@@ -44,7 +46,7 @@ describe('buttonRecipe', () => {
     expect(merged).toContain('h-9')
     expect(merged).toContain('rounded-full')
     expect(merged).not.toContain('h-(--ui-line-height-2)')
-    expect(merged).not.toContain('rounded-2')
+    expect(merged).not.toContain('rounded-md')
   })
 
   it('accepts booleans for boolean-like variants', () => {
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index fc8a577ca..47dbb9554 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -114,10 +114,14 @@ export function resolveButtonCssVars({ color, disabled, loading }: ButtonCssVarS
   return disabled && !loading ? buttonDisabledVars : buttonColorVars[color]
 }
 
+// Keep text size and text color in different utility groups.
+// `text-15` and `text-(color:...)` can be treated as conflicting `text-*`
+// utilities by `twMerge`, so color/background stay on raw CSS properties.
+// TODO: Remove this special-case once app.css migrates numeric text tokens to semantic text-size tokens.
 const buttonSlots = {
   root: 'group/ui-button flex cursor-pointer items-stretch border-none bg-transparent p-0 disabled:cursor-not-allowed',
   content:
-    'flex h-full flex-[1_1_0] items-center justify-center text-(color:--ui-button-color) bg-(--ui-button-bg-color)',
+    'flex h-full flex-[1_1_0] items-center justify-center [color:var(--ui-button-color)] [background-color:var(--ui-button-bg-color)]',
   icon: 'shrink-0'
 } as const
 
@@ -139,8 +143,8 @@ export const buttonRecipe = createRecipe({
     },
     shape: {
       square: {
-        root: 'rounded-2',
-        content: 'rounded-2'
+        root: 'rounded-md',
+        content: 'rounded-md'
       },
       circle: {
         root: 'rounded-full',
diff --git a/spx-gui/src/components/ui/UIButtonGroup.vue b/spx-gui/src/components/ui/UIButtonGroup.vue
index d5c4eb994..175cb1ec1 100644
--- a/spx-gui/src/components/ui/UIButtonGroup.vue
+++ b/spx-gui/src/components/ui/UIButtonGroup.vue
@@ -1,10 +1,15 @@
 <template>
-  <div class="ui-button-group-container">
+  <div :class="rootClass">
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
+import type { InjectionKey } from 'vue'
+
+export type Type = 'icon' | 'text'
+export type Variant = 'primary' | 'secondary'
+
 export const selectedValueInjectionKey: InjectionKey<() => string | undefined> = Symbol('selectedValue')
 export const updateValueInjectionKey: InjectionKey<(value: string) => void> = Symbol('updateValue')
 export const typeInjectionKey: InjectionKey<() => Type> = Symbol('type')
@@ -12,10 +17,13 @@ export const variantInjectionKey: InjectionKey<() => Variant> = Symbol('variant'
 </script>
 
 <script setup lang="ts">
-import { provide, type InjectionKey } from 'vue'
+import { computed, provide, useAttrs } from 'vue'
 
-export type Type = 'icon' | 'text'
-export type Variant = 'primary' | 'secondary'
+import { cn, type ClassValue } from './utils'
+
+defineOptions({
+  inheritAttrs: false
+})
 
 const props = withDefaults(
   defineProps<{
@@ -35,6 +43,9 @@ const emit = defineEmits<{
   'update:value': [string]
 }>()
 
+const attrs = useAttrs()
+const rootClass = computed(() => cn('flex', attrs.class as ClassValue | null))
+
 provide(selectedValueInjectionKey, () => props.value)
 provide(updateValueInjectionKey, (value: string) => {
   emit('update:value', value)
@@ -42,11 +53,3 @@ provide(updateValueInjectionKey, (value: string) => {
 provide(typeInjectionKey, () => props.type)
 provide(variantInjectionKey, () => props.variant)
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-button-group-container {
-    display: flex;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/utils/cn.test.ts b/spx-gui/src/components/ui/utils/cn.test.ts
index 6bdcedf49..632e76d51 100644
--- a/spx-gui/src/components/ui/utils/cn.test.ts
+++ b/spx-gui/src/components/ui/utils/cn.test.ts
@@ -10,6 +10,11 @@ describe('cn', () => {
   })
 
   it('merges conflicting tailwind classes by keeping the later value', () => {
-    expect(cn('px-4 rounded-2', 'px-2', ['rounded-full'])).toBe('px-2 rounded-full')
+    const merged = cn('px-4 rounded-md', 'px-2', ['rounded-full'])
+
+    expect(merged).toContain('px-2')
+    expect(merged).not.toContain('px-4')
+    expect(merged).not.toContain('rounded-md')
+    expect(merged).toContain('rounded-full')
   })
 })
diff --git a/spx-gui/src/components/ui/utils/cn.ts b/spx-gui/src/components/ui/utils/cn.ts
index a80b5375d..076417fe4 100644
--- a/spx-gui/src/components/ui/utils/cn.ts
+++ b/spx-gui/src/components/ui/utils/cn.ts
@@ -3,6 +3,20 @@ import { twMerge } from 'tailwind-merge'
 export type ClassDictionary = Record<string, boolean | null>
 export type ClassValue = string | ClassDictionary | null | false | ClassValue[]
 
+/**
+ * Small class-name helper used by UI components.
+ *
+ * Responsibilities:
+ * - flatten nested arrays / dictionaries / falsey values into a plain class list
+ * - pass the final class string through `tailwind-merge` so later utilities can override earlier ones
+ *
+ * Important boundary:
+ * - merge quality depends on class naming. Standard Tailwind utility names (for example `rounded-md`, `px-2`, `text-15`)
+ *   are much more likely to merge predictably than project-private aliases such as old `rounded-2` style names.
+ * - when two concerns share the same utility namespace, `tailwind-merge` may collapse them together. For example,
+ *   font-size utilities like `text-15` and color shorthands like `text-(color:...)` can conflict. In those cases,
+ *   prefer raw CSS property utilities such as `[color:var(--...)]`.
+ */
 function flattenClassValue(value: ClassValue, tokens: string[]) {
   if (value == null || value === false) return
 
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index bde49d1c3..f1ad797b8 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -390,7 +390,7 @@ const remixesRet = useQuery(
                   <div
                     v-if="runnerState !== 'running'"
                     :class="runnerState === 'initial' ? 'pointer-events-auto' : 'pointer-events-none'"
-                    class="absolute inset-0 z-2 flex items-center justify-center rounded-2 bg-[rgba(36,41,47,0.6)] backdrop-blur-[5px]"
+                    class="absolute inset-0 z-2 flex items-center justify-center rounded-md bg-[rgba(36,41,47,0.6)]"
                   >
                     <template v-if="runnerState === 'initial'">
                       <div v-if="needsSignInToRun" class="h-full w-full flex items-center justify-center p-6">
@@ -428,8 +428,9 @@ const remixesRet = useQuery(
                         :disabled="projectRunnerRef == null"
                         :loading="handleRun.isLoading.value"
                         @click="handleRun.fn"
-                        >{{ $t({ en: 'Run', zh: '运行' }) }}</UIButton
                       >
+                        {{ $t({ en: 'Run', zh: '运行' }) }}
+                      </UIButton>
                     </template>
                   </div>
                 </Transition>
diff --git a/spx-gui/src/pages/community/search.vue b/spx-gui/src/pages/community/search.vue
index 04c1c6fc3..f3c7929f4 100644
--- a/spx-gui/src/pages/community/search.vue
+++ b/spx-gui/src/pages/community/search.vue
@@ -52,7 +52,7 @@
     </ListResultWrapper>
     <footer
       v-show="pageTotal > 1"
-      class="flex-[0_0_56px] w-full flex items-center justify-center rounded-2 border border-grey-400 bg-grey-100"
+      class="flex-[0_0_56px] w-full flex items-center justify-center rounded-md border border-grey-400 bg-grey-100"
     >
       <UIPagination v-model:current="page" :total="pageTotal" />
     </footer>
diff --git a/spx-gui/src/pages/community/user/index.vue b/spx-gui/src/pages/community/user/index.vue
index ec2c29d8c..da371eb07 100644
--- a/spx-gui/src/pages/community/user/index.vue
+++ b/spx-gui/src/pages/community/user/index.vue
@@ -30,7 +30,7 @@ watch(user, (currentUser) => {
 
 <template>
   <CenteredWrapper class="flex-[1_0_auto] flex flex-col gap-5 pt-6 pb-10" size="large">
-    <UIError v-if="error != null" class="flex-[1_1_0] flex rounded-2 bg-grey-100" :retry="refetch">
+    <UIError v-if="error != null" class="flex-[1_1_0] flex rounded-md bg-grey-100" :retry="refetch">
       {{ $t(error.userMessage) }}
     </UIError>
     <template v-else-if="user != null">
diff --git a/spx-gui/src/pages/tutorials/course-series.vue b/spx-gui/src/pages/tutorials/course-series.vue
index 7fa4ec648..16a356c3f 100644
--- a/spx-gui/src/pages/tutorials/course-series.vue
+++ b/spx-gui/src/pages/tutorials/course-series.vue
@@ -109,7 +109,7 @@ const { fn: handleCourseClick } = useMessageHandle(
           {{ $t(courseSeriesError.userMessage) }}
         </UIError>
         <div
-          class="flex-[1_1_200px] aspect-[1.08] overflow-hidden rounded-3"
+          class="flex-[1_1_200px] aspect-[1.08] overflow-hidden rounded-lg"
           :style="{ backgroundImage: `url(${stageBg})` }"
         >
           <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />

From 3c53ec0326aeb9eb1e21c6200b391f2f01466447 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Fri, 10 Apr 2026 08:00:46 +0800
Subject: [PATCH 21/29] migrate UI components to tailwind v4 & remove scss deps

---
 spx-gui/AGENTS.md                             |  21 +--
 spx-gui/package-lock.json                     |  48 +----
 spx-gui/package.json                          |   2 -
 spx-gui/src/app.css                           |   6 +-
 .../asset/gen/common/ListItemWrapper.vue      |   2 +-
 .../components/community/CommunityHeader.vue  |   2 +-
 .../components/community/ProjectsSection.vue  |   2 +-
 .../community/user/content/UserContent.vue    |   2 +-
 .../src/components/copilot/UserMessage.vue    |   2 +-
 .../custom-elements/common/BlockFooter.vue    |   2 +-
 .../editor/common/EditorItemDetail.vue        |   2 +-
 .../components/editor/common/EditorList.vue   |   2 +-
 .../components/editor/navbar/EditorNavbar.vue |   2 +-
 .../stage/widget/detail/MonitorDetail.vue     |   3 +-
 spx-gui/src/components/ui/README.md           |  46 ++++-
 spx-gui/src/components/ui/UIButton.vue        |  12 +-
 spx-gui/src/components/ui/UIButtonGroup.vue   |   6 +-
 .../src/components/ui/UIButtonGroupItem.vue   |  85 +++------
 spx-gui/src/components/ui/UICard.vue          |  30 +--
 spx-gui/src/components/ui/UICardHeader.vue    |  11 +-
 spx-gui/src/components/ui/UIChip.vue          |  60 +++---
 spx-gui/src/components/ui/UICode.vue          |  36 ++--
 spx-gui/src/components/ui/UIImg.vue           |  62 ++++---
 spx-gui/src/components/ui/UINumberInput.vue   |  25 ++-
 spx-gui/src/components/ui/UIPagination.vue    |  74 +++-----
 spx-gui/src/components/ui/UISlider.vue        |  17 +-
 spx-gui/src/components/ui/UISwitch.vue        |   4 -
 spx-gui/src/components/ui/UITag.vue           | 175 ++++++++++--------
 spx-gui/src/components/ui/UITextInput.vue     |  69 +++----
 spx-gui/src/components/ui/UITooltip.vue       |   4 +-
 .../ui/block-items/UIBackdropItem.vue         |  22 +--
 .../components/ui/block-items/UIBlockItem.vue | 162 ++++++++--------
 .../ui/block-items/UIBlockItemTitle.vue       |  60 +++---
 .../ui/block-items/UICornerIcon.vue           |  59 +++---
 .../ui/block-items/UIEditorBackdropItem.vue   |  14 +-
 .../ui/block-items/UIEditorSoundItem.vue      |   9 +-
 .../ui/block-items/UIEditorSpriteItem.vue     |   8 +-
 .../ui/block-items/UIEditorWidgetItem.vue     |  23 +--
 .../components/ui/block-items/UISoundItem.vue |  43 +----
 .../ui/block-items/UISpriteItem.vue           |  10 +-
 .../src/components/ui/collapse/UICollapse.vue |  27 +--
 .../components/ui/collapse/UICollapseItem.vue | 106 ++++-------
 .../components/ui/dialog/UIConfirmDialog.vue  |  10 +-
 spx-gui/src/components/ui/dialog/UIDialog.vue |  36 +---
 spx-gui/src/components/ui/empty/UIEmpty.vue   |  88 ++++-----
 spx-gui/src/components/ui/error/UIError.vue   | 106 +++--------
 spx-gui/src/components/ui/form/UIFormItem.vue |  14 +-
 spx-gui/src/components/ui/icons/UIIcon.vue    |  62 ++++---
 .../ui/loading/UIDetailedLoading.vue          | 121 ++++--------
 .../src/components/ui/loading/UILoading.vue   |  61 +++---
 spx-gui/src/components/ui/menu/UIMenu.vue     |  24 ++-
 .../src/components/ui/menu/UIMenuGroup.vue    |  43 +++--
 spx-gui/src/components/ui/menu/UIMenuItem.vue |  95 ++++------
 .../ui/message/UIMessageProvider.vue          |   9 +-
 .../components/ui/modal/UIDropdownModal.vue   |  54 +-----
 .../src/components/ui/modal/UIFormModal.vue   |  46 +----
 .../components/ui/modal/UIFullScreenModal.vue |  41 ++--
 .../ui/modal/UIFullScreenModalHeader.vue      |  42 +----
 spx-gui/src/components/ui/modal/UIModal.vue   |  18 +-
 .../src/components/ui/modal/UIModalClose.vue  |  70 +++----
 .../components/ui/modal/UISearchableModal.vue |  35 +---
 .../components/ui/radio/UIChipRadioGroup.vue  |  28 +--
 .../src/components/ui/radio/UITabRadio.vue    |  50 +++--
 .../components/ui/radio/UITabRadioGroup.vue   |  35 ++--
 spx-gui/src/components/ui/select/UISelect.vue |  99 +++++-----
 spx-gui/src/components/ui/tab/UITab.vue       |  49 ++---
 spx-gui/src/components/ui/tab/UITabs.vue      |  26 ++-
 .../components/ui/timeline/UITimelineItem.vue |  18 +-
 .../src/widgets/spx-runner/SpxRunner.ce.vue   | 121 ++++++------
 69 files changed, 1096 insertions(+), 1662 deletions(-)

diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 8eb36bf30..0bc5fecaa 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -84,11 +84,11 @@ When working with backend unique string identifiers such as `username`, project
 
 ### Defaults
 
-* Outside `src/components/ui/`, use Tailwind as the default for local layout and surface styling.
+* Use Tailwind as the default for local layout and surface styling.
 * Keep styles local to the page/feature/component. Do not move local styles into `src/app.css`.
-* Prefer readable template utilities and remove redundant local style blocks after migration.
+* Prefer readable template utilities and remove redundant local style blocks when they no longer improve clarity.
 * Prefer direct template utilities over local `@apply` blocks when the styles are only used by one or two template nodes.
-* If local authored styles are still needed, prefer plain CSS over SCSS.
+* If local authored styles are still needed, use plain CSS.
 
 ### Boundaries and Source of Truth
 
@@ -96,7 +96,7 @@ When working with backend unique string identifiers such as `username`, project
 * Keep `src/components/ui/global.css` and `src/components/ui/reset.css` as the base reset/foundation layer (Tailwind preflight stays disabled).
 * Keep `--ui-*` tokens as the source of truth.
 * In Tailwind classes, prefer bridged semantic tokens (for example `text-text`, `text-title`, `bg-primary-100`).
-* In local CSS/SCSS, prefer direct `--ui-*` variables instead of bridged Tailwind variables.
+* In local CSS, prefer direct `--ui-*` variables instead of bridged Tailwind variables.
 
 ### Responsive and Theme Rules
 
@@ -105,16 +105,16 @@ When working with backend unique string identifiers such as `username`, project
 * Prefer responsive CSS/Tailwind variants over `useResponsive()`; keep `useResponsive()` for non-style runtime logic.
 * Keep Tailwind theme namespaces reset to project tokens only (color, shadow, font, text, radius, etc.).
 
-### When Local CSS/SCSS Is Better
+### When Local CSS Is Better
 
-* Keep local CSS/SCSS for `:deep(...)`, generated content, third-party DOM overrides, and complex stateful widgets.
+* Keep local CSS for `:deep(...)`, generated content, third-party DOM overrides, and complex stateful widgets.
 * Keep a small local CSS rule for structural selectors that are awkward in template logic (for example nested `:last-child` rules) instead of encoding them with hard-to-read dynamic class expressions.
 * Prefer plain local CSS over complex Tailwind descendant/arbitrary selectors for cross-component or slot-content styling.
 * Preserve semantic hook classes used by parent selectors or slots (for example `.corner-menu`, `.course-item-mini`).
 * For newly added components, avoid introducing `:deep(...)` selectors and cross-file hook classes when possible, since they increase maintenance cost.
 * Do not force full Tailwind conversion when a small local style block is clearer.
 
-### Practical Migration Notes
+### Practical Styling Notes
 
 * Avoid non-equivalent Tailwind simplifications for flex values. In particular, `flex: 1 1 0` is not equivalent to Tailwind `flex-1` (`flex: 1 1 0%`), so do not simplify between them unless the layout behavior has been verified. Likewise, do not simplify `flex: 0 0 auto` to `shrink-0`; use the equivalent `flex-none` when that shorthand is desired.
 * Prefer `style` / `:style` for one-off values when clearer than Tailwind arbitrary utilities. For example, prefer `style="box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1)"` over a long arbitrary utility such as `shadow-[0_24px_32px_-16px_rgba(0,0,0,0.1)]`.
@@ -125,12 +125,7 @@ When working with backend unique string identifiers such as `username`, project
 * In plain `<style scoped>`, flatten `:deep(...)` selectors (for example `.preview :deep(svg)`) so the final selector structure and specificity stay obvious.
 * Do not use native CSS nesting in plain `<style>` / `<style scoped>` blocks; use flat selectors to avoid browser compatibility issues.
 * Keep single-use values local; only add setup variables when reused/computed or clearly improving readability.
-* Preserve meaningful existing comments/TODOs. For exact local non-token values, keep them local and add a nearby `TODO` for later tokenization review.
-
-### UI Package Transitional Rule
-
-* In `src/components/ui/`, the long-term direction is still Tailwind/plain CSS, but local SCSS is allowed temporarily when it is clearly the most readable option.
-* Do not add or keep business-code imports of SCSS helpers from `src/components/ui/`.
+* Prefer standard Tailwind utility names when practical. For example, use `rounded-md` instead of a project-local alias like `rounded-2`; this keeps overrides more predictable because `tailwind-merge` understands standard utility groups better.
 
 ### Menu Item Text Guidelines
 
diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index aef42a1d5..e836af086 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -54,9 +54,7 @@
         "prettier": "^3.2.2",
         "property-information": "^6.5.0",
         "qiniu-js": "^4.0.0-beta.6",
-        "sass": "^1.69.7",
         "scheduler-polyfill": "^1.3.0",
-        "scss": "^0.2.4",
         "shiki": "^3.2.2",
         "sortablejs": "^1.15.6",
         "tailwind-merge": "^3.5.0",
@@ -3761,6 +3759,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "optional": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -3844,6 +3843,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -4036,6 +4036,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "optional": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -4059,6 +4060,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "optional": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -5424,7 +5426,8 @@
     "node_modules/immutable": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
-      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+      "optional": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.1",
@@ -5471,6 +5474,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "optional": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -7071,6 +7075,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "optional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7096,14 +7101,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/ometa": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz",
-      "integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==",
-      "engines": {
-        "node": ">= 0.2.0"
-      }
-    },
     "node_modules/oniguruma-parser": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.11.2.tgz",
@@ -7565,6 +7562,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "optional": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -7832,40 +7830,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/sass": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.70.0.tgz",
-      "integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==",
-      "peer": true,
-      "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/scheduler-polyfill": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/scheduler-polyfill/-/scheduler-polyfill-1.3.0.tgz",
       "integrity": "sha512-bIjhi/KJqo08wrq+K2rlB6HNPh871KgREPpVti4zv0mSY1dCi3qr0rRCw+SGHc8/gtKceev29sN//lf6KiYa/g==",
       "license": "Apache-2.0"
     },
-    "node_modules/scss": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz",
-      "integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==",
-      "dependencies": {
-        "ometa": "0.2.2"
-      },
-      "engines": {
-        "node": ">= 0.2.0"
-      }
-    },
     "node_modules/seemly": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.8.tgz",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index 2af18f619..dc4d5d250 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -61,9 +61,7 @@
     "prettier": "^3.2.2",
     "property-information": "^6.5.0",
     "qiniu-js": "^4.0.0-beta.6",
-    "sass": "^1.69.7",
     "scheduler-polyfill": "^1.3.0",
-    "scss": "^0.2.4",
     "shiki": "^3.2.2",
     "sortablejs": "^1.15.6",
     "tailwindcss": "^4.2.2",
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index fde25c4cc..57db66c8a 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -252,8 +252,8 @@
   --spacing-middle: var(--ui-gap-middle, 16px);
   --spacing-large: var(--ui-gap-large, 24px);
 
-  /* TODO: Replace the numeric `text-*` aliases below with semantic text tokens (for example `text-button`, `text-body`, `text-heading`). */
-  /* TODO: After the semantic migration, audit components that currently avoid `text-*` color utilities because of `tailwind-merge` conflicts. */
+  /* TODO: Replace the numeric `text-*` aliases below with standard Tailwind size names when practical (for example `text-sm`, `text-base`, `text-lg`). */
+  /* TODO: If semantic `text-*` size names such as `text-button` / `text-body` / `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;
@@ -265,7 +265,7 @@
   --text-15: 15px;
   --text-15--line-height: 1.5;
   --text-16: 16px;
-  --text-16--line-height: 1.5;
+  --text-16--line-height: 26px; /* 通常一起出现的, 设为默认值 */
   --text-18: 18px;
   --text-18--line-height: 1.5;
   --text-20: 20px;
diff --git a/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue b/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
index d7ee9a84a..5c59f9b5a 100644
--- a/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
+++ b/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
@@ -8,7 +8,7 @@ defineEmits<{
 
 <template>
   <div class="w-full flex flex-col gap-3">
-    <header class="text-16/6.5 font-semibold text-grey-1000">
+    <header class="text-16 font-semibold text-grey-1000">
       <slot name="title"></slot>
     </header>
 
diff --git a/spx-gui/src/components/community/CommunityHeader.vue b/spx-gui/src/components/community/CommunityHeader.vue
index bac2ffac3..377437c18 100644
--- a/spx-gui/src/components/community/CommunityHeader.vue
+++ b/spx-gui/src/components/community/CommunityHeader.vue
@@ -3,7 +3,7 @@
 <template>
   <section class="flex-none bg-grey-100">
     <CenteredWrapper class="h-16 flex items-center justify-between gap-5">
-      <h1 class="flex-[1_1_0] min-w-0 truncate text-16/6.5 text-title">
+      <h1 class="flex-[1_1_0] min-w-0 truncate text-16 text-title">
         <slot></slot>
       </h1>
       <label class="flex-none">
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
index 8221c4d87..e430a628b 100644
--- a/spx-gui/src/components/community/ProjectsSection.vue
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -3,7 +3,7 @@
 <template>
   <section :style="{ '--project-num-in-row': numInRow }">
     <header class="flex items-center justify-between" :class="isUserContext ? 'h-15 pt-5 pb-2' : 'h-13'">
-      <h2 class="text-title" :class="isUserContext ? 'text-16/6.5' : 'text-20/7'">
+      <h2 class="text-title" :class="isUserContext ? 'text-16' : 'text-20/7'">
         <slot name="title"></slot>
       </h2>
       <RouterUILink
diff --git a/spx-gui/src/components/community/user/content/UserContent.vue b/spx-gui/src/components/community/user/content/UserContent.vue
index d3bb11123..e693ea343 100644
--- a/spx-gui/src/components/community/user/content/UserContent.vue
+++ b/spx-gui/src/components/community/user/content/UserContent.vue
@@ -11,7 +11,7 @@ import CommunityCard from '../../CommunityCard.vue'
   >
     <header class="mb-2 h-8 flex items-center justify-between gap-5">
       <!-- TODO: Layout here shifts when jumping from `/user/:name` to `/user/:name/projects`, which is not ideal -->
-      <h2 class="text-16/6.5 text-title">
+      <h2 class="text-16 text-title">
         <slot name="title"></slot>
       </h2>
       <div class="flex gap-6">
diff --git a/spx-gui/src/components/copilot/UserMessage.vue b/spx-gui/src/components/copilot/UserMessage.vue
index e09a595a5..31fd53159 100644
--- a/spx-gui/src/components/copilot/UserMessage.vue
+++ b/spx-gui/src/components/copilot/UserMessage.vue
@@ -20,7 +20,7 @@ const avatarUrl = useAvatarUrl(() => signedInUser.value?.avatar)
     <img class="h-8 w-8 rounded-full" :src="avatarUrl ?? undefined" />
     <MarkdownView
       v-if="message.type === 'text'"
-      class="self-stretch rounded-r-1 rounded-b-1 rounded-tl-none bg-[#e9ecf7] p-2"
+      class="self-stretch rounded-sm rounded-tl-none bg-[#e9ecf7] p-2"
       :value="message.content"
     />
     <div v-else-if="message.type === 'event'" class="flex-[1_1_0]">
diff --git a/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue b/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue
index 56a84ec25..1d35587de 100644
--- a/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue
+++ b/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <footer class="flex items-center gap-5 rounded-b-2 border-t border-dividing-line-2 bg-grey-200 px-3 py-1.5">
+  <footer class="flex items-center gap-5 rounded-b-md border-t border-dividing-line-2 bg-grey-200 px-3 py-1.5">
     <slot></slot>
   </footer>
 </template>
diff --git a/spx-gui/src/components/editor/common/EditorItemDetail.vue b/spx-gui/src/components/editor/common/EditorItemDetail.vue
index 55723c9d0..4bb1e2432 100644
--- a/spx-gui/src/components/editor/common/EditorItemDetail.vue
+++ b/spx-gui/src/components/editor/common/EditorItemDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <main
     v-radar="{ name: `Detail for \u0022${name}\u0022`, desc: `Detail view of the selected item \u0022${name}\u0022` }"
-    class="flex-[1_1_0] flex flex-col gap-5 rounded-br-3 bg-grey-200 px-5 py-6"
+    class="flex-[1_1_0] flex flex-col gap-5 rounded-br-lg bg-grey-200 px-5 py-6"
   >
     <h4 class="flex items-center justify-center gap-1">
       <AssetName>{{ name }}</AssetName>
diff --git a/spx-gui/src/components/editor/common/EditorList.vue b/spx-gui/src/components/editor/common/EditorList.vue
index aa1bf5f9f..4046c33c2 100644
--- a/spx-gui/src/components/editor/common/EditorList.vue
+++ b/spx-gui/src/components/editor/common/EditorList.vue
@@ -18,7 +18,7 @@
         <template #trigger>
           <button
             v-radar="addButtonRadarInfo"
-            class="relative z-1 h-11 flex-none cursor-pointer flex items-center justify-center rounded-bl-3 border-none bg-(--editor-list-color-main) text-grey-100 hover:bg-(--editor-list-color-400) active:bg-(--editor-list-color-600)"
+            class="relative z-1 h-11 flex-none cursor-pointer flex items-center justify-center rounded-bl-lg border-none bg-(--editor-list-color-main) text-grey-100 hover:bg-(--editor-list-color-400) active:bg-(--editor-list-color-600)"
           >
             <UIIcon type="plus" />
           </button>
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index da602589a..a428ce2e5 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -432,5 +432,5 @@ const autoSaveStateIcon = computed<AutoSaveStateIcon | null>(() => {
 })
 
 const historyBtnClz =
-  'flex h-full items-center justify-center border-none bg-transparent px-5 text-white outline-none disabled:cursor-not-allowed disabled:text-[#9de6ec] enabled:hover:cursor-pointer enabled:hover:bg-primary-600'
+  'h-full flex items-center justify-center border-none bg-transparent px-5 text-white outline-none disabled:cursor-not-allowed disabled:text-[#9de6ec] enabled:hover:cursor-pointer enabled:hover:bg-primary-600'
 </script>
diff --git a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
index 4dd937a84..e5b49719e 100644
--- a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
+++ b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
@@ -1,11 +1,12 @@
 <template>
   <EditorItemDetail style="background-color: var(--ui-color-grey-100)" :name="monitor.name" @rename="handleRename">
     <div class="flex justify-center gap-8 py-5">
-      <!-- eslint-disable-next-line vue/no-v-html -->
+      <!-- eslint-disable vue/no-v-html -->
       <div
         class="monitor-icon h-24 w-24 flex items-center justify-center rounded-sm bg-grey-300"
         v-html="mntIcon"
       ></div>
+      <!-- eslint-enable vue/no-v-html -->
       <div class="flex flex-col gap-middle">
         <div class="flex items-center gap-middle">
           <p class="flex items-center gap-2 break-keep">
diff --git a/spx-gui/src/components/ui/README.md b/spx-gui/src/components/ui/README.md
index 4fca7ba7b..32e5c9b3c 100644
--- a/spx-gui/src/components/ui/README.md
+++ b/spx-gui/src/components/ui/README.md
@@ -17,6 +17,50 @@
   1. Javascript values with context API
   2. CSS variables with prefix `--ui-`, e.g. `--ui-primary-color`
 
+- Styling conventions
+
+  - For most non-Naive UI components, prefer Tailwind utilities for local structure, layout, and surface styling
+  - Local authored style blocks in the UI package use plain CSS; do not reintroduce SCSS
+  - Keep complex selectors, animations, third-party/global overrides, and other readability-sensitive rules in plain CSS
+  - Preserve component structure and visual behavior; do not add new visual states or remove existing hook classes unless confirmed unused
+  - Preserve existing comments/TODOs; when moving styles, keep still-relevant comments near the migrated logic
+
+- Root class handling
+
+  - Current cases fall into three buckets: DOM-root components with merged utilities, single-root semantic wrappers that rely on inherited classes, and Naive UI-root wrappers whose final class priority can be harder to predict
+  - If the root is a normal DOM element and the component already owns root utility classes, use `cn(..., attrs.class)` so external root classes are merged with `tailwind-merge`
+  - If the component is a single-root wrapper whose styling still depends on semantic hook classes in `@layer components`, prefer Vue's default root attr/class/style inheritance unless explicit root attr control is needed
+  - If the rendered root is primarily a Naive UI component, do not assume external root classes will override reliably. Naive UI's internal styles are not layered with our component styles, so their priority can be higher and the final visual result may be hard to predict
+  - Current Naive UI-root wrappers that need extra care are:
+
+    - `UIConfigProvider` → `NConfigProvider`
+    - `UIDropdown` → `NPopover`
+    - `UITooltip` → `NTooltip`
+    - `UIModal` → `NModal`
+    - `UIMessageProvider` → `NMessageProvider`
+    - `UITextInput` → `NInput`
+    - `UINumberInput` → `NInputNumber`
+    - `UISlider` → `NSlider`
+    - `UISwitch` → `NSwitch`
+    - `UICheckbox` → `NCheckbox`
+    - `UICheckboxGroup` → `NCheckboxGroup`
+    - `UIRadio` → `NRadio`
+    - `UIRadioGroup` → `NRadioGroup`
+    - `UIForm` → `NForm`
+    - `UITimeline` → `NTimeline`
+    - `UITimelineItem` → `NTimelineItem`
+
+  - `UIDivider`, `UIFormItem`, and `UILoading` also use Naive UI internally, but their rendered root is still a wrapper DOM element, so do not group them into the Naive UI-root bucket
+  - For the Naive UI-root wrappers listed above, an external `class` can still be passed, but its root-level visual override is not guaranteed to apply as expected. Do not rely on it for styling-critical behavior; prefer an outer layout wrapper, explicit component props, Naive UI theme overrides, or a dedicated API extension when finer control is needed
+  - This is primarily a component authoring/maintenance concern. The long-term goal is to keep these wrappers easy to consume so business code does not need to carry much Naive UI-specific styling knowledge
+
+- Known `tailwind-merge` limitations
+
+  - Some root color utilities and text-size utilities can still conflict under `tailwind-merge`
+  - When needed, prefer raw CSS property utilities like `[color:var(--color-title)]` as a targeted workaround
+  - Add a `FIXME` when doing so, so the usage can be revisited after the utility/token setup improves
+
 ### Usage
 
-TODO.
+- Import from `@/components/ui`
+- Prefer the component's explicit API over ad hoc external `class` overrides
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index 47dbb9554..bd8bcfe3d 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -119,9 +119,9 @@ export function resolveButtonCssVars({ color, disabled, loading }: ButtonCssVarS
 // utilities by `twMerge`, so color/background stay on raw CSS properties.
 // TODO: Remove this special-case once app.css migrates numeric text tokens to semantic text-size tokens.
 const buttonSlots = {
-  root: 'group/ui-button flex cursor-pointer items-stretch border-none bg-transparent p-0 disabled:cursor-not-allowed',
+  root: 'group/ui-button cursor-pointer flex items-stretch border-none bg-transparent p-0 disabled:cursor-not-allowed',
   content:
-    'flex h-full flex-[1_1_0] items-center justify-center [color:var(--ui-button-color)] [background-color:var(--ui-button-bg-color)]',
+    'flex-[1_1_0] h-full flex items-center justify-center [color:var(--ui-button-color)] [background-color:var(--ui-button-bg-color)]',
   icon: 'shrink-0'
 } as const
 
@@ -154,17 +154,17 @@ export const buttonRecipe = createRecipe({
     size: {
       large: {
         root: 'h-(--ui-line-height-3)',
-        content: 'gap-2 px-6 text-15 leading-[1.6]',
+        content: 'gap-2 px-6 text-15/[1.6]',
         icon: 'size-[18px]'
       },
       medium: {
         root: 'h-(--ui-line-height-2)',
-        content: 'gap-1 px-4 text-[14px] leading-[1.5]',
+        content: 'gap-1 px-4 text-body/[1.5]',
         icon: 'size-[14px]'
       },
       small: {
         root: 'h-(--ui-line-height-1)',
-        content: 'gap-1 px-3 text-13 leading-[1.5]',
+        content: 'gap-1 px-3 text-13/[1.5]',
         icon: 'size-[13px]'
       }
     },
@@ -310,7 +310,7 @@ defineExpose({
     :type="htmlType"
   >
     <span class="ui-button-content" :class="contentClass" :style="contentStyle">
-      <UIIcon v-if="resolvedIcon != null" class="ui-button-icon" :class="iconClass" :type="resolvedIcon" />
+      <UIIcon v-if="resolvedIcon != null" :class="iconClass" :type="resolvedIcon" />
       <slot v-else name="icon"></slot>
       <slot v-if="hasDefaultSlot"></slot>
     </span>
diff --git a/spx-gui/src/components/ui/UIButtonGroup.vue b/spx-gui/src/components/ui/UIButtonGroup.vue
index 175cb1ec1..ab77746dc 100644
--- a/spx-gui/src/components/ui/UIButtonGroup.vue
+++ b/spx-gui/src/components/ui/UIButtonGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="rootClass">
+  <div v-bind="rootAttrs" :class="rootClass">
     <slot></slot>
   </div>
 </template>
@@ -45,6 +45,10 @@ const emit = defineEmits<{
 
 const attrs = useAttrs()
 const rootClass = computed(() => cn('flex', attrs.class as ClassValue | null))
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 
 provide(selectedValueInjectionKey, () => props.value)
 provide(updateValueInjectionKey, (value: string) => {
diff --git a/spx-gui/src/components/ui/UIButtonGroupItem.vue b/spx-gui/src/components/ui/UIButtonGroupItem.vue
index 1d19b3461..4275e4dd8 100644
--- a/spx-gui/src/components/ui/UIButtonGroupItem.vue
+++ b/spx-gui/src/components/ui/UIButtonGroupItem.vue
@@ -1,14 +1,13 @@
 <template>
-  <div
-    :class="['ui-button-group-item', { active: isActive }, `variant-${variant()}`, `type-${type()}`]"
-    @click="handleClick"
-  >
+  <div v-bind="rootAttrs" :class="rootClass" @click="handleClick">
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, inject, useAttrs } from 'vue'
+
+import { cn, type ClassValue } from './utils'
 import {
   selectedValueInjectionKey,
   typeInjectionKey,
@@ -16,6 +15,10 @@ import {
   variantInjectionKey
 } from './UIButtonGroup.vue'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = defineProps<{
   value: string
 }>()
@@ -25,7 +28,28 @@ const updateValue = inject(updateValueInjectionKey)
 const type = inject(typeInjectionKey, () => 'icon')
 const variant = inject(variantInjectionKey, () => 'primary')
 
+const attrs = useAttrs()
 const isActive = computed(() => selectedValue?.() === props.value)
+const rootClass = computed(() =>
+  cn(
+    'h-(--ui-line-height-2) flex items-center justify-center first:rounded-l-md first:rounded-r-none last:rounded-r-md last:rounded-l-none',
+    type() === 'icon' ? 'min-w-8' : 'px-3',
+    // TODO: Revisit color #47d8e4 together with the rest of the UI library when the visual style is unified.
+    variant() === 'primary'
+      ? isActive.value
+        ? 'bg-primary-200 text-primary-400'
+        : 'bg-grey-300 text-grey-1000'
+      : isActive.value
+        ? 'bg-grey-200 text-turquoise-600'
+        : 'bg-[#47d8e4] text-grey-200',
+    isActive.value ? 'cursor-default' : 'cursor-pointer',
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 
 const handleClick = () => {
   if (!isActive.value) {
@@ -33,54 +57,3 @@ const handleClick = () => {
   }
 }
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-button-group-item {
-    height: var(--ui-line-height-2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    &.variant {
-      &-primary {
-        background: var(--ui-color-grey-300);
-        color: var(--ui-color-grey-1000);
-        &.active {
-          background: var(--ui-color-primary-200);
-          color: var(--ui-color-primary-400);
-        }
-      }
-
-      &-secondary {
-        background-color: #47d8e4;
-        color: var(--ui-color-grey-200);
-        &.active {
-          background-color: var(--ui-color-grey-200);
-          color: var(--ui-color-turquoise-600);
-        }
-      }
-    }
-
-    &.type-icon {
-      min-width: 32px;
-    }
-    &.type-text {
-      padding: 0 12px;
-    }
-
-    &.active {
-      cursor: default;
-    }
-
-    &:first-child {
-      border-radius: 12px 0 0 12px;
-    }
-
-    &:last-child {
-      border-radius: 0 12px 12px 0;
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/UICard.vue b/spx-gui/src/components/ui/UICard.vue
index be6caf0e4..84d464648 100644
--- a/spx-gui/src/components/ui/UICard.vue
+++ b/spx-gui/src/components/ui/UICard.vue
@@ -1,16 +1,24 @@
 <template>
-  <div class="ui-card">
+  <div v-bind="rootAttrs" :class="rootClass">
     <slot></slot>
   </div>
 </template>
 
-<style lang="scss">
-@layer components {
-  .ui-card {
-    box-shadow: var(--ui-box-shadow-diffusion);
-    border-radius: var(--ui-border-radius-3);
-    background-color: var(--ui-color-grey-100);
-    overflow: hidden;
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+import { cn, type ClassValue } from './utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn('overflow-hidden rounded-lg bg-grey-100 shadow-diffusion', attrs.class as ClassValue | null)
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+</script>
diff --git a/spx-gui/src/components/ui/UICardHeader.vue b/spx-gui/src/components/ui/UICardHeader.vue
index 5eba3dce8..d85c53d60 100644
--- a/spx-gui/src/components/ui/UICardHeader.vue
+++ b/spx-gui/src/components/ui/UICardHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="main">
+    <div class="flex h-[43px] items-center px-4 text-16">
       <slot></slot>
     </div>
     <UIDivider />
@@ -9,12 +9,3 @@
 <script setup lang="ts">
 import { UIDivider } from '@/components/ui'
 </script>
-<style scoped lang="scss">
-.main {
-  display: flex;
-  align-items: center;
-  height: 43px;
-  padding: 0 16px;
-  font-size: 16px;
-}
-</style>
diff --git a/spx-gui/src/components/ui/UIChip.vue b/spx-gui/src/components/ui/UIChip.vue
index 60a83ad39..86f223376 100644
--- a/spx-gui/src/components/ui/UIChip.vue
+++ b/spx-gui/src/components/ui/UIChip.vue
@@ -1,44 +1,38 @@
 <template>
-  <button class="ui-chip" :class="`type-${type}`">
+  <button v-bind="buttonAttrs" :class="rootClass">
     <slot></slot>
   </button>
 </template>
 
 <script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+import { cn, type ClassValue } from './utils'
+
 export type ChipType = 'primary' | 'boring'
 
-defineProps<{
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps<{
   type: ChipType
 }>()
-</script>
 
-<style lang="scss">
-@layer components {
-  .ui-chip {
-    display: flex;
-    width: fit-content;
-    align-items: center;
-    height: 32px; // TODO: support different sizes
-    padding: 0 16px;
-    color: var(--ui-color-grey-100);
-    background: var(--ui-color-grey-600);
-    border: 1px solid var(--ui-color-grey-600);
-    border-radius: var(--ui-border-radius-2);
-    cursor: pointer;
-    white-space: nowrap;
-    transition: 0.3s;
-
-    &.type-primary {
-      color: var(--ui-color-grey-100);
-      background: var(--ui-color-primary-main);
-      border-color: var(--ui-color-primary-main);
-    }
-
-    &.type-boring {
-      color: var(--ui-color-grey-900);
-      background: var(--ui-color-grey-300);
-      border-color: var(--ui-color-grey-300);
-    }
-  }
-}
-</style>
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn(
+    // TODO: support different sizes
+    'h-8 w-fit flex items-center whitespace-nowrap border rounded-md px-4 cursor-pointer [transition:0.3s]',
+    {
+      'text-grey-100 bg-primary-main border-primary-main': props.type === 'primary',
+      'text-grey-900 bg-grey-300 border-grey-300': props.type === 'boring'
+    },
+    attrs.class as ClassValue | null
+  )
+)
+const buttonAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+</script>
diff --git a/spx-gui/src/components/ui/UICode.vue b/spx-gui/src/components/ui/UICode.vue
index 413654e97..669d3c771 100644
--- a/spx-gui/src/components/ui/UICode.vue
+++ b/spx-gui/src/components/ui/UICode.vue
@@ -1,19 +1,27 @@
 <template>
-  <code class="ui-code">
+  <code v-bind="codeAttrs" :class="rootClass">
     <slot></slot>
   </code>
 </template>
 
-<style lang="scss">
-@layer components {
-  .ui-code {
-    padding: 2px 4px;
-    font-size: 10px;
-    font-family: var(--ui-font-family-code);
-    line-height: 1.6;
-    color: var(--ui-color-primary-main);
-    background-color: var(--ui-color-primary-200);
-    border-radius: 4px;
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+import { cn, type ClassValue } from './utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn(
+    'rounded-[4px] bg-primary-200 px-1 py-[2px] font-code text-10/[1.6] text-primary-main',
+    attrs.class as ClassValue | null
+  )
+)
+const codeAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+</script>
diff --git a/spx-gui/src/components/ui/UIImg.vue b/spx-gui/src/components/ui/UIImg.vue
index 6f071b1c6..ad94ec204 100644
--- a/spx-gui/src/components/ui/UIImg.vue
+++ b/spx-gui/src/components/ui/UIImg.vue
@@ -1,13 +1,19 @@
 <template>
-  <div class="ui-img" :style="imgStyle">
+  <div v-bind="rootAttrs" :class="rootClass" :style="imgStyle">
     <UILoading :visible="loading" cover :mask="false" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useAttrs, type CSSProperties, type StyleValue } from 'vue'
+
+import { cn, type ClassValue } from './utils'
 import UILoading from './loading/UILoading.vue'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = withDefaults(
   defineProps<{
     src: string | null
@@ -20,28 +26,36 @@ const props = withDefaults(
     size: 'contain'
   }
 )
-const imgStyle = computed(() =>
-  props.src == null
-    ? null
-    : {
-        backgroundImage: `url("${props.src}")`,
-        backgroundSize: props.size
-      }
+
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn(
+    // Disable image smoothing to keep pixelated look, so it looks good for pixel art assets.
+    // See details in https://github.com/goplus/builder/issues/2214.
+    'relative flex items-center justify-center bg-center bg-no-repeat [image-rendering:pixelated]',
+    attrs.class as ClassValue | null
+  )
 )
-</script>
+const rootAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
 
-<style lang="scss">
-@layer components {
-  .ui-img {
-    position: relative;
-    background-position: center;
-    background-repeat: no-repeat;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // Disable image smoothing to keep pixelated look, so it looks good for pixel art assets
-    // See details in https://github.com/goplus/builder/issues/2214
-    image-rendering: pixelated;
+const backgroundStyle = computed<CSSProperties | null>(() => {
+  if (props.src == null) return null
+  return {
+    backgroundImage: `url("${props.src}")`,
+    backgroundSize: props.size
   }
-}
-</style>
+})
+
+const imgStyle = computed<StyleValue | null>(() => {
+  if (attrs.style == null) {
+    return backgroundStyle.value
+  }
+  if (backgroundStyle.value == null) {
+    return attrs.style as StyleValue
+  }
+  return [attrs.style as StyleValue, backgroundStyle.value] as StyleValue
+})
+</script>
diff --git a/spx-gui/src/components/ui/UINumberInput.vue b/spx-gui/src/components/ui/UINumberInput.vue
index b1d19bc91..5a7ffcff7 100644
--- a/spx-gui/src/components/ui/UINumberInput.vue
+++ b/spx-gui/src/components/ui/UINumberInput.vue
@@ -45,19 +45,16 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.ui-number-input :deep(> .n-input) {
-  // it's not possible to control input's hovered-bg-color with themeOverrides,
-  // so we do background color control here
-  &:not(.n-input--focus, .n-input--error-status, .n-input--disabled) {
-    background-color: var(--ui-color-grey-300);
-    &:hover {
-      background-color: var(--ui-color-grey-400);
-    }
-  }
-
-  .n-input__prefix {
-    margin-right: 8px;
-  }
+<style scoped>
+/* it's not possible to control input's hovered-bg-color with themeOverrides, */
+/* so we do background color control here */
+.ui-number-input :deep(> .n-input):not(.n-input--focus, .n-input--error-status, .n-input--disabled) {
+  background-color: var(--ui-color-grey-300);
+}
+.ui-number-input :deep(> .n-input):not(.n-input--focus, .n-input--error-status, .n-input--disabled):hover {
+  background-color: var(--ui-color-grey-400);
+}
+.ui-number-input :deep(> .n-input .n-input__prefix) {
+  margin-right: 8px;
 }
 </style>
diff --git a/spx-gui/src/components/ui/UIPagination.vue b/spx-gui/src/components/ui/UIPagination.vue
index 6918f7daa..34943958f 100644
--- a/spx-gui/src/components/ui/UIPagination.vue
+++ b/spx-gui/src/components/ui/UIPagination.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="ui-pagination-container">
-    <button class="ui-pagination-button" :disabled="current === 1" @click="prevPage">
+  <div v-bind="rootAttrs" :class="rootClass">
+    <button :class="buttonClass()" :disabled="current === 1" @click="prevPage">
       <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M8.74984 11.6667C8.6005 11.6667 8.45115 11.6096 8.3374 11.4959L4.25407 7.41252C4.02599 7.18443 4.02599 6.81573 4.25407 6.58765L8.3374 2.50431C8.56549 2.27623 8.93419 2.27623 9.16227 2.50431C9.39036 2.7324 9.39036 3.1011 9.16227 3.32918L5.49137 7.00008L9.16227 10.671C9.39036 10.8991 9.39036 11.2678 9.16227 11.4959C9.04852 11.6096 8.89917 11.6667 8.74984 11.6667Z"
@@ -22,12 +22,12 @@
         <circle cx="16" cy="16" r="2" fill="#CBD2D8" />
         <circle cx="24" cy="16" r="2" fill="#CBD2D8" />
       </svg>
-      <button v-else :class="['ui-pagination-button', { active: page === current }]" @click="goToPage(page)">
+      <button v-else :class="buttonClass(page === current)" @click="goToPage(page)">
         {{ page }}
       </button>
     </template>
 
-    <button class="ui-pagination-button" :disabled="current === total" @click="nextPage">
+    <button :class="buttonClass()" :disabled="current === total" @click="nextPage">
       <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M5.25 11.6667C5.10067 11.6667 4.95132 11.6096 4.83757 11.4959C4.60948 11.2678 4.60948 10.8991 4.83757 10.671L8.50847 7.00008L4.83757 3.32918C4.60948 3.1011 4.60948 2.7324 4.83757 2.50431C5.06565 2.27623 5.43435 2.27623 5.66244 2.50431L9.74577 6.58765C9.97385 6.81573 9.97385 7.18443 9.74577 7.41252L5.66244 11.4959C5.54869 11.6096 5.39933 11.6667 5.25 11.6667Z"
@@ -39,7 +39,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
+import { cn, type ClassValue } from './utils'
+
+defineOptions({
+  inheritAttrs: false
+})
 
 const props = defineProps<{
   /** Total page num */
@@ -51,6 +56,19 @@ const emit = defineEmits<{
   'update:current': [number]
 }>()
 
+const attrs = useAttrs()
+const rootClass = computed(() => cn('flex gap-2', attrs.class as ClassValue | null))
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+const buttonClass = (active = false) =>
+  cn(
+    'h-8 w-8 flex items-center justify-center rounded-sm border-none bg-grey-300 text-body font-semibold text-grey-900',
+    'focus:outline-none enabled:hover:bg-grey-400 disabled:cursor-not-allowed disabled:bg-grey-300 disabled:text-grey-700',
+    active ? 'bg-primary-500 text-grey-100 enabled:hover:bg-primary-500' : null
+  )
+
 const prevPage = () => {
   if (props.current > 1) {
     emit('update:current', props.current - 1)
@@ -115,49 +133,3 @@ const pages = computed(() => {
   return result
 })
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-pagination-container {
-    display: flex;
-    gap: 8px;
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-.ui-pagination-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  border: none;
-  background-color: var(--ui-color-grey-300);
-  color: var(--ui-color-grey-900);
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: 600;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--ui-color-grey-400);
-  }
-
-  &.active {
-    background-color: var(--ui-color-primary-500);
-    color: var(--ui-color-grey-100);
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    background-color: var(--ui-color-grey-300);
-    color: var(--ui-color-grey-700);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/UISlider.vue b/spx-gui/src/components/ui/UISlider.vue
index 89531dfb5..5cef730ac 100644
--- a/spx-gui/src/components/ui/UISlider.vue
+++ b/spx-gui/src/components/ui/UISlider.vue
@@ -11,7 +11,10 @@
     @update:value="handleUpdateValue"
   >
     <template #thumb>
-      <div class="thumb" :style="{ boxShadow }"></div>
+      <div
+        class="h-5 w-5 rounded-full bg-white transition-transform duration-200 hover:scale-120"
+        :style="{ boxShadow }"
+      ></div>
     </template>
   </NSlider>
 </template>
@@ -58,15 +61,3 @@ function handleUpdateValue(nextValue: number) {
   emit('update:value', nextValue)
 }
 </script>
-<style lang="scss" scoped>
-.thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background-color: #fff;
-  transition: transform 0.2s;
-  &:hover {
-    transform: scale(1.2);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/UISwitch.vue b/spx-gui/src/components/ui/UISwitch.vue
index 8c4b2121e..ee35d18a8 100644
--- a/spx-gui/src/components/ui/UISwitch.vue
+++ b/spx-gui/src/components/ui/UISwitch.vue
@@ -16,7 +16,3 @@ const emit = defineEmits<{
   'update:value': [boolean]
 }>()
 </script>
-
-<style lang="scss" scoped>
-// TODO: switch style not designed yet
-</style>
diff --git a/spx-gui/src/components/ui/UITag.vue b/spx-gui/src/components/ui/UITag.vue
index 261be13dd..ef8679d33 100644
--- a/spx-gui/src/components/ui/UITag.vue
+++ b/spx-gui/src/components/ui/UITag.vue
@@ -5,11 +5,16 @@ export type TagSize = 'small'
 </script>
 
 <script setup lang="ts">
-import { useSlots } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
+import { cn, type ClassValue } from './utils'
 
 import UIIcon from './icons/UIIcon.vue'
 
-withDefaults(
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(
   defineProps<{
     variant?: TagVariant
     color?: TagColor
@@ -33,23 +38,32 @@ const emit = defineEmits<{
 }>()
 
 const slots = useSlots()
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn(
+    'ui-tag',
+    `ui-tag-variant-${props.variant}`,
+    `ui-tag-color-${props.color}`,
+    `ui-tag-size-${props.size}`,
+    {
+      'ui-tag-checkable': !!props.checkable,
+      'ui-tag-checked': props.checkable ? props.checkable.checked : false
+    },
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 </script>
 
 <template>
-  <button
-    class="ui-tag"
-    :class="[
-      `variant-${variant}`,
-      `color-${color}`,
-      `ui-tag-size-${size}`,
-      { checkable: !!checkable, checked: checkable ? checkable.checked : false }
-    ]"
-    :disabled="disabled"
-  >
+  <button v-bind="rootAttrs" :class="rootClass" :disabled="disabled">
     <slot></slot>
     <UIIcon
       v-if="slots.suffix == null && closable && !disabled"
-      class="close-icon"
+      class="ui-tag-close-icon"
       type="close"
       @click.stop="emit('close')"
     />
@@ -57,7 +71,7 @@ const slots = useSlots()
   </button>
 </template>
 
-<style lang="scss">
+<style>
 @layer components {
   .ui-tag {
     display: flex;
@@ -75,117 +89,114 @@ const slots = useSlots()
       background-color 0.3s,
       border-color 0.3s,
       color 0.3s;
+  }
 
-    &:active,
-    &:focus {
-      outline: none;
-    }
+  .ui-tag:active,
+  .ui-tag:focus {
+    outline: none;
+  }
 
-    &:disabled {
-      cursor: not-allowed;
-      --ui-tag-color: var(--ui-color-grey-600);
-    }
+  .ui-tag:disabled {
+    cursor: not-allowed;
+    --ui-tag-color: var(--ui-color-grey-600);
   }
-}
-</style>
-<style lang="scss" scoped>
-.ui-tag {
-  .close-icon {
+  .ui-tag .ui-tag-close-icon {
     cursor: pointer;
     width: var(--ui-tag-close-icon-size);
     height: var(--ui-tag-close-icon-size);
     color: var(--ui-tag-color);
+  }
 
-    &:hover {
-      border-radius: 100%;
-    }
+  .ui-tag .ui-tag-close-icon:hover {
+    border-radius: 100%;
   }
 
-  &.checkable:not(:disabled):hover,
-  &.checked:not(:disabled) {
+  .ui-tag.ui-tag-checkable:not(:disabled):hover,
+  .ui-tag.ui-tag-checked:not(:disabled) {
     cursor: pointer;
     --ui-tag-color: var(--ui-color-primary-main);
     --ui-tag-border-color: var(--ui-color-primary-300);
+  }
 
-    .close-icon:hover {
-      background: var(--ui-color-primary-300);
-    }
+  .ui-tag.ui-tag-checkable:not(:disabled):hover .ui-tag-close-icon:hover,
+  .ui-tag.ui-tag-checked:not(:disabled) .ui-tag-close-icon:hover {
+    background: var(--ui-color-primary-300);
   }
 
-  &.checkable:not(:disabled):hover {
+  .ui-tag.ui-tag-checkable:not(:disabled):hover {
     --ui-tag-bg-color: var(--ui-color-primary-100);
   }
 
-  &.checked:not(:disabled) {
+  .ui-tag.ui-tag-checked:not(:disabled) {
     --ui-tag-bg-color: var(--ui-color-primary-200);
   }
-}
 
-// variant
-.variant-stroke {
-  border: 1px solid var(--ui-tag-border-color);
-  background: var(--ui-tag-bg-color);
+  /* variant */
+  .ui-tag.ui-tag-variant-stroke {
+    border: 1px solid var(--ui-tag-border-color);
+    background: var(--ui-tag-bg-color);
+  }
 
-  &:disabled {
+  .ui-tag.ui-tag-variant-stroke:disabled {
     --ui-tag-bg-color: var(--ui-color-grey-300);
     --ui-tag-border-color: var(--ui-color-grey-400);
   }
-}
 
-.variant-none {
-  border: none;
-  background: none;
-}
+  .ui-tag.ui-tag-variant-none {
+    border: none;
+    background: none;
+  }
 
-// color
-.color-default {
-  --ui-tag-color: var(--ui-color-grey-900);
-  --ui-tag-bg-color: var(--ui-color-grey-300);
-  --ui-tag-border-color: var(--ui-color-grey-400);
+  /* color */
+  .ui-tag.ui-tag-color-default {
+    --ui-tag-color: var(--ui-color-grey-900);
+    --ui-tag-bg-color: var(--ui-color-grey-300);
+    --ui-tag-border-color: var(--ui-color-grey-400);
+  }
 
-  .close-icon:hover {
+  .ui-tag.ui-tag-color-default .ui-tag-close-icon:hover {
     background: var(--ui-color-grey-400);
   }
-}
 
-.color-primary {
-  --ui-tag-color: var(--ui-color-primary-main);
-  --ui-tag-bg-color: var(--ui-color-primary-200);
-  --ui-tag-border-color: var(--ui-color-primary-300);
+  .ui-tag.ui-tag-color-primary {
+    --ui-tag-color: var(--ui-color-primary-main);
+    --ui-tag-bg-color: var(--ui-color-primary-200);
+    --ui-tag-border-color: var(--ui-color-primary-300);
+  }
 
-  .close-icon:hover {
+  .ui-tag.ui-tag-color-primary .ui-tag-close-icon:hover {
     background: var(--ui-color-primary-300);
   }
-}
 
-.color-warning {
-  --ui-tag-color: var(--ui-color-yellow-500);
-  --ui-tag-bg-color: var(--ui-color-yellow-200);
-  --ui-tag-border-color: var(--ui-color-yellow-300);
+  .ui-tag.ui-tag-color-warning {
+    --ui-tag-color: var(--ui-color-yellow-500);
+    --ui-tag-bg-color: var(--ui-color-yellow-200);
+    --ui-tag-border-color: var(--ui-color-yellow-300);
+  }
 
-  .close-icon:hover {
+  .ui-tag.ui-tag-color-warning .ui-tag-close-icon:hover {
     background: var(--ui-color-yellow-300);
   }
-}
 
-.color-error {
-  --ui-tag-color: var(--ui-color-red-500);
-  --ui-tag-bg-color: var(--ui-color-red-200);
-  --ui-tag-border-color: var(--ui-color-red-300);
+  .ui-tag.ui-tag-color-error {
+    --ui-tag-color: var(--ui-color-red-500);
+    --ui-tag-bg-color: var(--ui-color-red-200);
+    --ui-tag-border-color: var(--ui-color-red-300);
+  }
 
-  .close-icon:hover {
+  .ui-tag.ui-tag-color-error .ui-tag-close-icon:hover {
     background: var(--ui-color-red-300);
   }
-}
 
-// size
-.ui-tag-size-small {
-  --ui-tag-padding: 0 8px;
-  --ui-tag-height: 20px;
-  --ui-tag-font-size: 12px;
-  --ui-tag-line-height: 1.5;
-  --ui-tag-border-radius: 4px;
-  --ui-tag-gap: 4px;
-  --ui-tag-close-icon-size: 14px;
+  /* size */
+  .ui-tag.ui-tag-size-small {
+    --ui-tag-padding: 0 8px;
+    --ui-tag-height: 20px;
+    --ui-tag-font-size: 12px;
+    --ui-tag-line-height: 1.5;
+    --ui-tag-border-radius: 4px;
+    --ui-tag-gap: 4px;
+    --ui-tag-close-icon-size: 14px;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/UITextInput.vue b/spx-gui/src/components/ui/UITextInput.vue
index d59b54de1..c0247642e 100644
--- a/spx-gui/src/components/ui/UITextInput.vue
+++ b/spx-gui/src/components/ui/UITextInput.vue
@@ -16,7 +16,11 @@
       <slot name="prefix"></slot>
     </template>
     <template v-if="(value && clearable) || !!slots.suffix" #suffix>
-      <div v-if="value && clearable" class="clear" @click="emit('update:value', '')">
+      <div
+        v-if="value && clearable"
+        class="-mr-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full text-grey-800 transition-colors duration-200 hover:bg-grey-400 active:bg-grey-500"
+        @click="emit('update:value', '')"
+      >
         <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M6.70713 5.99999L9.35363 3.35347C9.54913 3.15847 9.54913 2.8415 9.35363 2.6465C9.15813 2.451 8.84212 2.451 8.64663 2.6465L6.00013 5.29299L3.35363 2.6465C3.15813 2.451 2.84212 2.451 2.64662 2.6465C2.45112 2.8415 2.45112 3.15847 2.64662 3.35347L5.29312 5.99999L2.64662 8.6465C2.45112 8.8415 2.45112 9.15847 2.64662 9.35347C2.74412 9.45097 2.87213 9.49999 3.00013 9.49999C3.12813 9.49999 3.25613 9.45097 3.35363 9.35347L6.00013 6.70699L8.64663 9.35347C8.74412 9.45097 8.87213 9.49999 9.00013 9.49999C9.12813 9.49999 9.25613 9.45097 9.35363 9.35347C9.54913 9.15847 9.54913 8.8415 9.35363 8.6465L6.70713 5.99999Z"
@@ -70,31 +74,26 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.ui-text-input {
-  // it's not possible to control input's hovered-bg-color with themeOverrides,
-  // so we do background color control here
-  &:not(.n-input--focus, .n-input--error-status, .n-input--success-status) {
-    background: var(--ui-text-input-bg-color);
-  }
-  &:not(.n-input--focus, .n-input--disabled):hover {
-    background: var(--ui-text-input-bg-color-hover);
-  }
-  :deep(.n-input__input-el) {
-    height: var(--ui-text-input-height);
-  }
-  &.n-input--success-status {
-    :deep(.n-input__state-border) {
-      border: 1px solid var(--ui-color-success-main);
-    }
-  }
-
-  :deep(.n-input__prefix) {
-    margin-right: 8px;
-  }
+<style scoped>
+/* it's not possible to control input's hovered-bg-color with themeOverrides, */
+/* so we do background color control here */
+.ui-text-input:not(.n-input--focus, .n-input--error-status, .n-input--success-status) {
+  background: var(--ui-text-input-bg-color);
+}
+.ui-text-input:not(.n-input--focus, .n-input--disabled):hover {
+  background: var(--ui-text-input-bg-color-hover);
+}
+.ui-text-input :deep(.n-input__input-el) {
+  height: var(--ui-text-input-height);
+}
+.ui-text-input.n-input--success-status :deep(.n-input__state-border) {
+  border: 1px solid var(--ui-color-success-main);
+}
+.ui-text-input :deep(.n-input__prefix) {
+  margin-right: 8px;
 }
 
-// color
+/* color */
 .color-default {
   --ui-text-input-bg-color: var(--ui-color-grey-300);
   --ui-text-input-bg-color-hover: var(--ui-color-grey-400);
@@ -105,31 +104,11 @@ onMounted(() => {
   --ui-text-input-bg-color-hover: var(--ui-color-grey-100);
 }
 
-// size
+/* size */
 .ui-input-size-medium {
   --ui-text-input-height: 32px;
 }
 .ui-input-size-large {
   --ui-text-input-height: 40px;
 }
-
-.clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: var(--ui-color-grey-800);
-  transition: background-color 0.2s;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  margin-right: -4px;
-
-  &:hover {
-    background-color: var(--ui-color-grey-400);
-  }
-  &:active {
-    background-color: var(--ui-color-grey-500);
-  }
-}
 </style>
diff --git a/spx-gui/src/components/ui/UITooltip.vue b/spx-gui/src/components/ui/UITooltip.vue
index 77d57cdc2..a7bccf8b2 100644
--- a/spx-gui/src/components/ui/UITooltip.vue
+++ b/spx-gui/src/components/ui/UITooltip.vue
@@ -51,13 +51,13 @@ const emit = defineEmits<{
 const attachTo = usePopupContainer()
 </script>
 
-<style lang="scss">
+<style>
 /*
   Now the style is broken with scoped <style>, the `data-v-xxx` is not correctly applied on `NTooltip` element
   TODO: use scoped style
 */
 .ui-tooltip {
-  font-size: 12px; // TODO: some text-size related var?
+  font-size: 12px; /* TODO: some text-size related var? */
   line-height: 1.5;
 }
 </style>
diff --git a/spx-gui/src/components/ui/block-items/UIBackdropItem.vue b/spx-gui/src/components/ui/block-items/UIBackdropItem.vue
index c528b1ca1..005cc9cbc 100644
--- a/spx-gui/src/components/ui/block-items/UIBackdropItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIBackdropItem.vue
@@ -1,11 +1,11 @@
 <template>
   <UIBlockItem
-    class="ui-backdrop-item"
+    class="gap-0.5 p-0.5"
     size="large"
     :active="selectable && selectable.selected"
     :interactive="!!selectable"
   >
-    <UIImg class="img" :src="imgSrc" :loading="imgLoading" />
+    <UIImg class="h-[98px] w-[132px] overflow-hidden rounded-[9px]" :src="imgSrc" :loading="imgLoading" />
     <UIBlockItemTitle size="large">
       {{ name }}
     </UIBlockItemTitle>
@@ -29,21 +29,3 @@ withDefaults(
   }
 )
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-block-item.ui-backdrop-item {
-    padding: 2px;
-    gap: 2px;
-  }
-}
-</style>
-
-<style scoped lang="scss">
-.img {
-  height: 98px;
-  width: 132px;
-  overflow: hidden;
-  border-radius: 9px;
-}
-</style>
diff --git a/spx-gui/src/components/ui/block-items/UIBlockItem.vue b/spx-gui/src/components/ui/block-items/UIBlockItem.vue
index f890c74b4..3c22f3b9d 100644
--- a/spx-gui/src/components/ui/block-items/UIBlockItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIBlockItem.vue
@@ -50,20 +50,14 @@ const style = computed(() => ({
 }))
 </script>
 
-<style lang="scss">
+<style>
 @layer components {
   .ui-block-item {
     width: var(--block-item-size);
     height: var(--block-item-size);
-    // it may shrink without min-width / min-height
+    /* it may shrink without min-width / min-height */
     min-width: var(--block-item-size);
     min-height: var(--block-item-size);
-    &.ui-block-item-medium {
-      --block-item-size: 88px;
-    }
-    &.ui-block-item-large {
-      --block-item-size: 140px;
-    }
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -71,77 +65,89 @@ const style = computed(() => ({
     border-radius: var(--ui-border-radius-2);
     border: 2px solid var(--ui-color-grey-300);
     background-color: var(--ui-color-grey-300);
+  }
+
+  .ui-block-item.ui-block-item-medium {
+    --block-item-size: 88px;
+  }
+
+  .ui-block-item.ui-block-item-large {
+    --block-item-size: 140px;
+  }
+
+  .ui-block-item.ui-block-item-interactive {
+    cursor: pointer;
+  }
+
+  .ui-block-item.ui-block-item-colorful {
+    border-color: var(--color-background-faint);
+    background-color: var(--color-background-faint);
+  }
+
+  /* About `.drag-and-drop-disable-hover`: see `src/utils/drag-and-drop.ts` */
+  .ui-block-item.ui-block-item-colorful.ui-block-item-interactive:hover:not(.drag-and-drop-disable-hover):not(
+      .ui-block-item-active
+    ) {
+    border-color: var(--color-background);
+    background-color: var(--color-background);
+  }
+
+  .ui-block-item.ui-block-item-colorful.ui-block-item-active {
+    border-color: var(--color-outline);
+    background-color: var(--color-background);
+  }
+
+  /* TODO: droppable-related styles for colorful variant */
+
+  .ui-block-item.ui-block-item-standard {
+    border-color: var(--ui-color-grey-300);
+    background-color: var(--ui-color-grey-300);
+  }
+
+  /* About `.drag-and-drop-disable-hover`: see `src/utils/drag-and-drop.ts` */
+  .ui-block-item.ui-block-item-standard.ui-block-item-interactive:hover:not(.drag-and-drop-disable-hover):not(
+      .ui-block-item-active
+    ) {
+    border-color: var(--ui-color-grey-400);
+    background-color: var(--ui-color-grey-400);
+  }
+
+  .ui-block-item.ui-block-item-standard.ui-block-item-active {
+    border-color: var(--color-outline);
+    background-color: var(--color-background);
+  }
+
+  .ui-block-item.ui-block-item-standard.ui-block-item-active.ui-block-item-draggable {
+    cursor: grab;
+  }
+
+  .ui-block-item.ui-block-item-standard.ui-block-item-droppable-accept {
+    border-color: var(--ui-color-grey-400);
+    background-color: var(--ui-color-grey-400);
+  }
+
+  .ui-block-item.ui-block-item-standard.ui-block-item-droppable-over {
+    animation: droppable-shaking 0.2s ease-in-out 2;
+    border-color: var(--color-outline);
+    background-color: var(--ui-color-grey-400);
+  }
+}
 
-    &.ui-block-item-interactive {
-      cursor: pointer;
-    }
-
-    &.ui-block-item-colorful {
-      border-color: var(--color-background-faint);
-      background-color: var(--color-background-faint);
-
-      // About `.drag-and-drop-disable-hover`: see `src/utils/drag-and-drop.ts`
-      &.ui-block-item-interactive:hover:not(.drag-and-drop-disable-hover):not(.ui-block-item-active) {
-        border-color: var(--color-background);
-        background-color: var(--color-background);
-      }
-
-      &.ui-block-item-active {
-        border-color: var(--color-outline);
-        background-color: var(--color-background);
-      }
-
-      // TODO: droppable-related styles for colorful variant
-    }
-
-    &.ui-block-item-standard {
-      border-color: var(--ui-color-grey-300);
-      background-color: var(--ui-color-grey-300);
-
-      // About `.drag-and-drop-disable-hover`: see `src/utils/drag-and-drop.ts`
-      &.ui-block-item-interactive:hover:not(.drag-and-drop-disable-hover):not(.ui-block-item-active) {
-        border-color: var(--ui-color-grey-400);
-        background-color: var(--ui-color-grey-400);
-      }
-
-      &.ui-block-item-active {
-        border-color: var(--color-outline);
-        background-color: var(--color-background);
-      }
-
-      &.ui-block-item-active.ui-block-item-draggable {
-        cursor: grab;
-      }
-
-      &.ui-block-item-droppable-accept {
-        border-color: var(--ui-color-grey-400);
-        background-color: var(--ui-color-grey-400);
-      }
-
-      &.ui-block-item-droppable-over {
-        animation: droppable-shaking 0.2s ease-in-out 2;
-        border-color: var(--color-outline);
-        background-color: var(--ui-color-grey-400);
-
-        @keyframes droppable-shaking {
-          0% {
-            transform: scale(1.07) rotate(0deg);
-          }
-          25% {
-            transform: scale(1.07) rotate(5deg);
-          }
-          50% {
-            transform: scale(1.07) rotate(0deg);
-          }
-          75% {
-            transform: scale(1.07) rotate(-5deg);
-          }
-          100% {
-            transform: scale(1.07) rotate(0deg);
-          }
-        }
-      }
-    }
+@keyframes droppable-shaking {
+  0% {
+    transform: scale(1.07) rotate(0deg);
+  }
+  25% {
+    transform: scale(1.07) rotate(5deg);
+  }
+  50% {
+    transform: scale(1.07) rotate(0deg);
+  }
+  75% {
+    transform: scale(1.07) rotate(-5deg);
+  }
+  100% {
+    transform: scale(1.07) rotate(0deg);
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
index 95beca615..9520b3dad 100644
--- a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -1,51 +1,35 @@
 <template>
-  <div :class="['ui-title-container', size]">
-    <span>
+  <div v-bind="rootAttrs" :class="rootClass">
+    <span class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
       <slot></slot>
     </span>
     <slot v-if="slots.suffix != null" name="suffix"></slot>
   </div>
 </template>
 <script setup lang="ts">
-import { useSlots } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
+import { cn, type ClassValue } from '../utils'
 
-defineProps<{
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps<{
   size: 'medium' | 'large'
 }>()
 
 const slots = useSlots()
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn(
+    // FIXME: `[color:var(--color-title)]` switch back to semantic `text-title` once `text-*` token merging no longer conflicts with text-size utilities.
+    'w-full flex items-center gap-2 px-1.5 text-center [color:var(--color-title)]',
+    props.size === 'large' ? 'h-8 text-13/5' : 'text-10/[1.6]',
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-title-container {
-    display: flex;
-    align-items: center;
-    color: var(--ui-color-title);
-    width: 100%;
-    text-align: center;
-    gap: 8px;
-    padding: 0 6px;
-
-    &.medium {
-      font-size: 10px;
-      line-height: 16px;
-    }
-
-    &.large {
-      font-size: 13px;
-      line-height: 20px;
-      height: 32px;
-    }
-  }
-}
-</style>
-
-<style scoped lang="scss">
-.ui-title-container > span {
-  overflow: hidden;
-  flex: 1;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-</style>
diff --git a/spx-gui/src/components/ui/block-items/UICornerIcon.vue b/spx-gui/src/components/ui/block-items/UICornerIcon.vue
index ccf5ec7ac..a3229c2fb 100644
--- a/spx-gui/src/components/ui/block-items/UICornerIcon.vue
+++ b/spx-gui/src/components/ui/block-items/UICornerIcon.vue
@@ -1,18 +1,23 @@
 <!-- icon at the top-right corner of block-item -->
 
 <template>
-  <div class="ui-corner-icon" :style="cssVars" @click.stop="emit('click', $event)">
-    <UIIcon class="icon" :type="type" />
+  <div v-bind="rootAttrs" :class="rootClass" :style="rootStyle" @click.stop="emit('click', $event)">
+    <UIIcon class="h-4 w-4" :type="type" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useAttrs, type StyleValue } from 'vue'
+import { cn, type ClassValue } from '../utils'
 import UIIcon, { type Type as IconType } from '../icons/UIIcon.vue'
 import type { Color } from '../tokens/colors'
 import { useUIVariables } from '../UIConfigProvider.vue'
 import { getCssVars } from '../tokens/utils'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = withDefaults(
   defineProps<{
     type: IconType
@@ -27,41 +32,19 @@ const emit = defineEmits<{
   click: [MouseEvent]
 }>()
 
+const attrs = useAttrs()
 const uiVariables = useUIVariables()
 const cssVars = computed(() => getCssVars('--ui-corner-icon-color-', uiVariables.color[props.color]))
+const rootClass = computed(() =>
+  cn(
+    'absolute -top-1.5 -right-1.5 h-6 w-6 flex items-center justify-center rounded-full cursor-pointer',
+    'text-grey-100 bg-(--ui-corner-icon-color-main) hover:bg-(--ui-corner-icon-color-400) active:bg-(--ui-corner-icon-color-600)',
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+const rootStyle = computed<StyleValue>(() => [attrs.style as StyleValue, cssVars.value])
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-corner-icon {
-    position: absolute;
-    top: -6px;
-    right: -6px;
-
-    display: flex;
-    width: 24px;
-    height: 24px;
-    justify-content: center;
-    align-items: center;
-
-    color: var(--ui-color-grey-100);
-    border-radius: 50%;
-    background: var(--ui-corner-icon-color-main);
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--ui-corner-icon-color-400);
-    }
-    &:active {
-      background-color: var(--ui-corner-icon-color-600);
-    }
-  }
-}
-</style>
-
-<style scoped lang="scss">
-.ui-corner-icon .icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
diff --git a/spx-gui/src/components/ui/block-items/UIEditorBackdropItem.vue b/spx-gui/src/components/ui/block-items/UIEditorBackdropItem.vue
index bd6bb2130..75b6bb058 100644
--- a/spx-gui/src/components/ui/block-items/UIEditorBackdropItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIEditorBackdropItem.vue
@@ -1,7 +1,7 @@
 <template>
   <UIBlockItem :color="color" :active="selectable && selectable.selected" :interactive="!!selectable">
-    <div class="img-container">
-      <UIImg class="img" :src="imgSrc" :loading="imgLoading" />
+    <div class="mt-3 mb-3.5">
+      <UIImg class="h-[39px] w-[52px] rounded-[4px]" :src="imgSrc" :loading="imgLoading" />
     </div>
     <UIBlockItemTitle size="medium">
       {{ name }}
@@ -28,13 +28,3 @@ withDefaults(
   }
 )
 </script>
-<style scoped lang="scss">
-.img-container {
-  margin: 12px 0 14px;
-}
-.img {
-  width: 52px;
-  height: 39px;
-  border-radius: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/ui/block-items/UIEditorSoundItem.vue b/spx-gui/src/components/ui/block-items/UIEditorSoundItem.vue
index e97a4a69e..8181a4daa 100644
--- a/spx-gui/src/components/ui/block-items/UIEditorSoundItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIEditorSoundItem.vue
@@ -5,7 +5,7 @@
     :active="selectable && selectable.selected"
     :interactive="!!selectable"
   >
-    <div class="sound-player">
+    <div class="mt-3 mb-4.5 h-9 w-9">
       <slot name="player"></slot>
     </div>
     <UIBlockItemTitle size="medium">
@@ -30,10 +30,3 @@ withDefaults(
   }
 )
 </script>
-<style scoped lang="scss">
-.sound-player {
-  margin: 12px 0 18px;
-  height: 36px;
-  width: 36px;
-}
-</style>
diff --git a/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue b/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue
index c8e6a0921..f7d25f1c5 100644
--- a/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue
@@ -4,7 +4,7 @@
     <UIBlockItemTitle size="medium">
       {{ name }}
       <template v-if="visible === false" #suffix>
-        <UIIcon class="eye-off" type="eyeOff" :title="$t({ en: 'Invisible', zh: '不可见' })" />
+        <UIIcon class="cursor-auto text-grey-700" type="eyeOff" :title="$t({ en: 'Invisible', zh: '不可见' })" />
       </template>
     </UIBlockItemTitle>
     <slot></slot>
@@ -40,9 +40,3 @@ const imgStyle: CSSProperties = {
   width: '60px'
 }
 </script>
-<style scoped lang="scss">
-.eye-off {
-  color: var(--ui-color-grey-700);
-  cursor: auto;
-}
-</style>
diff --git a/spx-gui/src/components/ui/block-items/UIEditorWidgetItem.vue b/spx-gui/src/components/ui/block-items/UIEditorWidgetItem.vue
index cfb8f9a66..2f6077656 100644
--- a/spx-gui/src/components/ui/block-items/UIEditorWidgetItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIEditorWidgetItem.vue
@@ -1,12 +1,12 @@
 <template>
   <UIBlockItem :color="color" :active="selectable && selectable.selected" :interactive="!!selectable">
-    <div class="icon-container">
+    <div class="icon-container mt-3 mb-3.5 h-10 w-10">
       <slot name="icon"></slot>
     </div>
     <UIBlockItemTitle size="medium">
       {{ name }}
       <template v-if="visible === false" #suffix>
-        <UIIcon class="eye-off" type="eyeOff" />
+        <UIIcon class="cursor-auto text-grey-700" type="eyeOff" />
       </template>
     </UIBlockItemTitle>
     <slot></slot>
@@ -31,20 +31,9 @@ withDefaults(
   }
 )
 </script>
-<style scoped lang="scss">
-.icon-container {
-  margin: 12px 0 14px;
-  width: 40px;
-  height: 40px;
-
-  :deep(> *) {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.eye-off {
-  color: var(--ui-color-grey-700);
-  cursor: auto;
+<style scoped>
+.icon-container :deep(> *) {
+  width: 100%;
+  height: 100%;
 }
 </style>
diff --git a/spx-gui/src/components/ui/block-items/UISoundItem.vue b/spx-gui/src/components/ui/block-items/UISoundItem.vue
index a0d2718df..8077060ed 100644
--- a/spx-gui/src/components/ui/block-items/UISoundItem.vue
+++ b/spx-gui/src/components/ui/block-items/UISoundItem.vue
@@ -1,14 +1,14 @@
 <template>
-  <UIBlockItem size="large" class="ui-sound-item" :active="selected" :interactive="!!selectable">
-    <div class="sound-container">
-      <div class="sound-player">
+  <UIBlockItem size="large" class="p-0.5" :active="selected" :interactive="!!selectable">
+    <div class="h-23 flex items-center justify-center">
+      <div class="h-12 w-12">
         <slot name="player"></slot>
       </div>
     </div>
-    <UIBlockItemTitle size="large" class="name">
+    <UIBlockItemTitle size="large" class="h-5">
       {{ name }}
     </UIBlockItemTitle>
-    <div class="duration">{{ duration }}</div>
+    <div class="text-center text-10/[1.6] font-semibold text-hint-1">{{ duration }}</div>
     <slot></slot>
   </UIBlockItem>
 </template>
@@ -30,36 +30,3 @@ const props = withDefaults(
 
 const selected = computed(() => props.selectable && props.selectable.selected)
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-block-item.ui-sound-item {
-    padding: 2px;
-  }
-}
-</style>
-
-<style scoped lang="scss">
-.ui-sound-item {
-  .name {
-    height: 20px;
-  }
-}
-.sound-container {
-  height: 92px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.sound-player {
-  height: 48px;
-  width: 48px;
-}
-.duration {
-  color: var(--ui-color-hint-1);
-  text-align: center;
-  font-size: 10px;
-  line-height: 16px;
-  font-weight: 600;
-}
-</style>
diff --git a/spx-gui/src/components/ui/block-items/UISpriteItem.vue b/spx-gui/src/components/ui/block-items/UISpriteItem.vue
index c58533ec8..804081ea8 100644
--- a/spx-gui/src/components/ui/block-items/UISpriteItem.vue
+++ b/spx-gui/src/components/ui/block-items/UISpriteItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <UIBlockItem class="ui-sprite-item" size="large" :active="selected" :interactive="!!selectable">
+  <UIBlockItem class="p-0.5" size="large" :active="selected" :interactive="!!selectable">
     <slot name="img" :style="imgStyle"></slot>
     <UIBlockItemTitle size="large">
       {{ name }}
@@ -29,11 +29,3 @@ const imgStyle = {
   width: '99px'
 }
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-block-item.ui-sprite-item {
-    padding: 2px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/collapse/UICollapse.vue b/spx-gui/src/components/ui/collapse/UICollapse.vue
index 96de777fe..d2c240928 100644
--- a/spx-gui/src/components/ui/collapse/UICollapse.vue
+++ b/spx-gui/src/components/ui/collapse/UICollapse.vue
@@ -14,6 +14,13 @@ export function useCollapseCtx() {
 </script>
 
 <script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { cn, type ClassValue } from '../utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = withDefaults(
   defineProps<{
     defaultExpandedNames?: string[]
@@ -24,24 +31,18 @@ const props = withDefaults(
 )
 
 const expandedNames = ref(props.defaultExpandedNames)
+const attrs = useAttrs()
+const rootClass = computed(() => cn('m-0 flex list-none flex-col p-0', attrs.class as ClassValue | null))
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 
 provide(collapseCtxKey, { expandedNames })
 </script>
 
 <template>
-  <ul class="ui-collapse">
+  <ul v-bind="rootAttrs" :class="rootClass">
     <slot></slot>
   </ul>
 </template>
-
-<style lang="scss">
-@layer components {
-  .ui-collapse {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/collapse/UICollapseItem.vue b/spx-gui/src/components/ui/collapse/UICollapseItem.vue
index 4549f7299..db32f15a1 100644
--- a/spx-gui/src/components/ui/collapse/UICollapseItem.vue
+++ b/spx-gui/src/components/ui/collapse/UICollapseItem.vue
@@ -1,16 +1,27 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
+import { cn, type ClassValue } from '../utils'
 import UIIcon from '../icons/UIIcon.vue'
 import { useCollapseCtx } from './UICollapse.vue'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = defineProps<{
   title: string
   name: string
 }>()
 
 const collapseCtx = useCollapseCtx()
+const attrs = useAttrs()
 
 const expanded = computed(() => collapseCtx.expandedNames.value.includes(props.name))
+const rootClass = computed(() => cn('flex flex-col', attrs.class as ClassValue | null))
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 
 function handleToggle() {
   collapseCtx.expandedNames.value = expanded.value
@@ -20,83 +31,36 @@ function handleToggle() {
 </script>
 
 <template>
-  <li class="ui-collapse-item" :class="{ expanded }">
-    <header class="header" @click="handleToggle">
-      <h5 class="title">{{ title }}</h5>
-      <UIIcon class="arrow" type="arrowAlt" />
+  <li v-bind="rootAttrs" class="ui-collapse-item" :class="rootClass">
+    <header
+      class="flex cursor-pointer items-center justify-between [transition:margin-bottom_0.3s]"
+      :class="expanded ? 'mb-2' : null"
+      @click="handleToggle"
+    >
+      <h5 class="text-16 text-title">{{ title }}</h5>
+      <UIIcon
+        class="h-4 w-4 text-hint-1 transition-transform duration-300"
+        :class="expanded ? 'rotate-0' : 'rotate-180'"
+        type="arrowAlt"
+      />
     </header>
-    <main class="main">
+    <main
+      class="h-0 flex-none overflow-hidden opacity-0 invisible [transition:visibility_0s,opacity_0.2s,height_0.3s]"
+      :class="expanded ? 'visible h-fit opacity-100' : null"
+    >
       <slot></slot>
     </main>
   </li>
 </template>
 
-<style lang="scss">
+<style>
 @layer components {
-  .ui-collapse-item {
-    display: flex;
-    flex-direction: column;
-
-    + .ui-collapse-item {
-      &::before {
-        content: '';
-        display: block;
-        height: 1px;
-        background: var(--ui-color-grey-400);
-        margin: 16px 0;
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  transition: margin-bottom 0.3s;
-
-  .title {
-    font-size: 16px;
-    line-height: 26px;
-    color: var(--ui-color-title);
-  }
-
-  .arrow {
-    width: 16px;
-    height: 16px;
-    transform: rotate(180deg);
-    color: var(--ui-color-hint-1);
-    transition: transform 0.3s;
-  }
-}
-
-.main {
-  flex: 0 0 auto;
-  visibility: hidden;
-  opacity: 0;
-  height: 0;
-  overflow: hidden;
-  // TODO: optimize height transition
-  transition:
-    visibility 0s,
-    opacity 0.2s,
-    height 0.3s;
-}
-
-.expanded {
-  .header {
-    margin-bottom: 8px;
-  }
-  .arrow {
-    transform: rotate(0deg);
-  }
-  .main {
-    visibility: visible;
-    opacity: 1;
-    height: fit-content;
+  .ui-collapse-item + .ui-collapse-item::before {
+    content: '';
+    display: block;
+    height: 1px;
+    background: var(--ui-color-grey-400);
+    margin: 16px 0;
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/dialog/UIConfirmDialog.vue b/spx-gui/src/components/ui/dialog/UIConfirmDialog.vue
index 447d3663a..a1aa4a7a6 100644
--- a/spx-gui/src/components/ui/dialog/UIConfirmDialog.vue
+++ b/spx-gui/src/components/ui/dialog/UIConfirmDialog.vue
@@ -8,7 +8,7 @@
     @update:visible="emit('cancelled')"
   >
     <div>{{ content }}</div>
-    <footer class="footer">
+    <footer class="mt-6 flex justify-end gap-3">
       <UIButton
         v-radar="{ name: 'Cancel button', desc: 'Click to cancel current action' }"
         color="boring"
@@ -88,11 +88,3 @@ onMounted(() => {
   if (props.autoConfirm) handleConfirm()
 })
 </script>
-<style scoped lang="scss">
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-}
-</style>
diff --git a/spx-gui/src/components/ui/dialog/UIDialog.vue b/spx-gui/src/components/ui/dialog/UIDialog.vue
index 5d38e1ba8..4df7bc7f8 100644
--- a/spx-gui/src/components/ui/dialog/UIDialog.vue
+++ b/spx-gui/src/components/ui/dialog/UIDialog.vue
@@ -1,9 +1,9 @@
 <template>
   <UIModal>
-    <div class="ui-dialog-container">
-      <UIIcon class="icon" :type="type" />
-      <div class="main">
-        <div class="title">
+    <div class="flex gap-3 px-6 pt-5 pb-6">
+      <UIIcon class="h-6 w-6" :type="type" />
+      <div class="flex-[1_1_0] flex flex-col">
+        <div class="mb-2 text-16 text-title">
           {{ title }}
         </div>
         <slot></slot>
@@ -21,31 +21,3 @@ defineProps<{
   type: 'info' | 'warning' | 'error' | 'success'
 }>()
 </script>
-<style scoped lang="scss">
-.icon {
-  width: 24px;
-  height: 24px;
-}
-
-.main {
-  flex: 1 1 0;
-}
-
-.title {
-  font-size: 16px;
-  line-height: 26px;
-  color: var(--ui-color-title);
-  margin-bottom: 8px;
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-}
-
-.ui-dialog-container {
-  padding: 20px 24px 24px;
-  display: flex;
-  gap: 12px;
-}
-</style>
diff --git a/spx-gui/src/components/ui/empty/UIEmpty.vue b/spx-gui/src/components/ui/empty/UIEmpty.vue
index 14083bde6..3123445d1 100644
--- a/spx-gui/src/components/ui/empty/UIEmpty.vue
+++ b/spx-gui/src/components/ui/empty/UIEmpty.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-empty" :class="[`ui-empty-size-${size}`]">
+  <div v-bind="rootAttrs" :class="rootClass">
     <template v-if="size === 'large'">
       <img :src="img" />
       <slot></slot>
@@ -9,13 +9,13 @@
     </template>
     <template v-else-if="size === 'extra-large'">
       <img :src="img" />
-      <p class="text">
+      <p class="mt-3 text-16 text-grey-700">
         <slot></slot>
         <template v-if="!slots.default">
           {{ defaultText }}
         </template>
       </p>
-      <div class="op"><slot name="op"></slot></div>
+      <div class="ui-empty-op mt-6 flex gap-large"><slot name="op"></slot></div>
     </template>
     <template v-else>
       <svg
@@ -51,11 +51,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
+import { cn, type ClassValue } from '../utils'
 import { useConfig } from '../UIConfigProvider.vue'
 import searchImg from './search.svg'
 import gameImg from './game.svg'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = defineProps<{
   size: 'small' | 'medium' | 'large' | 'extra-large'
   img?: 'search' | 'game'
@@ -71,62 +76,33 @@ const img = computed(() => {
 const config = useConfig()
 const defaultText = computed(() => config.empty?.text ?? 'No data')
 const slots = useSlots()
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn(
+    'h-full w-full flex items-center justify-center',
+    {
+      'flex-col gap-3 text-16 text-grey-1000': props.size === 'large',
+      'flex-col': props.size === 'extra-large',
+      'gap-2 text-grey-600': props.size === 'small' || props.size === 'medium'
+    },
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 
 // TODO: support button for size:large ?
 </script>
 
-<style lang="scss">
-@layer components {
-  .ui-empty {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .ui-empty-size-large {
-    width: 100%;
-    flex-direction: column;
-    gap: 12px;
-
-    font-size: 16px;
-    line-height: 26px;
-    color: var(--ui-color-grey-1000);
-  }
-
-  .ui-empty-size-extra-large {
-    flex-direction: column;
-  }
-
-  .ui-empty-size-small,
-  .ui-empty-size-medium {
-    color: var(--ui-color-grey-600);
-    gap: 8px;
-  }
-}
-</style>
-
-<style scoped lang="scss">
-.ui-empty-size-extra-large {
-  .text {
-    margin-top: 12px;
-    color: var(--ui-color-grey-700);
-    font-size: 16px;
-    line-height: 26px;
-  }
-
-  .op {
-    margin-top: 24px;
-    display: flex;
-    gap: var(--ui-gap-large);
-
-    // TODO: more reliable approach?
-    :deep(.ui-button svg),
-    :deep(.ui-button img) {
-      width: 18px;
-      height: 18px;
-    }
+<style scoped>
+.ui-empty-op {
+  /* TODO: more reliable approach? */
+  :deep(.ui-button svg),
+  :deep(.ui-button img) {
+    width: 18px;
+    height: 18px;
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/error/UIError.vue b/spx-gui/src/components/ui/error/UIError.vue
index a2578c917..1b08ab6f2 100644
--- a/spx-gui/src/components/ui/error/UIError.vue
+++ b/spx-gui/src/components/ui/error/UIError.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="ui-error" :class="{ cover }">
-    <img :src="defaultErrorImg" />
-    <h5 class="message">
+  <div v-bind="rootAttrs" :class="rootClass">
+    <img :src="defaultErrorImg" alt="" />
+    <h5 class="mt-3 text-16 text-grey-1000">
       <slot></slot>
     </h5>
-    <p v-if="$slots['sub-message'] != null" class="sub-message">
+    <p v-if="$slots['sub-message'] != null" class="mt-1 text-13/5 text-grey-900">
       <slot name="sub-message"></slot>
     </p>
-    <div class="ops">
+    <div class="mt-1 flex items-center justify-center gap-3">
       <!-- TODO: consider using slot to support more custom operations -->
-      <button v-if="retry != null" class="op-btn" @click="retry">
+      <button v-if="retry != null" :class="opBtnClass" @click="retry">
         <UIIcon v-show="loading" type="loading" />
         {{ retryText }}
       </button>
-      <button v-if="back != null" class="op-btn" @click="back">
+      <button v-if="back != null" :class="opBtnClass" @click="back">
         {{ backText }}
       </button>
     </div>
@@ -21,11 +21,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
+import { cn, type ClassValue } from '../utils'
 import { useConfig } from '../UIConfigProvider.vue'
 import UIIcon from '../icons/UIIcon.vue'
 import defaultErrorImg from './default-error.svg'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 // TODO: support more error types
 const props = withDefaults(
   defineProps<{
@@ -41,8 +46,25 @@ const props = withDefaults(
 )
 
 const config = useConfig()
+const attrs = useAttrs()
 const retryText = computed(() => config.error?.retryText ?? 'Retry')
 const backText = computed(() => config.error?.backText ?? 'Back')
+const rootClass = computed(() =>
+  cn(
+    'h-full w-full flex flex-col items-center justify-center',
+    props.cover ? 'absolute inset-0 overflow-hidden bg-grey-100 opacity-[0.97] [border-radius:inherit]' : null,
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+
+const opBtnClass = [
+  'px-3 cursor-pointer border-none outline-none bg-transparent flex items-center gap-1 text-13/5',
+  'text-primary-main transition-colors duration-200 hover:text-primary-400 active:text-primary-600'
+].join(' ')
 
 const loading = ref(false)
 
@@ -59,71 +81,3 @@ const retry = computed(() =>
       }
 )
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-error {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    &.cover {
-      position: absolute;
-      inset: 0;
-      border-radius: inherit;
-      overflow: hidden;
-      opacity: 0.97;
-      background-color: var(--ui-color-grey-100);
-    }
-  }
-}
-</style>
-
-<style scoped lang="scss">
-.message {
-  margin-top: 12px;
-  font-size: 16px;
-  line-height: 26px;
-  color: var(--ui-color-grey-1000);
-}
-
-.sub-message {
-  font-size: 13px;
-  margin-top: 4px;
-  color: var(--ui-color-grey-900);
-}
-
-.ops {
-  margin-top: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  // TODO(@UI): update style here when design finished
-  gap: 12px;
-}
-
-.op-btn {
-  // TODO: should this be one type of UIButton?
-  padding: 0 12px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border: none;
-  background: none;
-  font-size: 13px;
-  line-height: 20px;
-  outline: none;
-  color: var(--ui-color-primary-main);
-  cursor: pointer;
-  transition: color 0.2s;
-  &:hover {
-    color: var(--ui-color-primary-400);
-  }
-  &:active {
-    color: var(--ui-color-primary-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/form/UIFormItem.vue b/spx-gui/src/components/ui/form/UIFormItem.vue
index 177c20789..5fdc12922 100644
--- a/spx-gui/src/components/ui/form/UIFormItem.vue
+++ b/spx-gui/src/components/ui/form/UIFormItem.vue
@@ -12,7 +12,7 @@
         <slot></slot>
       </UIFormItemInternal>
     </NFormItem>
-    <p v-if="!!slots.tip" class="tip"><slot name="tip"></slot></p>
+    <p v-if="!!slots.tip" class="mt-1 text-hint-1"><slot name="tip"></slot></p>
   </div>
 </template>
 
@@ -71,7 +71,7 @@ const handleContentInput = debounce(() => {
 }, 300)
 </script>
 
-<style lang="scss">
+<style>
 @layer components {
   .ui-form-item + .ui-form-item {
     margin-top: 24px;
@@ -79,16 +79,12 @@ const handleContentInput = debounce(() => {
 }
 </style>
 
-<style lang="scss" scoped>
+<style scoped>
 .ui-form-item :deep(.n-form-item-feedback-wrapper) {
   line-height: 1.57143;
-  &:empty {
-    display: none;
-  }
 }
 
-.tip {
-  margin-top: 4px;
-  color: var(--ui-color-hint-1);
+.ui-form-item :deep(.n-form-item-feedback-wrapper):empty {
+  display: none;
 }
 </style>
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index 602420a4b..86b91e74c 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -1,10 +1,12 @@
-<template v-html="typeIconMap[type]">
+<template>
   <!-- TODO: is there any way to avoid the wrapper `<div>`? -->
-  <!-- eslint-disable-next-line vue/no-lone-template, vue/no-v-html -->
-  <div class="ui-icon" :class="{ spinning: type === 'loading' }" v-html="typeIconMap[type]"></div>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <div v-bind="rootAttrs" :class="rootClass" v-html="typeIconMap[type]"></div>
 </template>
 
 <script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { cn, type ClassValue } from '../utils'
 import file from './file.svg?raw'
 import arrowDown from './arrow-down.svg?raw'
 import arrowUp from './arrow-up.svg?raw'
@@ -149,40 +151,42 @@ const typeIconMap = {
 
 export type Type = keyof typeof typeIconMap
 
-defineProps<{
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps<{
   type: Type
 }>()
-</script>
 
-<style lang="scss">
-@layer components {
-  .ui-icon {
-    width: 16px;
-    height: 16px;
-    display: flex;
-  }
-}
-</style>
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn('ui-icon flex h-4 w-4', props.type === 'loading' ? 'spinning' : null, attrs.class as ClassValue | null)
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+</script>
 
-<style scoped lang="scss">
-.ui-icon {
-  :deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
+<style scoped>
+.ui-icon :deep(svg) {
+  width: 100%;
+  height: 100%;
 }
 
 .spinning {
   animation: ui-icon-spinning 1s linear infinite;
-  @keyframes ui-icon-spinning {
-    from {
-      transform-origin: 50% 50%;
-      transform: rotate(0);
-    }
-    to {
-      transform-origin: 50% 50%;
-      transform: rotate(360deg);
-    }
+}
+
+@keyframes ui-icon-spinning {
+  from {
+    transform-origin: 50% 50%;
+    transform: rotate(0);
+  }
+  to {
+    transform-origin: 50% 50%;
+    transform: rotate(360deg);
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/loading/UIDetailedLoading.vue b/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
index fa878c6df..acd904a90 100644
--- a/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
+++ b/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import { computed, ref, watch, nextTick } from 'vue'
+import { computed, ref, watch, nextTick, useAttrs } from 'vue'
 import { DotLottieVue, type DotLottieVueInstance } from '@lottiefiles/dotlottie-vue'
+import { cn, type ClassValue } from '../utils'
 import animationFileUrl from './animation.lottie?url'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 export type MaskType = 'none' | 'semi-transparent'
 
 const props = withDefaults(
@@ -25,6 +30,29 @@ const mask = computed(() => {
   return props.mask
 })
 
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn(
+    'h-4/5 w-full flex flex-col items-center justify-center [transition:visibility_0.3s,opacity_0.3s]',
+    props.cover ? 'absolute left-0 top-0 h-full' : null,
+    props.cover && mask.value === 'semi-transparent'
+      ? 'bg-[#24292f99] [backdrop-filter:blur(5px)] [-webkit-backdrop-filter:blur(5px)]'
+      : null,
+    props.visible ? 'visible opacity-100' : 'invisible opacity-0',
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+const textClass = computed(() =>
+  cn(
+    'flex items-center gap-2 text-13/5 text-title',
+    props.cover && mask.value === 'semi-transparent' ? 'text-grey-100' : null
+  )
+)
+
 const dotLottieRef = ref<DotLottieVueInstance>()
 
 watch(
@@ -41,91 +69,18 @@ watch(
 </script>
 
 <template>
-  <div class="ui-detailed-loading" :class="{ cover, visible, [`mask-${mask}`]: true }">
-    <DotLottieVue ref="dotLottieRef" class="animation" autoplay loop :src="animationFileUrl" />
-    <div class="progress-bar">
-      <div v-show="percentage > 0" class="progress" :style="{ width: `${percentage * 100}%` }"></div>
+  <div v-bind="rootAttrs" :class="rootClass">
+    <DotLottieVue ref="dotLottieRef" class="h-[150px] w-[90px] flex-none" autoplay loop :src="animationFileUrl" />
+    <div class="mb-1 h-[5px] w-45 rounded-full bg-grey-600">
+      <div
+        v-show="percentage > 0"
+        class="h-full rounded-full bg-primary-main"
+        :style="{ width: `${percentage * 100}%` }"
+      ></div>
     </div>
-    <div class="text">
+    <div :class="textClass">
       <slot></slot>
       <span>{{ Math.floor(percentage * 100) }}%</span>
     </div>
   </div>
 </template>
-
-<style lang="scss">
-@layer components {
-  .ui-detailed-loading {
-    width: 100%;
-    height: 80%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    visibility: hidden;
-    opacity: 0;
-    transition:
-      visibility 0.3s,
-      opacity 0.3s;
-
-    &.cover {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-
-      &.mask-semi-transparent {
-        background-color: rgba(36, 41, 47, 0.6);
-        backdrop-filter: blur(5px);
-        -webkit-backdrop-filter: blur(5px);
-
-        .text {
-          color: var(--ui-color-grey-100);
-        }
-      }
-    }
-
-    &.visible {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-.animation {
-  flex: 0 0 auto;
-  width: 90px;
-  height: 150px;
-}
-
-.progress-bar {
-  margin-bottom: 4px;
-  width: 180px;
-  height: 5px;
-  border-radius: 2.5px;
-  background-color: var(--ui-color-grey-600);
-
-  .progress {
-    height: 100%;
-    background-color: var(--ui-color-primary-main);
-    border-radius: 2.5px;
-    /**
-     * Temporarily disable transition as it causes UI inconsistency when game engine (spx) blocks.
-     * TODO: re-enable this when it is supported to run spx in worker thread.
-     */
-    /* transition: width 0.3s ease; */
-  }
-}
-
-.text {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  line-height: 20px;
-  color: var(--ui-color-title);
-}
-</style>
diff --git a/spx-gui/src/components/ui/loading/UILoading.vue b/spx-gui/src/components/ui/loading/UILoading.vue
index 5d01cd24b..d699a4e98 100644
--- a/spx-gui/src/components/ui/loading/UILoading.vue
+++ b/spx-gui/src/components/ui/loading/UILoading.vue
@@ -1,12 +1,17 @@
 <template>
-  <div class="ui-loading" :class="{ cover, visible, [`mask-${mask}`]: true }">
+  <div v-bind="rootAttrs" :class="rootClass">
     <NSpin />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { NSpin } from 'naive-ui'
+import { cn, type ClassValue } from '../utils'
+
+defineOptions({
+  inheritAttrs: false
+})
 
 export type MaskType = 'none' | 'semi-transparent' | 'solid'
 
@@ -23,46 +28,24 @@ const props = withDefaults(
   }
 )
 
+const attrs = useAttrs()
 const mask = computed(() => {
   if (props.mask === false) return 'none'
   if (props.mask === true) return 'semi-transparent'
   return props.mask
 })
+const rootClass = computed(() =>
+  cn(
+    'h-4/5 w-full flex justify-center invisible opacity-0 [transition:visibility_0.3s,opacity_0.3s]',
+    props.cover ? 'absolute left-0 top-0 h-full' : null,
+    props.cover && mask.value === 'semi-transparent' ? 'bg-white/50' : null,
+    props.cover && mask.value === 'solid' ? 'bg-grey-100' : null,
+    props.visible ? 'visible opacity-100' : null,
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 </script>
-
-<style lang="scss">
-@layer components {
-  // TODO: loading style not designed yet
-  .ui-loading {
-    width: 100%;
-    height: 80%;
-    display: flex;
-    justify-content: center;
-    visibility: hidden;
-    opacity: 0;
-    transition:
-      visibility 0.3s,
-      opacity 0.3s;
-
-    &.cover {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-
-      &.mask-semi-transparent {
-        background-color: rgba(255, 255, 255, 0.5);
-      }
-      &.mask-solid {
-        background-color: var(--ui-color-grey-100);
-      }
-    }
-
-    &.visible {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/menu/UIMenu.vue b/spx-gui/src/components/ui/menu/UIMenu.vue
index 79920ad99..564eb7238 100644
--- a/spx-gui/src/components/ui/menu/UIMenu.vue
+++ b/spx-gui/src/components/ui/menu/UIMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-menu">
+  <div v-bind="rootAttrs" :class="rootClass">
     <slot></slot>
   </div>
 </template>
@@ -14,13 +14,19 @@ export const ctxKey: InjectionKey<MenuCtx> = Symbol('menu-ctx')
 </script>
 
 <script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { cn, type ClassValue } from '../utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+const rootClass = computed(() => cn('p-2', attrs.class as ClassValue | null))
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+
 provide(ctxKey, { disabled: false, inGroup: false })
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-menu {
-    padding: 8px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/menu/UIMenuGroup.vue b/spx-gui/src/components/ui/menu/UIMenuGroup.vue
index 9ec668524..5cb5a3ee3 100644
--- a/spx-gui/src/components/ui/menu/UIMenuGroup.vue
+++ b/spx-gui/src/components/ui/menu/UIMenuGroup.vue
@@ -1,14 +1,19 @@
 <template>
-  <div class="ui-menu-group">
+  <div v-bind="rootAttrs" class="ui-menu-group" :class="rootClass">
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { provide } from 'vue'
+import { computed, provide, useAttrs } from 'vue'
 import { computedShallowReactive } from '@/utils/utils'
+import { cn, type ClassValue } from '../utils'
 import { ctxKey } from './UIMenu.vue'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
@@ -18,6 +23,13 @@ const props = withDefaults(
   }
 )
 
+const attrs = useAttrs()
+const rootClass = computed(() => cn('flex flex-col gap-1', attrs.class as ClassValue | null))
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+
 provide(
   ctxKey,
   computedShallowReactive(() => ({
@@ -27,26 +39,21 @@ provide(
 )
 </script>
 
-<style lang="scss">
+<style>
 @layer components {
-  .ui-menu-group {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
   .ui-menu-group + .ui-menu-group {
     margin-top: 13px;
     position: relative;
-    &::before {
-      content: '';
-      position: absolute;
-      top: -7px;
-      left: 0;
-      width: 100%;
-      height: 0;
-      border-top: 1px solid var(--ui-color-dividing-line-2);
-    }
+  }
+
+  .ui-menu-group + .ui-menu-group::before {
+    content: '';
+    position: absolute;
+    top: -7px;
+    left: 0;
+    width: 100%;
+    height: 0;
+    border-top: 1px solid var(--ui-color-dividing-line-2);
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/menu/UIMenuItem.vue b/spx-gui/src/components/ui/menu/UIMenuItem.vue
index 0a889b756..858b81f71 100644
--- a/spx-gui/src/components/ui/menu/UIMenuItem.vue
+++ b/spx-gui/src/components/ui/menu/UIMenuItem.vue
@@ -1,10 +1,6 @@
 <template>
-  <div
-    class="ui-menu-item"
-    :class="{ disabled, 'in-group': ctx?.inGroup, interactive: interactive }"
-    @click="handleClick"
-  >
-    <div v-if="hasSlotIcon" class="icon">
+  <div v-bind="rootAttrs" class="ui-menu-item" :class="rootClass" @click="handleClick">
+    <div v-if="hasSlotIcon" class="h-6 w-6 shrink-0 *:h-full *:w-full" :class="disabled ? 'opacity-50' : null">
       <slot name="icon"></slot>
     </div>
     <slot></slot>
@@ -12,10 +8,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useSlots } from 'vue'
+import { computed, inject, useAttrs, useSlots } from 'vue'
+import { cn, type ClassValue } from '../utils'
 import { useDropdown } from '../UIDropdown'
 import { ctxKey } from './UIMenu.vue'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = withDefaults(
   defineProps<{
     interactive?: boolean
@@ -35,8 +36,22 @@ const slots = useSlots()
 const hasSlotIcon = !!slots['icon']
 const ctx = inject(ctxKey)
 const dropdownCtrl = useDropdown()
+const attrs = useAttrs()
 
 const disabled = computed(() => props.disabled || !!ctx?.disabled)
+const rootClass = computed(() => {
+  return cn(
+    'flex items-center gap-2 rounded-sm px-2 py-2 pr-10 text-grey-1000',
+    disabled.value ? 'cursor-not-allowed text-grey-600' : null,
+    !disabled.value && props.interactive ? 'cursor-pointer hover:bg-grey-300' : null,
+    ctx?.inGroup ? 'in-group' : null,
+    attrs.class as ClassValue | null
+  )
+})
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 
 function handleClick(e: MouseEvent) {
   if (disabled.value) return
@@ -47,59 +62,29 @@ function handleClick(e: MouseEvent) {
 }
 </script>
 
-<style lang="scss">
+<style>
 @layer components {
-  .ui-menu-item {
-    padding: 8px 40px 8px 8px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    border-radius: var(--ui-border-radius-1);
-    color: var(--ui-color-grey-1000);
-
-    &.disabled {
-      cursor: not-allowed;
-      color: var(--ui-color-grey-600);
-      .icon {
-        opacity: 0.5;
-      }
-    }
-
-    &.interactive:not(.disabled) {
-      cursor: pointer;
-
-      &:hover {
-        background-color: var(--ui-color-grey-300);
-      }
-    }
+  .ui-menu-item + .ui-menu-item {
+    position: relative;
+    margin-top: 13px;
+  }
 
-    &:not(.in-group) {
-      & + .ui-menu-item {
-        margin-top: 13px;
-        position: relative;
-        &:before {
-          content: '';
-          position: absolute;
-          top: -7px;
-          left: 0;
-          width: 100%;
-          height: 0;
-          border-top: 1px solid var(--ui-color-dividing-line-2);
-        }
-      }
-    }
+  .ui-menu-item + .ui-menu-item::before {
+    content: '';
+    position: absolute;
+    top: -7px;
+    left: 0;
+    width: 100%;
+    height: 0;
+    border-top: 1px solid var(--ui-color-dividing-line-2);
   }
-}
-</style>
 
-<style lang="scss" scoped>
-.icon {
-  width: 24px;
-  height: 24px;
+  .ui-menu-item.in-group + .ui-menu-item.in-group {
+    margin-top: 0;
+  }
 
-  :deep(*) {
-    width: 100%;
-    height: 100%;
+  .ui-menu-item.in-group + .ui-menu-item.in-group::before {
+    display: none;
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/message/UIMessageProvider.vue b/spx-gui/src/components/ui/message/UIMessageProvider.vue
index 2922925a5..3e4a4ea9f 100644
--- a/spx-gui/src/components/ui/message/UIMessageProvider.vue
+++ b/spx-gui/src/components/ui/message/UIMessageProvider.vue
@@ -34,11 +34,12 @@ provide(messageEventsInjectKey, emitter)
   </NMessageProvider>
 </template>
 
-<style lang="scss">
+<style>
 .n-message {
   align-items: flex-start; /** text-content may contain multiple lines */
-  .n-message__icon {
-    margin-top: 1px; /** align icon with text-content */
-  }
+}
+
+.n-message .n-message__icon {
+  margin-top: 1px; /** align icon with text-content */
 }
 </style>
diff --git a/spx-gui/src/components/ui/modal/UIDropdownModal.vue b/spx-gui/src/components/ui/modal/UIDropdownModal.vue
index 78369e917..4e317a9b6 100644
--- a/spx-gui/src/components/ui/modal/UIDropdownModal.vue
+++ b/spx-gui/src/components/ui/modal/UIDropdownModal.vue
@@ -1,14 +1,14 @@
 <template>
-  <form class="wrapper" @submit.prevent="emit('confirm')">
-    <header class="header">
-      <h4 class="title">{{ title }}</h4>
-      <UIModalClose class="close" @click="emit('cancel')" />
+  <form class="flex flex-col items-stretch" @submit.prevent="emit('confirm')">
+    <header class="h-11 flex flex-none items-center px-4">
+      <h4 class="flex-1 text-16 text-title">{{ title }}</h4>
+      <UIModalClose class="-mr-1" @click="emit('cancel')" />
     </header>
     <UIDivider />
-    <main class="body">
+    <main class="flex-auto min-h-0 overflow-y-auto px-4 py-3">
       <slot></slot>
     </main>
-    <footer class="footer">
+    <footer class="flex-none flex justify-end gap-3 p-4">
       <UIButton
         v-radar="{ name: 'Cancel button', desc: 'Click to cancel the operation in modal' }"
         color="boring"
@@ -39,45 +39,3 @@ const emit = defineEmits<{
   confirm: []
 }>()
 </script>
-
-<style scoped lang="scss">
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.header {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  height: 44px;
-}
-
-.title {
-  font-size: 16px;
-  line-height: 26px;
-  flex: 1;
-  color: var(--ui-color-title);
-}
-
-.close {
-  margin-right: -4px;
-}
-
-.body {
-  padding: 12px 16px;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.footer {
-  flex: 0 0 auto;
-  padding: 16px;
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/ui/modal/UIFormModal.vue b/spx-gui/src/components/ui/modal/UIFormModal.vue
index f8bac348e..b8fc3dfb4 100644
--- a/spx-gui/src/components/ui/modal/UIFormModal.vue
+++ b/spx-gui/src/components/ui/modal/UIFormModal.vue
@@ -6,17 +6,18 @@
     :mask-closable="maskClosable"
     @update:visible="handleUpdateShow"
   >
-    <div class="ui-form-modal-container">
-      <div class="header">
-        <div :class="['title', { center: centerTitle }]">
+    <div class="flex-[1_1_0] flex flex-col">
+      <div class="h-14 flex items-center px-6 py-2">
+        <!--  pl-6: take a offset of the same size with close btn, to make the title content correctly centered -->
+        <div class="flex-1 text-16 text-title" :class="{ 'pl-6 text-center': centerTitle }">
           {{ title }}
         </div>
-        <UIModalClose class="close" @click="handleCloseButton" />
+        <UIModalClose class="-mr-1" @click="handleCloseButton" />
       </div>
 
       <UIDivider />
 
-      <div class="body" :style="bodyStyle">
+      <div class="px-6 pt-5 pb-6" :style="bodyStyle">
         <slot></slot>
       </div>
     </div>
@@ -62,38 +63,3 @@ const handleCloseButton = () => {
   handleUpdateShow(false)
 }
 </script>
-
-<style scoped lang="scss">
-.ui-form-modal-container {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  padding: 8px 24px;
-  height: 56px;
-}
-
-.title {
-  font-size: 16px;
-  line-height: 26px;
-  flex: 1;
-  color: var(--ui-color-title);
-}
-
-.center {
-  text-align: center;
-  padding-left: 24px; // take a offset of the same size with close btn, to make the title content correctly centered
-}
-
-.body {
-  padding: 20px 24px 24px;
-}
-
-.close {
-  margin-right: -4px;
-}
-</style>
diff --git a/spx-gui/src/components/ui/modal/UIFullScreenModal.vue b/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
index 0cc5554a9..11eea1949 100644
--- a/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
+++ b/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
@@ -47,10 +47,10 @@ useModalEsc(
 <template>
   <Teleport :to="attachTo">
     <Transition>
-      <div v-if="visible" class="ui-full-screen-modal" :style="modalTransformStyle">
+      <div v-if="visible" class="ui-full-screen-modal fixed inset-0 z-100" :style="modalTransformStyle">
         <div
           v-radar="{ name: 'Full screen modal', desc: 'A full screen modal dialog for specific purpose' }"
-          class="ui-full-screen-modal-container"
+          class="h-screen w-screen flex flex-col bg-grey-100"
         >
           <slot></slot>
         </div>
@@ -59,34 +59,17 @@ useModalEsc(
   </Teleport>
 </template>
 
-<style lang="scss" scoped>
-.ui-full-screen-modal {
-  position: fixed;
-  z-index: 100;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-
-  &.v-enter-active,
-  &.v-leave-active {
-    transition:
-      transform 0.4s ease-in-out,
-      opacity 0.2s ease-in-out 0.1s;
-  }
-
-  &.v-enter-from,
-  &.v-leave-to {
-    transform: scale(0);
-    opacity: 0;
-  }
+<style scoped>
+.ui-full-screen-modal.v-enter-active,
+.ui-full-screen-modal.v-leave-active {
+  transition:
+    transform 0.4s ease-in-out,
+    opacity 0.2s ease-in-out 0.1s;
 }
 
-.ui-full-screen-modal-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100vw;
-  background-color: var(--ui-color-grey-100);
+.ui-full-screen-modal.v-enter-from,
+.ui-full-screen-modal.v-leave-to {
+  transform: scale(0);
+  opacity: 0;
 }
 </style>
diff --git a/spx-gui/src/components/ui/modal/UIFullScreenModalHeader.vue b/spx-gui/src/components/ui/modal/UIFullScreenModalHeader.vue
index ca730a753..495c1610a 100644
--- a/spx-gui/src/components/ui/modal/UIFullScreenModalHeader.vue
+++ b/spx-gui/src/components/ui/modal/UIFullScreenModalHeader.vue
@@ -7,51 +7,17 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="header">
-    <div class="left"></div>
-    <div class="center">
+  <div class="h-14 flex items-center gap-8 border-b border-grey-400 text-16 text-title">
+    <div class="basis-[30%] flex-1"></div>
+    <div class="basis-[40%] flex-1 min-w-0 overflow-hidden">
       <slot></slot>
     </div>
-    <div class="right">
+    <div class="basis-[30%] flex-1 flex items-center justify-end gap-5 pr-5">
       <slot name="right"></slot>
       <UIModalClose
         v-radar="{ name: 'Close button', desc: 'Click to close the full screen modal' }"
-        class="close"
         @click="emit('close')"
       />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  gap: 32px;
-  font-size: 16px;
-  border-bottom: 1px solid var(--ui-color-grey-400);
-  height: 56px;
-  color: var(--ui-color-title);
-}
-
-.left {
-  flex: 1;
-  flex-basis: 30%;
-}
-
-.center {
-  flex: 1;
-  flex-basis: 40%;
-  overflow: hidden;
-}
-
-.right {
-  flex: 1;
-  flex-basis: 30%;
-  display: flex;
-  gap: 20px;
-  justify-content: flex-end;
-  align-items: center;
-  padding-right: 20px;
-}
-</style>
diff --git a/spx-gui/src/components/ui/modal/UIModal.vue b/spx-gui/src/components/ui/modal/UIModal.vue
index e95b6c4e5..ab1aafa58 100644
--- a/spx-gui/src/components/ui/modal/UIModal.vue
+++ b/spx-gui/src/components/ui/modal/UIModal.vue
@@ -106,7 +106,7 @@ useModalEsc(
 )
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .ui-modal-container {
   display: flex;
   flex-direction: column;
@@ -134,16 +134,16 @@ useModalEsc(
 }
 </style>
 
-<style lang="scss">
+<style>
 .ui-modal.has-custom-origin {
-  // Override NaiveUI's transform-origin to support custom animation origins
+  /* Override NaiveUI's transform-origin to support custom animation origins */
   transform-origin: var(--ui-modal-custom-origin, center) !important;
+}
 
-  &.fade-in-scale-up-transition-enter-active,
-  &.fade-in-scale-up-transition-leave-active,
-  &.fade-in-scale-up-transition-enter-to,
-  &.fade-in-scale-up-transition-leave-to {
-    transform-origin: var(--ui-modal-custom-origin, center) !important;
-  }
+.ui-modal.has-custom-origin.fade-in-scale-up-transition-enter-active,
+.ui-modal.has-custom-origin.fade-in-scale-up-transition-leave-active,
+.ui-modal.has-custom-origin.fade-in-scale-up-transition-enter-to,
+.ui-modal.has-custom-origin.fade-in-scale-up-transition-leave-to {
+  transform-origin: var(--ui-modal-custom-origin, center) !important;
 }
 </style>
diff --git a/spx-gui/src/components/ui/modal/UIModalClose.vue b/spx-gui/src/components/ui/modal/UIModalClose.vue
index 1ad73aa66..6b29bd501 100644
--- a/spx-gui/src/components/ui/modal/UIModalClose.vue
+++ b/spx-gui/src/components/ui/modal/UIModalClose.vue
@@ -1,16 +1,19 @@
 <template>
-  <div
-    v-radar="{ name: 'Close button', desc: 'Click to close the modal' }"
-    :class="['ui-modal-close', `ui-modal-close-size-${size}`]"
-  >
-    <UIIcon type="close" class="icon" />
+  <div v-radar="{ name: 'Close button', desc: 'Click to close the modal' }" v-bind="rootAttrs" :class="rootClass">
+    <UIIcon type="close" :class="iconClass" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { cn, type ClassValue } from '../utils'
 import UIIcon from '../icons/UIIcon.vue'
 
-withDefaults(
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(
   defineProps<{
     size?: 'medium' | 'large'
   }>(),
@@ -18,45 +21,18 @@ withDefaults(
     size: 'medium'
   }
 )
-</script>
-
-<style lang="scss">
-@layer components {
-  .ui-modal-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    color: var(--ui-color-grey-700);
-    cursor: pointer;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--ui-color-grey-400);
-    }
-    &:active {
-      background-color: var(--ui-color-grey-500);
-    }
-
-    &.ui-modal-close-size-medium {
-      width: 28px;
-      height: 28px;
 
-      .icon {
-        width: 20px;
-        height: 20px;
-      }
-    }
-
-    &.ui-modal-close-size-large {
-      width: 32px;
-      height: 32px;
-
-      .icon {
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-}
-</style>
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn(
+    'flex items-center justify-center rounded-full text-grey-700 transition-colors duration-200 hover:bg-grey-400 active:bg-grey-500',
+    props.size === 'large' ? 'h-8 w-8' : 'h-7 w-7',
+    attrs.class as ClassValue | null
+  )
+)
+const iconClass = computed(() => (props.size === 'large' ? 'h-6 w-6' : 'h-5 w-5'))
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+</script>
diff --git a/spx-gui/src/components/ui/modal/UISearchableModal.vue b/spx-gui/src/components/ui/modal/UISearchableModal.vue
index 6e92e95df..ff6740574 100644
--- a/spx-gui/src/components/ui/modal/UISearchableModal.vue
+++ b/spx-gui/src/components/ui/modal/UISearchableModal.vue
@@ -4,13 +4,13 @@
 
 <template>
   <UIModal :radar="radar" :visible="visible" :auto-focus="false" mask-closable @update:visible="handleUpdateShow">
-    <div class="ui-searchable-modal-container">
-      <div class="header">
-        <h4 class="title">
+    <div class="flex flex-col">
+      <div class="h-16 flex items-center py-middle px-6">
+        <h4 class="flex-1 flex text-16 text-title">
           {{ title }}
         </h4>
         <slot name="input"></slot>
-        <UIModalClose class="close" @click="handleCloseButton" />
+        <UIModalClose class="ml-2 -mr-1" @click="handleCloseButton" />
       </div>
       <UIDivider />
       <slot></slot>
@@ -41,30 +41,3 @@ const handleCloseButton = () => {
   handleUpdateShow(false)
 }
 </script>
-
-<style scoped lang="scss">
-.ui-searchable-modal-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  padding: var(--ui-gap-middle) 24px;
-  height: 64px;
-}
-
-.title {
-  font-size: 16px;
-  line-height: 26px;
-  flex: 1;
-  display: flex;
-  color: var(--ui-color-title);
-}
-
-.close {
-  margin-left: 8px;
-  margin-right: -4px;
-}
-</style>
diff --git a/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue b/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
index 2d15fe851..86f4619bc 100644
--- a/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
+++ b/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
@@ -1,15 +1,23 @@
 <template>
-  <div class="ui-tag-radio-group">
+  <div v-bind="rootAttrs" :class="rootClass">
     <slot />
   </div>
 </template>
 <script lang="ts">
+import type { ComputedRef, InjectionKey } from 'vue'
+
 export const radioGroupValueKey: InjectionKey<ComputedRef<string | undefined>> = Symbol('radioGroupValue')
 export const updateRadioValueKey: InjectionKey<(value: string) => void> = Symbol('updateRadioValue')
 </script>
 
 <script setup lang="ts">
-import { provide, type InjectionKey, computed, type ComputedRef } from 'vue'
+import { computed, provide, useAttrs } from 'vue'
+
+import { cn, type ClassValue } from '../utils'
+
+defineOptions({
+  inheritAttrs: false
+})
 
 const props = defineProps<{
   value?: string
@@ -19,6 +27,13 @@ const emit = defineEmits<{
   'update:value': [string]
 }>()
 
+const attrs = useAttrs()
+const rootClass = computed(() => cn('flex gap-3', attrs.class as ClassValue | null))
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+
 const updateValue = (newValue: string) => {
   emit('update:value', newValue)
 }
@@ -29,12 +44,3 @@ provide(
 )
 provide(updateRadioValueKey, updateValue)
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-tag-radio-group {
-    display: flex;
-    gap: 12px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/radio/UITabRadio.vue b/spx-gui/src/components/ui/radio/UITabRadio.vue
index efe5b77f0..2ff5238b0 100644
--- a/spx-gui/src/components/ui/radio/UITabRadio.vue
+++ b/spx-gui/src/components/ui/radio/UITabRadio.vue
@@ -1,13 +1,19 @@
 <template>
-  <li class="ui-tab-radio" :class="{ active: isActive }" @click="handleClick">
+  <li v-bind="rootAttrs" :class="rootClass" @click="handleClick">
     <slot></slot>
   </li>
 </template>
 
 <script setup lang="ts">
-import { inject, computed } from 'vue'
+import { computed, inject, useAttrs } from 'vue'
+
+import { cn, type ClassValue } from '../utils'
 import { radioGroupValueKey, updateRadioValueKey } from './UITabRadioGroup.vue'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = defineProps<{
   value: string
 }>()
@@ -15,34 +21,24 @@ const props = defineProps<{
 const radioGroupValue = inject(radioGroupValueKey)
 const updateRadioValue = inject(updateRadioValueKey)
 
+const attrs = useAttrs()
 const isActive = computed(() => radioGroupValue?.value === props.value)
+const rootClass = computed(() =>
+  cn(
+    // TODO: animation for background slide?
+    'flex-[1_1_0] flex items-center justify-center px-2 py-[5px] [transition:0.2s]',
+    isActive.value
+      ? 'rounded-sm bg-grey-100 text-title [box-shadow:0_6px_10px_0_rgba(14,18,27,0.06),0_2px_4px_0_rgba(14,18,27,0.03)]'
+      : 'cursor-pointer text-hint-1',
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 
 const handleClick = () => {
   updateRadioValue?.(props.value)
 }
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-tab-radio {
-    display: flex;
-    flex: 1 1 0;
-    padding: 5px 8px;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    color: var(--ui-color-hint-1);
-    transition: 0.2s; // TODO: animation for background slide?
-
-    &.active {
-      border-radius: 8px;
-      color: var(--ui-color-title);
-      background: var(--ui-color-grey-100);
-      box-shadow:
-        0 6px 10px 0 rgba(14, 18, 27, 0.06),
-        0 2px 4px 0 rgba(14, 18, 27, 0.03);
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/radio/UITabRadioGroup.vue b/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
index bdb4f12ce..33af9aef5 100644
--- a/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
+++ b/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
@@ -1,16 +1,24 @@
 <template>
-  <div class="ui-tab-radio-group">
+  <div v-bind="rootAttrs" :class="rootClass">
     <slot />
   </div>
 </template>
 
 <script lang="ts">
+import type { ComputedRef, InjectionKey } from 'vue'
+
 export const radioGroupValueKey: InjectionKey<ComputedRef<string | undefined>> = Symbol('radioGroupValue')
 export const updateRadioValueKey: InjectionKey<(value: string) => void> = Symbol('updateRadioValue')
 </script>
 
 <script setup lang="ts">
-import { provide, type InjectionKey, computed, type ComputedRef } from 'vue'
+import { computed, provide, useAttrs } from 'vue'
+
+import { cn, type ClassValue } from '../utils'
+
+defineOptions({
+  inheritAttrs: false
+})
 
 const props = defineProps<{
   value?: string
@@ -20,6 +28,15 @@ const emit = defineEmits<{
   'update:value': [string]
 }>()
 
+const attrs = useAttrs()
+const rootClass = computed(() =>
+  cn('flex items-center justify-center rounded-sm bg-grey-400 p-[2px]', attrs.class as ClassValue | null)
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+
 const updateValue = (newValue: string) => {
   emit('update:value', newValue)
 }
@@ -30,17 +47,3 @@ provide(
 )
 provide(updateRadioValueKey, updateValue)
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-tab-radio-group {
-    display: flex;
-    padding: 2px;
-    justify-content: center;
-    align-items: center;
-
-    border-radius: 8px;
-    background: var(--ui-color-grey-400);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/select/UISelect.vue b/spx-gui/src/components/ui/select/UISelect.vue
index 3449bdbf7..4e704c37f 100644
--- a/spx-gui/src/components/ui/select/UISelect.vue
+++ b/spx-gui/src/components/ui/select/UISelect.vue
@@ -1,8 +1,18 @@
 <template>
-  <div class="ui-select">
-    <span class="label" :class="{ placeholder: selectedRef == null }">{{ selectedRef?.label ?? placeholder }}</span>
-    <UIIcon class="arrow" type="arrowDown" />
-    <select ref="selectRef" class="select" :value="value" @change="handleSelectChange">
+  <div v-bind="rootAttrs" class="ui-select" :class="rootClass">
+    <span
+      class="min-w-0 flex-1 overflow-x-hidden text-ellipsis whitespace-nowrap"
+      :class="selectedRef == null ? 'text-grey-700' : null"
+    >
+      {{ selectedRef?.label ?? placeholder }}
+    </span>
+    <UIIcon class="shrink-0" type="arrowDown" />
+    <select
+      ref="selectRef"
+      class="absolute inset-0 h-full w-full opacity-0"
+      :value="value"
+      @change="handleSelectChange"
+    >
       <option v-if="selectedRef == null" disabled :value="placeholderValue">{{ placeholder }}</option>
       <slot></slot>
     </select>
@@ -10,10 +20,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, onMounted, onBeforeUnmount, computed, useAttrs } from 'vue'
 import { untilNotNull } from '@/utils/utils'
+import { cn, type ClassValue } from '../utils'
 import UIIcon from '../icons/UIIcon.vue'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = withDefaults(
   defineProps<{
     value: string | null
@@ -37,8 +52,19 @@ type Selected = {
 // Uses a NUL character so it cannot collide with any real option value.
 const placeholderValue = '\0'
 
+const attrs = useAttrs()
 const selectedRef = ref<Selected>(null)
 const selectRef = ref<HTMLSelectElement | null>(null)
+const rootClass = computed(() =>
+  cn(
+    'relative h-(--ui-line-height-2) inline-flex items-center justify-between gap-0.5 rounded-md px-middle text-grey-1000 bg-grey-300 [transition:0.3s]',
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
 
 async function syncSelected() {
   const select = await untilNotNull(() => selectRef.value)
@@ -76,61 +102,22 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style lang="scss">
+<style>
 @layer components {
-  .ui-select {
-    height: var(--ui-line-height-2);
-    padding: 0px var(--ui-gap-middle);
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 2px;
-
-    border-radius: var(--ui-border-radius-2);
-    color: var(--ui-color-grey-1000);
-    background: var(--ui-color-grey-300);
-    transition: 0.3s;
-
-    &:hover {
-      color: var(--ui-color-grey-800);
-      background: var(--ui-color-grey-400);
-    }
-    &:has(:focus) {
-      color: var(--ui-color-grey-1000);
-      background: var(--ui-color-grey-400);
-      box-shadow: inset 0 0 0 1px var(--ui-color-primary-500);
-    }
-    &:has(:active) {
-      color: var(--ui-color-grey-1000);
-      background: var(--ui-color-grey-500);
-    }
+  .ui-select:hover {
+    color: var(--ui-color-grey-800);
+    background: var(--ui-color-grey-400);
   }
-}
-</style>
 
-<style lang="scss" scoped>
-.label {
-  flex: 1 1 auto;
-  overflow-x: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  &.placeholder {
-    color: var(--ui-color-grey-700);
+  .ui-select:has(:focus) {
+    color: var(--ui-color-grey-1000);
+    background: var(--ui-color-grey-400);
+    box-shadow: inset 0 0 0 1px var(--ui-color-primary-500);
   }
-}
 
-.arrow {
-  flex: 0 0 auto;
-}
-
-.select {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  opacity: 0;
+  .ui-select:has(:active) {
+    color: var(--ui-color-grey-1000);
+    background: var(--ui-color-grey-500);
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/tab/UITab.vue b/spx-gui/src/components/ui/tab/UITab.vue
index e7d3840ff..b8c391ff2 100644
--- a/spx-gui/src/components/ui/tab/UITab.vue
+++ b/spx-gui/src/components/ui/tab/UITab.vue
@@ -1,20 +1,26 @@
 <template>
-  <li class="ui-tab" :class="{ active }" :style="cssVars" @click="handleClick">
+  <li v-bind="rootAttrs" :class="rootClass" :style="rootStyle" @click="handleClick">
     <slot></slot>
   </li>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useAttrs, type StyleValue } from 'vue'
+import { cn, type ClassValue } from '../utils'
 import { getCssVars } from '../tokens/utils'
 import { useUIVariables } from '../UIConfigProvider.vue'
 import { useTabsCtx } from './UITabs.vue'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = defineProps<{
   value: string
 }>()
 
 const tabsCtx = useTabsCtx()
+const attrs = useAttrs()
 const active = computed(() => tabsCtx.value === props.value)
 const uiVariables = useUIVariables()
 const cssVars = computed(() =>
@@ -22,35 +28,20 @@ const cssVars = computed(() =>
     main: uiVariables.color[tabsCtx.color].main
   })
 )
+const rootClass = computed(() =>
+  cn(
+    'cursor-pointer flex items-center bg-(--ui-tab-color-main) px-middle py-[9px] text-16 text-grey-100 transition-opacity duration-200 first:rounded-tl-lg last:rounded-tr-lg',
+    active.value ? 'opacity-100' : 'opacity-70',
+    attrs.class as ClassValue | null
+  )
+)
+const rootAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+const rootStyle = computed<StyleValue>(() => [attrs.style as StyleValue, cssVars.value])
 
 function handleClick() {
   tabsCtx.setValue(props.value)
 }
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-tab {
-    padding: 9px var(--ui-gap-middle);
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    color: var(--ui-color-grey-100);
-    opacity: 0.7;
-    background-color: var(--ui-tab-color-main);
-    cursor: pointer;
-    transition: opacity 0.2s;
-
-    &.active {
-      opacity: 1;
-    }
-
-    &:first-child {
-      border-top-left-radius: var(--ui-border-radius-3);
-    }
-    &:last-child {
-      border-top-right-radius: var(--ui-border-radius-3);
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/tab/UITabs.vue b/spx-gui/src/components/ui/tab/UITabs.vue
index 0252b9d1c..02aa52e8d 100644
--- a/spx-gui/src/components/ui/tab/UITabs.vue
+++ b/spx-gui/src/components/ui/tab/UITabs.vue
@@ -1,10 +1,12 @@
 <template>
-  <ul class="ui-tabs">
+  <ul v-bind="rootAttrs" :class="rootClass">
     <slot></slot>
   </ul>
 </template>
 
 <script lang="ts">
+import { inject, type InjectionKey } from 'vue'
+
 export type TabsCtx = {
   color: Color
   value: string
@@ -19,9 +21,14 @@ export function useTabsCtx() {
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, inject, provide } from 'vue'
+import { computed, provide, useAttrs } from 'vue'
 import { type Color } from '../tokens/colors'
 import { computedShallowReactive } from '@/utils/utils'
+import { cn, type ClassValue } from '../utils'
+
+defineOptions({
+  inheritAttrs: false
+})
 
 const props = withDefaults(
   defineProps<{
@@ -37,6 +44,13 @@ const emit = defineEmits<{
   'update:value': [string]
 }>()
 
+const attrs = useAttrs()
+const rootClass = computed(() => cn('flex', attrs.class as ClassValue | null))
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+
 provide(
   tabsCtxInjectionKey,
   computedShallowReactive(() => ({
@@ -48,11 +62,3 @@ provide(
   }))
 )
 </script>
-
-<style lang="scss">
-@layer components {
-  .ui-tabs {
-    display: flex;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/timeline/UITimelineItem.vue b/spx-gui/src/components/ui/timeline/UITimelineItem.vue
index ff408f001..2832b931c 100644
--- a/spx-gui/src/components/ui/timeline/UITimelineItem.vue
+++ b/spx-gui/src/components/ui/timeline/UITimelineItem.vue
@@ -13,30 +13,20 @@ defineProps<{
         <circle cx="4" cy="4" r="4" fill="#D9DFE5" />
       </svg>
     </template>
-    <p class="time">{{ time }}</p>
-    <p class="content">
+    <p class="text-12 text-hint-2">{{ time }}</p>
+    <p class="text-body">
       <slot></slot>
     </p>
   </NTimelineItem>
 </template>
 
-<style lang="scss" scoped>
-.time {
-  color: var(--ui-color-hint-2);
-
-  font-size: 12px;
-  line-height: 18px;
-}
-.content {
-  font-size: 14px;
-  line-height: 22px;
-}
+<style scoped>
 :global(.n-timeline-item-timeline) {
   top: 5px !important;
   margin-left: 4px !important;
 }
 :global(.n-timeline-item-timeline__line) {
-  // set width 2px then scale it down to 1px, to make it offset for 0.5px, to keep it centered with the circle
+  /* set width 2px then scale it down to 1px, to make it offset for 0.5px, to keep it centered with the circle */
   width: 2px !important;
   transform: scaleX(0.5);
   left: 3px !important;
diff --git a/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue b/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
index 101bf5723..198db1918 100644
--- a/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
+++ b/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
@@ -69,7 +69,7 @@ const onStop = () => {
 }
 </script>
 
-<style lang="scss">
+<style>
 .spx-runner-widget {
   position: relative;
   width: 100%;
@@ -78,59 +78,70 @@ const onStop = () => {
   flex-direction: column;
   border: 1px solid #77777789;
   border-radius: 10px;
-  .operation {
-    display: flex;
-    justify-content: end;
-    padding-top: 10px;
-    padding-right: 10px;
-    position: absolute;
-    width: 100%;
-    z-index: 100;
-    button {
-      border: 2px solid rgba(0, 20, 41, 0.4392156863);
-      border-radius: 16px;
-      z-index: 100;
-      font-size: 14px;
-      padding: 4px 14px;
-      color: white;
-      cursor: pointer;
-      margin-right: 10px;
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      &.run {
-        background-color: #3a8b3b;
-      }
-      &.stop {
-        background-color: #d03050;
-      }
-    }
-  }
-  .project-runner {
-    position: relative;
-    width: 100%;
-    flex: 1;
-    height: 100%;
-    iframe {
-      width: 100%;
-      height: 100%;
-    }
-    .loading,
-    .ready,
-    .error {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      & > p {
-        text-align: center;
-      }
-    }
-  }
+}
+
+.spx-runner-widget .operation {
+  display: flex;
+  justify-content: end;
+  padding-top: 10px;
+  padding-right: 10px;
+  position: absolute;
+  width: 100%;
+  z-index: 100;
+}
+
+.spx-runner-widget .operation button {
+  border: 2px solid rgba(0, 20, 41, 0.4392156863);
+  border-radius: 16px;
+  z-index: 100;
+  font-size: 14px;
+  padding: 4px 14px;
+  color: white;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+.spx-runner-widget .operation button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.spx-runner-widget .operation button.run {
+  background-color: #3a8b3b;
+}
+
+.spx-runner-widget .operation button.stop {
+  background-color: #d03050;
+}
+
+.spx-runner-widget .project-runner {
+  position: relative;
+  width: 100%;
+  flex: 1;
+  height: 100%;
+}
+
+.spx-runner-widget .project-runner iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.spx-runner-widget .project-runner .loading,
+.spx-runner-widget .project-runner .ready,
+.spx-runner-widget .project-runner .error {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.spx-runner-widget .project-runner .loading > p,
+.spx-runner-widget .project-runner .ready > p,
+.spx-runner-widget .project-runner .error > p {
+  text-align: center;
 }
 </style>

From 3bbc569e9fcc532df246a3e49ae2b749b9a16401 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Fri, 10 Apr 2026 10:44:15 +0800
Subject: [PATCH 22/29] support custom text-size utilities in twMerge

---
 spx-gui/src/app.css                           |  4 +-
 spx-gui/src/components/ui/README.md           |  6 ---
 spx-gui/src/components/ui/UIButton.test.ts    |  4 +-
 spx-gui/src/components/ui/UIButton.vue        |  7 +---
 .../ui/block-items/UIBlockItemTitle.vue       |  3 +-
 spx-gui/src/components/ui/utils/cn.test.ts    | 31 ++++++++++++++
 spx-gui/src/components/ui/utils/cn.ts         | 41 ++++++++++++-------
 7 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 57db66c8a..065ab3bf3 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -252,8 +252,8 @@
   --spacing-middle: var(--ui-gap-middle, 16px);
   --spacing-large: var(--ui-gap-large, 24px);
 
-  /* TODO: Replace the numeric `text-*` aliases below with standard Tailwind size names when practical (for example `text-sm`, `text-base`, `text-lg`). */
-  /* TODO: If semantic `text-*` size names such as `text-button` / `text-body` / `text-heading` are introduced later, extend `tailwind-merge` first so they do not collide with color utilities like `text-title`. */
+  /* 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;
diff --git a/spx-gui/src/components/ui/README.md b/spx-gui/src/components/ui/README.md
index 32e5c9b3c..928f3ea40 100644
--- a/spx-gui/src/components/ui/README.md
+++ b/spx-gui/src/components/ui/README.md
@@ -54,12 +54,6 @@
   - For the Naive UI-root wrappers listed above, an external `class` can still be passed, but its root-level visual override is not guaranteed to apply as expected. Do not rely on it for styling-critical behavior; prefer an outer layout wrapper, explicit component props, Naive UI theme overrides, or a dedicated API extension when finer control is needed
   - This is primarily a component authoring/maintenance concern. The long-term goal is to keep these wrappers easy to consume so business code does not need to carry much Naive UI-specific styling knowledge
 
-- Known `tailwind-merge` limitations
-
-  - Some root color utilities and text-size utilities can still conflict under `tailwind-merge`
-  - When needed, prefer raw CSS property utilities like `[color:var(--color-title)]` as a targeted workaround
-  - Add a `FIXME` when doing so, so the usage can be revisited after the utility/token setup improves
-
 ### Usage
 
 - Import from `@/components/ui`
diff --git a/spx-gui/src/components/ui/UIButton.test.ts b/spx-gui/src/components/ui/UIButton.test.ts
index 6e684b2ac..6f4348fda 100644
--- a/spx-gui/src/components/ui/UIButton.test.ts
+++ b/spx-gui/src/components/ui/UIButton.test.ts
@@ -7,8 +7,8 @@ describe('buttonRecipe', () => {
     const classes = buttonRecipe()
 
     expect(classes.root()).toContain('pb-1')
-    expect(classes.content()).toContain('[color:var(--ui-button-color)]')
-    expect(classes.content()).toContain('[background-color:var(--ui-button-bg-color)]')
+    expect(classes.content()).toContain('text-(--ui-button-color)')
+    expect(classes.content()).toContain('bg-(--ui-button-bg-color)')
     expect(classes.icon()).toContain('size-[14px]')
   })
 
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index bd8bcfe3d..f03c6a56f 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -114,14 +114,9 @@ export function resolveButtonCssVars({ color, disabled, loading }: ButtonCssVarS
   return disabled && !loading ? buttonDisabledVars : buttonColorVars[color]
 }
 
-// Keep text size and text color in different utility groups.
-// `text-15` and `text-(color:...)` can be treated as conflicting `text-*`
-// utilities by `twMerge`, so color/background stay on raw CSS properties.
-// TODO: Remove this special-case once app.css migrates numeric text tokens to semantic text-size tokens.
 const buttonSlots = {
   root: 'group/ui-button cursor-pointer flex items-stretch border-none bg-transparent p-0 disabled:cursor-not-allowed',
-  content:
-    'flex-[1_1_0] h-full flex items-center justify-center [color:var(--ui-button-color)] [background-color:var(--ui-button-bg-color)]',
+  content: 'flex-[1_1_0] h-full flex items-center justify-center text-(--ui-button-color) bg-(--ui-button-bg-color)',
   icon: 'shrink-0'
 } as const
 
diff --git a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
index 9520b3dad..9700e00fb 100644
--- a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -22,8 +22,7 @@ const slots = useSlots()
 const attrs = useAttrs()
 const rootClass = computed(() =>
   cn(
-    // FIXME: `[color:var(--color-title)]` switch back to semantic `text-title` once `text-*` token merging no longer conflicts with text-size utilities.
-    'w-full flex items-center gap-2 px-1.5 text-center [color:var(--color-title)]',
+    '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 | null
   )
diff --git a/spx-gui/src/components/ui/utils/cn.test.ts b/spx-gui/src/components/ui/utils/cn.test.ts
index 632e76d51..691423048 100644
--- a/spx-gui/src/components/ui/utils/cn.test.ts
+++ b/spx-gui/src/components/ui/utils/cn.test.ts
@@ -17,4 +17,35 @@ describe('cn', () => {
     expect(merged).not.toContain('rounded-md')
     expect(merged).toContain('rounded-full')
   })
+
+  it('treats numeric text utilities as font sizes without colliding with text colors', () => {
+    expect(cn('text-12', 'text-15')).toBe('text-15')
+    expect(cn('text-title', 'text-15')).toBe('text-title text-15')
+    expect(cn('text-15', 'text-grey-1000')).toBe('text-15 text-grey-1000')
+  })
+
+  it('treats text-body as a font-size utility without colliding with text colors', () => {
+    expect(cn('text-body', 'text-15')).toBe('text-15')
+    expect(cn('text-15', 'text-body')).toBe('text-body')
+    expect(cn('text-title', 'text-body')).toBe('text-title text-body')
+    expect(cn('text-body', 'text-grey-1000')).toBe('text-body text-grey-1000')
+  })
+
+  it('lets arbitrary variable text colors coexist with configured text-size utilities', () => {
+    expect(cn('text-(--ui-button-color)', 'text-body')).toBe('text-(--ui-button-color) text-body')
+    expect(cn('text-(--ui-button-color)', 'text-15')).toBe('text-(--ui-button-color) text-15')
+    expect(cn('text-(--ui-button-color)', 'text-title')).toBe('text-title')
+    expect(cn('text-title', 'text-(--ui-button-color)')).toBe('text-(--ui-button-color)')
+  })
+
+  it('keeps font-size and line-height conflict behavior for numeric text utilities', () => {
+    expect(cn('text-15 leading-6', 'text-12')).toBe('text-12')
+    expect(cn('text-12/6', 'text-15')).toBe('text-15')
+  })
+
+  it('keeps font-size and line-height conflict behavior for text-body', () => {
+    expect(cn('text-body/[1.6]', 'text-15')).toBe('text-15')
+    expect(cn('text-body leading-6', 'text-15')).toBe('text-15')
+    expect(cn('text-body', 'text-body/[1.6]')).toBe('text-body/[1.6]')
+  })
 })
diff --git a/spx-gui/src/components/ui/utils/cn.ts b/spx-gui/src/components/ui/utils/cn.ts
index 076417fe4..4d6936ad6 100644
--- a/spx-gui/src/components/ui/utils/cn.ts
+++ b/spx-gui/src/components/ui/utils/cn.ts
@@ -1,22 +1,8 @@
-import { twMerge } from 'tailwind-merge'
+import { extendTailwindMerge, validators } from 'tailwind-merge'
 
 export type ClassDictionary = Record<string, boolean | null>
 export type ClassValue = string | ClassDictionary | null | false | ClassValue[]
 
-/**
- * Small class-name helper used by UI components.
- *
- * Responsibilities:
- * - flatten nested arrays / dictionaries / falsey values into a plain class list
- * - pass the final class string through `tailwind-merge` so later utilities can override earlier ones
- *
- * Important boundary:
- * - merge quality depends on class naming. Standard Tailwind utility names (for example `rounded-md`, `px-2`, `text-15`)
- *   are much more likely to merge predictably than project-private aliases such as old `rounded-2` style names.
- * - when two concerns share the same utility namespace, `tailwind-merge` may collapse them together. For example,
- *   font-size utilities like `text-15` and color shorthands like `text-(color:...)` can conflict. In those cases,
- *   prefer raw CSS property utilities such as `[color:var(--...)]`.
- */
 function flattenClassValue(value: ClassValue, tokens: string[]) {
   if (value == null || value === false) return
 
@@ -35,6 +21,31 @@ function flattenClassValue(value: ClassValue, tokens: string[]) {
   }
 }
 
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      // `text` is the key of the namespace `--text-*`
+      // `body` is the variable name without the namespace prefix
+      text: [validators.isNumber, 'body']
+    }
+  }
+})
+
+/**
+ * Small class-name helper used by UI components.
+ *
+ * Responsibilities:
+ * - flatten nested arrays / dictionaries / falsey values into a plain class list
+ * - pass the final class string through `tailwind-merge` so later utilities can override earlier ones
+ *
+ * Important boundary:
+ * - merge quality depends on class naming. Standard Tailwind utility names (for example `rounded-md`, `px-2`, `text-15`)
+ *   are much more likely to merge predictably than project-private aliases such as old `rounded-2` style names.
+ * - this project extends `tailwind-merge` so numeric `text-<number>` utilities such as `text-15`, plus the shared
+ *   semantic size alias `text-body`, are treated as font-size classes instead of text colors.
+ * - additional semantic `text-*` size aliases would still share the namespace with text colors. If those are
+ *   introduced later, extend this merge config first so names like `text-heading` do not collide with `text-title`.
+ */
 export function cn(...values: ClassValue[]) {
   const tokens: string[] = []
   for (const value of values) flattenClassValue(value, tokens)

From da499a540c7fb46bb4e50ca3a8df6a143f1bf6a4 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Fri, 10 Apr 2026 14:03:51 +0800
Subject: [PATCH 23/29] move input layout classes to native wrappers & update
 docs

---
 spx-gui/AGENTS.md                             |  8 +-
 .../AssetLibraryManagementModal.vue           |  2 +-
 .../ui/input-helper/SpxKeyInput.vue           |  2 +-
 .../stage/widget/detail/MonitorDetail.vue     |  8 +-
 spx-gui/src/components/ui/README.md           | 10 +--
 spx-gui/src/components/ui/UIButton.vue        |  2 +-
 spx-gui/src/components/ui/UIButtonGroup.vue   |  2 +-
 .../src/components/ui/UIButtonGroupItem.vue   |  2 +-
 spx-gui/src/components/ui/UICard.vue          |  2 +-
 spx-gui/src/components/ui/UIChip.vue          |  2 +-
 spx-gui/src/components/ui/UICode.vue          |  5 +-
 spx-gui/src/components/ui/UIImg.vue           |  2 +-
 spx-gui/src/components/ui/UINumberInput.vue   | 54 ++++++++-----
 spx-gui/src/components/ui/UIPagination.vue    |  2 +-
 spx-gui/src/components/ui/UITag.vue           |  2 +-
 spx-gui/src/components/ui/UITextInput.vue     | 81 +++++++++++--------
 .../ui/block-items/UIBlockItemTitle.vue       |  2 +-
 .../ui/block-items/UICornerIcon.vue           |  2 +-
 .../src/components/ui/collapse/UICollapse.vue |  2 +-
 .../components/ui/collapse/UICollapseItem.vue |  2 +-
 spx-gui/src/components/ui/empty/UIEmpty.vue   |  2 +-
 spx-gui/src/components/ui/error/UIError.vue   |  2 +-
 spx-gui/src/components/ui/icons/UIIcon.vue    |  2 +-
 .../src/components/ui/input-wrapper.test.ts   | 67 +++++++++++++++
 .../ui/loading/UIDetailedLoading.vue          |  2 +-
 .../src/components/ui/loading/UILoading.vue   |  2 +-
 spx-gui/src/components/ui/menu/UIMenu.vue     |  2 +-
 .../src/components/ui/menu/UIMenuGroup.vue    |  2 +-
 spx-gui/src/components/ui/menu/UIMenuItem.vue |  2 +-
 .../src/components/ui/modal/UIModalClose.vue  |  2 +-
 .../components/ui/radio/UIChipRadioGroup.vue  |  2 +-
 .../src/components/ui/radio/UITabRadio.vue    |  2 +-
 .../components/ui/radio/UITabRadioGroup.vue   |  2 +-
 spx-gui/src/components/ui/select/UISelect.vue |  2 +-
 spx-gui/src/components/ui/tab/UITab.vue       |  2 +-
 spx-gui/src/components/ui/tab/UITabs.vue      |  2 +-
 .../src/components/ui/utils/create-recipe.ts  |  4 +-
 spx-gui/src/pages/sign-in/token.vue           |  2 +-
 38 files changed, 196 insertions(+), 101 deletions(-)
 create mode 100644 spx-gui/src/components/ui/input-wrapper.test.ts

diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 0bc5fecaa..914090307 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -116,16 +116,18 @@ When working with backend unique string identifiers such as `username`, project
 
 ### Practical Styling Notes
 
+* Prefer standard Tailwind utility names when practical. For example, use `rounded-md` instead of a project-local alias like `rounded-2`; this keeps overrides more predictable because `tailwind-merge` understands standard utility groups better.
+* 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.
 * Avoid non-equivalent Tailwind simplifications for flex values. In particular, `flex: 1 1 0` is not equivalent to Tailwind `flex-1` (`flex: 1 1 0%`), so do not simplify between them unless the layout behavior has been verified. Likewise, do not simplify `flex: 0 0 auto` to `shrink-0`; use the equivalent `flex-none` when that shorthand is desired.
 * Prefer `style` / `:style` for one-off values when clearer than Tailwind arbitrary utilities. For example, prefer `style="box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1)"` over a long arbitrary utility such as `shadow-[0_24px_32px_-16px_rgba(0,0,0,0.1)]`.
 * For important/non-obvious background assets, prefer TS imports and inline `backgroundImage` binding.
-* For `UIImg`, `UIIcon`, and similar wrappers, verify whether the intended classes/styles should apply to the wrapper root or to an outer layout container. If the wrapper's default root styles would interfere with layout or sizing, prefer an outer wrapper.
-* When extending a base UI component class from another component in the same `@layer components`, prefer a combined selector such as `.ui-block-item.ui-backdrop-item` instead of relying on output order between separate selectors.
 * Keep fixed utility classes in `class`; reserve `:class` for stateful/dynamic parts only.
 * In plain `<style scoped>`, flatten `:deep(...)` selectors (for example `.preview :deep(svg)`) so the final selector structure and specificity stay obvious.
 * Do not use native CSS nesting in plain `<style>` / `<style scoped>` blocks; use flat selectors to avoid browser compatibility issues.
 * Keep single-use values local; only add setup variables when reused/computed or clearly improving readability.
-* Prefer standard Tailwind utility names when practical. For example, use `rounded-md` instead of a project-local alias like `rounded-2`; this keeps overrides more predictable because `tailwind-merge` understands standard utility groups better.
 
 ### Menu Item Text Guidelines
 
diff --git a/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue b/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
index 60cb75576..f7bb7ad18 100644
--- a/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
+++ b/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
@@ -186,7 +186,7 @@ const handleRemove = useMessageHandle(
       <UITextInput
         v-model:value="searchInput"
         v-radar="{ name: 'Search input', desc: 'Input to search library assets' }"
-        style="width: 320px"
+        class="w-80"
         clearable
         :placeholder="$t({ en: 'Search', zh: '搜索' })"
         @keypress.enter="handleSearch"
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
index 4731535c7..37e12a01f 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
@@ -52,7 +52,7 @@ function handleKeyDown(e: KeyboardEvent) {
   <div class="flex self-stretch flex-col gap-1">
     <UITextInput
       v-radar="{ name: 'Key input', desc: 'Input field for detecting key press' }"
-      style="text-align: center"
+      class="text-center"
       :value="text"
       autofocus
       @keydown="handleKeyDown"
diff --git a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
index e5b49719e..771509d8f 100644
--- a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
+++ b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
@@ -13,7 +13,7 @@
             {{ $t({ en: 'Label', zh: '标签' }) }}
             <UITextInput
               v-radar="{ name: 'Label input', desc: 'Input field for monitor label' }"
-              style="width: 180px"
+              class="w-45"
               :value="monitor.label"
               @update:value="handleLabelUpdate"
             />
@@ -56,7 +56,7 @@
             {{ $t({ en: 'Position', zh: '位置' }) }}
             <UINumberInput
               v-radar="{ name: 'X position input', desc: 'Input field for monitor X position' }"
-              style="width: 180px"
+              class="w-45"
               :value="monitor.x"
               @update:value="handleXUpdate"
             >
@@ -64,7 +64,7 @@
             </UINumberInput>
             <UINumberInput
               v-radar="{ name: 'Y position input', desc: 'Input field for monitor Y position' }"
-              style="width: 180px"
+              class="w-45"
               :value="monitor.y"
               @update:value="handleYUpdate"
             >
@@ -77,7 +77,7 @@
             {{ $t({ en: 'Size', zh: '大小' }) }}
             <UINumberInput
               v-radar="{ name: 'Size input', desc: 'Input field for monitor size' }"
-              style="width: 180px"
+              class="w-45"
               :min="0"
               :value="sizePercent"
               @update:value="handleSizePercentUpdate"
diff --git a/spx-gui/src/components/ui/README.md b/spx-gui/src/components/ui/README.md
index 928f3ea40..48b59943c 100644
--- a/spx-gui/src/components/ui/README.md
+++ b/spx-gui/src/components/ui/README.md
@@ -31,15 +31,12 @@
   - If the root is a normal DOM element and the component already owns root utility classes, use `cn(..., attrs.class)` so external root classes are merged with `tailwind-merge`
   - If the component is a single-root wrapper whose styling still depends on semantic hook classes in `@layer components`, prefer Vue's default root attr/class/style inheritance unless explicit root attr control is needed
   - If the rendered root is primarily a Naive UI component, do not assume external root classes will override reliably. Naive UI's internal styles are not layered with our component styles, so their priority can be higher and the final visual result may be hard to predict
-  - Current Naive UI-root wrappers that need extra care are:
+  - Current Naive UI-root components that need extra care are:
 
-    - `UIConfigProvider` → `NConfigProvider`
     - `UIDropdown` → `NPopover`
     - `UITooltip` → `NTooltip`
     - `UIModal` → `NModal`
     - `UIMessageProvider` → `NMessageProvider`
-    - `UITextInput` → `NInput`
-    - `UINumberInput` → `NInputNumber`
     - `UISlider` → `NSlider`
     - `UISwitch` → `NSwitch`
     - `UICheckbox` → `NCheckbox`
@@ -50,8 +47,9 @@
     - `UITimeline` → `NTimeline`
     - `UITimelineItem` → `NTimelineItem`
 
-  - `UIDivider`, `UIFormItem`, and `UILoading` also use Naive UI internally, but their rendered root is still a wrapper DOM element, so do not group them into the Naive UI-root bucket
-  - For the Naive UI-root wrappers listed above, an external `class` can still be passed, but its root-level visual override is not guaranteed to apply as expected. Do not rely on it for styling-critical behavior; prefer an outer layout wrapper, explicit component props, Naive UI theme overrides, or a dedicated API extension when finer control is needed
+  - For all UI components, an external `class` can still be passed, but do not rely on it for styling-critical behavior. Prefer an outer layout wrapper, explicit component props, or a dedicated API extension when finer control is needed
+  - For the Naive UI-root components listed above, root-level visual overrides from an external `class` are especially hard to predict. Prefer an outer layout wrapper or Naive UI theme overrides instead of assuming the component root will restyle reliably
+  - `UIDivider`, `UIFormItem`, `UILoading`, `UITextInput`, and `UINumberInput` also use Naive UI internally, but they expose a wrapper DOM root; external `class` lands on that wrapper instead of the inner Naive UI control
   - This is primarily a component authoring/maintenance concern. The long-term goal is to keep these wrappers easy to consume so business code does not need to carry much Naive UI-specific styling knowledge
 
 ### Usage
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index f03c6a56f..630550391 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -278,7 +278,7 @@ const classes = computed(() =>
     iconOnly: iconOnly.value
   })
 )
-const rootClass = computed(() => classes.value.root(attrs.class as ClassValue | null))
+const rootClass = computed(() => classes.value.root(attrs.class as ClassValue))
 const contentClass = computed(() => classes.value.content())
 const iconClass = computed(() => classes.value.icon())
 const buttonAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/UIButtonGroup.vue b/spx-gui/src/components/ui/UIButtonGroup.vue
index ab77746dc..1b20e86fa 100644
--- a/spx-gui/src/components/ui/UIButtonGroup.vue
+++ b/spx-gui/src/components/ui/UIButtonGroup.vue
@@ -44,7 +44,7 @@ const emit = defineEmits<{
 }>()
 
 const attrs = useAttrs()
-const rootClass = computed(() => cn('flex', attrs.class as ClassValue | null))
+const rootClass = computed(() => cn('flex', attrs.class as ClassValue))
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
   return rest
diff --git a/spx-gui/src/components/ui/UIButtonGroupItem.vue b/spx-gui/src/components/ui/UIButtonGroupItem.vue
index 4275e4dd8..5ced971ce 100644
--- a/spx-gui/src/components/ui/UIButtonGroupItem.vue
+++ b/spx-gui/src/components/ui/UIButtonGroupItem.vue
@@ -43,7 +43,7 @@ const rootClass = computed(() =>
         ? 'bg-grey-200 text-turquoise-600'
         : 'bg-[#47d8e4] text-grey-200',
     isActive.value ? 'cursor-default' : 'cursor-pointer',
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/UICard.vue b/spx-gui/src/components/ui/UICard.vue
index 84d464648..170283f6c 100644
--- a/spx-gui/src/components/ui/UICard.vue
+++ b/spx-gui/src/components/ui/UICard.vue
@@ -15,7 +15,7 @@ defineOptions({
 
 const attrs = useAttrs()
 const rootClass = computed(() =>
-  cn('overflow-hidden rounded-lg bg-grey-100 shadow-diffusion', attrs.class as ClassValue | null)
+  cn('overflow-hidden rounded-lg bg-grey-100 shadow-diffusion', attrs.class as ClassValue)
 )
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
diff --git a/spx-gui/src/components/ui/UIChip.vue b/spx-gui/src/components/ui/UIChip.vue
index 86f223376..5dd052e50 100644
--- a/spx-gui/src/components/ui/UIChip.vue
+++ b/spx-gui/src/components/ui/UIChip.vue
@@ -28,7 +28,7 @@ const rootClass = computed(() =>
       'text-grey-100 bg-primary-main border-primary-main': props.type === 'primary',
       'text-grey-900 bg-grey-300 border-grey-300': props.type === 'boring'
     },
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const buttonAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/UICode.vue b/spx-gui/src/components/ui/UICode.vue
index 669d3c771..a5f130ffd 100644
--- a/spx-gui/src/components/ui/UICode.vue
+++ b/spx-gui/src/components/ui/UICode.vue
@@ -15,10 +15,7 @@ defineOptions({
 
 const attrs = useAttrs()
 const rootClass = computed(() =>
-  cn(
-    'rounded-[4px] bg-primary-200 px-1 py-[2px] font-code text-10/[1.6] text-primary-main',
-    attrs.class as ClassValue | null
-  )
+  cn('rounded-[4px] bg-primary-200 px-1 py-[2px] font-code text-10/[1.6] text-primary-main', attrs.class as ClassValue)
 )
 const codeAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
diff --git a/spx-gui/src/components/ui/UIImg.vue b/spx-gui/src/components/ui/UIImg.vue
index ad94ec204..a3642a873 100644
--- a/spx-gui/src/components/ui/UIImg.vue
+++ b/spx-gui/src/components/ui/UIImg.vue
@@ -33,7 +33,7 @@ const rootClass = computed(() =>
     // Disable image smoothing to keep pixelated look, so it looks good for pixel art assets.
     // See details in https://github.com/goplus/builder/issues/2214.
     'relative flex items-center justify-center bg-center bg-no-repeat [image-rendering:pixelated]',
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/UINumberInput.vue b/spx-gui/src/components/ui/UINumberInput.vue
index 5a7ffcff7..9bdd30ff1 100644
--- a/spx-gui/src/components/ui/UINumberInput.vue
+++ b/spx-gui/src/components/ui/UINumberInput.vue
@@ -1,28 +1,37 @@
 <template>
-  <NInputNumber
-    ref="nInput"
-    class="ui-number-input"
-    :placeholder="placeholder || ''"
-    :show-button="false"
-    :value="value"
-    :disabled="disabled"
-    :min="min"
-    :max="max"
-    @update:value="(v) => emit('update:value', v)"
-  >
-    <template v-if="!!slots.prefix" #prefix>
-      <slot name="prefix"></slot>
-    </template>
-    <template v-if="!!slots.suffix" #suffix>
-      <slot name="suffix"></slot>
-    </template>
-  </NInputNumber>
+  <div :class="rootClass" :style="rootStyle">
+    <NInputNumber
+      ref="nInput"
+      v-bind="inputAttrs"
+      class="ui-number-input w-full min-w-0"
+      :placeholder="placeholder || ''"
+      :show-button="false"
+      :value="value"
+      :disabled="disabled"
+      :min="min"
+      :max="max"
+      @update:value="(v) => emit('update:value', v)"
+    >
+      <template v-if="slots.prefix != null" #prefix>
+        <slot name="prefix"></slot>
+      </template>
+      <template v-if="slots.suffix != null" #suffix>
+        <slot name="suffix"></slot>
+      </template>
+    </NInputNumber>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, useSlots } from 'vue'
+import { computed, onMounted, ref, type StyleValue, useAttrs, useSlots } from 'vue'
 import { NInputNumber } from 'naive-ui'
 
+import { cn, type ClassValue } from './utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = defineProps<{
   value: number | null
   disabled?: boolean
@@ -36,7 +45,14 @@ const emit = defineEmits<{
   'update:value': [number | null]
 }>()
 
+const attrs = useAttrs()
 const slots = useSlots()
+const rootClass = computed(() => cn('w-full min-w-0 rounded-md', attrs.class as ClassValue))
+const rootStyle = computed(() => attrs.style as StyleValue)
+const inputAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
 
 // It's wierd that the prop `autofocus` of `NInput` does not work as expected, so we handle it manually.
 const nInput = ref<InstanceType<typeof NInputNumber> | null>(null)
diff --git a/spx-gui/src/components/ui/UIPagination.vue b/spx-gui/src/components/ui/UIPagination.vue
index 34943958f..4608285a7 100644
--- a/spx-gui/src/components/ui/UIPagination.vue
+++ b/spx-gui/src/components/ui/UIPagination.vue
@@ -57,7 +57,7 @@ const emit = defineEmits<{
 }>()
 
 const attrs = useAttrs()
-const rootClass = computed(() => cn('flex gap-2', attrs.class as ClassValue | null))
+const rootClass = computed(() => cn('flex gap-2', attrs.class as ClassValue))
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
   return rest
diff --git a/spx-gui/src/components/ui/UITag.vue b/spx-gui/src/components/ui/UITag.vue
index ef8679d33..527084412 100644
--- a/spx-gui/src/components/ui/UITag.vue
+++ b/spx-gui/src/components/ui/UITag.vue
@@ -49,7 +49,7 @@ const rootClass = computed(() =>
       'ui-tag-checkable': !!props.checkable,
       'ui-tag-checked': props.checkable ? props.checkable.checked : false
     },
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/UITextInput.vue b/spx-gui/src/components/ui/UITextInput.vue
index c0247642e..60816ec46 100644
--- a/spx-gui/src/components/ui/UITextInput.vue
+++ b/spx-gui/src/components/ui/UITextInput.vue
@@ -1,42 +1,50 @@
-<!-- TODO: Wrap it with a native node ? -->
 <template>
-  <NInput
-    ref="nInput"
-    class="ui-text-input"
-    :class="[`color-${color}`, `ui-input-size-${size}`]"
-    :placeholder="placeholder || ''"
-    :value="value"
-    :type="type"
-    :disabled="disabled"
-    :readonly="readonly"
-    :resizable="false"
-    @update:value="(v) => emit('update:value', v)"
-  >
-    <template v-if="!!slots.prefix" #prefix>
-      <slot name="prefix"></slot>
-    </template>
-    <template v-if="(value && clearable) || !!slots.suffix" #suffix>
-      <div
-        v-if="value && clearable"
-        class="-mr-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full text-grey-800 transition-colors duration-200 hover:bg-grey-400 active:bg-grey-500"
-        @click="emit('update:value', '')"
-      >
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M6.70713 5.99999L9.35363 3.35347C9.54913 3.15847 9.54913 2.8415 9.35363 2.6465C9.15813 2.451 8.84212 2.451 8.64663 2.6465L6.00013 5.29299L3.35363 2.6465C3.15813 2.451 2.84212 2.451 2.64662 2.6465C2.45112 2.8415 2.45112 3.15847 2.64662 3.35347L5.29312 5.99999L2.64662 8.6465C2.45112 8.8415 2.45112 9.15847 2.64662 9.35347C2.74412 9.45097 2.87213 9.49999 3.00013 9.49999C3.12813 9.49999 3.25613 9.45097 3.35363 9.35347L6.00013 6.70699L8.64663 9.35347C8.74412 9.45097 8.87213 9.49999 9.00013 9.49999C9.12813 9.49999 9.25613 9.45097 9.35363 9.35347C9.54913 9.15847 9.54913 8.8415 9.35363 8.6465L6.70713 5.99999Z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      <slot name="suffix"></slot>
-    </template>
-  </NInput>
+  <div :class="rootClass" :style="rootStyle">
+    <NInput
+      ref="nInput"
+      v-bind="inputAttrs"
+      class="ui-text-input w-full min-w-0"
+      :class="[`color-${color}`, `ui-input-size-${size}`]"
+      :placeholder="placeholder || ''"
+      :value="value"
+      :type="type"
+      :disabled="disabled"
+      :readonly="readonly"
+      :resizable="false"
+      @update:value="(v) => emit('update:value', v)"
+    >
+      <template v-if="slots.prefix != null" #prefix>
+        <slot name="prefix"></slot>
+      </template>
+      <template v-if="(value && clearable) || slots.suffix != null" #suffix>
+        <div
+          v-if="value && clearable"
+          class="-mr-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full text-grey-800 transition-colors duration-200 hover:bg-grey-400 active:bg-grey-500"
+          @click="emit('update:value', '')"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M6.70713 5.99999L9.35363 3.35347C9.54913 3.15847 9.54913 2.8415 9.35363 2.6465C9.15813 2.451 8.84212 2.451 8.64663 2.6465L6.00013 5.29299L3.35363 2.6465C3.15813 2.451 2.84212 2.451 2.64662 2.6465C2.45112 2.8415 2.45112 3.15847 2.64662 3.35347L5.29312 5.99999L2.64662 8.6465C2.45112 8.8415 2.45112 9.15847 2.64662 9.35347C2.74412 9.45097 2.87213 9.49999 3.00013 9.49999C3.12813 9.49999 3.25613 9.45097 3.35363 9.35347L6.00013 6.70699L8.64663 9.35347C8.74412 9.45097 8.87213 9.49999 9.00013 9.49999C9.12813 9.49999 9.25613 9.45097 9.35363 9.35347C9.54913 9.15847 9.54913 8.8415 9.35363 8.6465L6.70713 5.99999Z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <slot name="suffix"></slot>
+      </template>
+    </NInput>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, useSlots } from 'vue'
+import { computed, onMounted, ref, type StyleValue, useAttrs, useSlots } from 'vue'
 import { NInput } from 'naive-ui'
 
+import { cn, type ClassValue } from './utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
 type Type = 'textarea' | 'text' | 'password'
 type Color = 'default' | 'white'
 type Size = 'medium' | 'large'
@@ -65,7 +73,14 @@ const emit = defineEmits<{
   'update:value': [string]
 }>()
 
+const attrs = useAttrs()
 const slots = useSlots()
+const rootClass = computed(() => cn('w-full min-w-0 rounded-md', attrs.class as ClassValue))
+const rootStyle = computed(() => attrs.style as StyleValue)
+const inputAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
 
 // It's weird that the prop `autofocus` of `NInput` does not work as expected, so we handle it manually.
 const nInput = ref<InstanceType<typeof NInput> | null>(null)
diff --git a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
index 9700e00fb..54431ab7c 100644
--- a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -24,7 +24,7 @@ const rootClass = computed(() =>
   cn(
     '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 | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/block-items/UICornerIcon.vue b/spx-gui/src/components/ui/block-items/UICornerIcon.vue
index a3229c2fb..90fb0f719 100644
--- a/spx-gui/src/components/ui/block-items/UICornerIcon.vue
+++ b/spx-gui/src/components/ui/block-items/UICornerIcon.vue
@@ -39,7 +39,7 @@ const rootClass = computed(() =>
   cn(
     'absolute -top-1.5 -right-1.5 h-6 w-6 flex items-center justify-center rounded-full cursor-pointer',
     'text-grey-100 bg-(--ui-corner-icon-color-main) hover:bg-(--ui-corner-icon-color-400) active:bg-(--ui-corner-icon-color-600)',
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/collapse/UICollapse.vue b/spx-gui/src/components/ui/collapse/UICollapse.vue
index d2c240928..07935e0d4 100644
--- a/spx-gui/src/components/ui/collapse/UICollapse.vue
+++ b/spx-gui/src/components/ui/collapse/UICollapse.vue
@@ -32,7 +32,7 @@ const props = withDefaults(
 
 const expandedNames = ref(props.defaultExpandedNames)
 const attrs = useAttrs()
-const rootClass = computed(() => cn('m-0 flex list-none flex-col p-0', attrs.class as ClassValue | null))
+const rootClass = computed(() => cn('m-0 flex list-none flex-col p-0', attrs.class as ClassValue))
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
   return rest
diff --git a/spx-gui/src/components/ui/collapse/UICollapseItem.vue b/spx-gui/src/components/ui/collapse/UICollapseItem.vue
index db32f15a1..8ce9310fe 100644
--- a/spx-gui/src/components/ui/collapse/UICollapseItem.vue
+++ b/spx-gui/src/components/ui/collapse/UICollapseItem.vue
@@ -17,7 +17,7 @@ const collapseCtx = useCollapseCtx()
 const attrs = useAttrs()
 
 const expanded = computed(() => collapseCtx.expandedNames.value.includes(props.name))
-const rootClass = computed(() => cn('flex flex-col', attrs.class as ClassValue | null))
+const rootClass = computed(() => cn('flex flex-col', attrs.class as ClassValue))
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
   return rest
diff --git a/spx-gui/src/components/ui/empty/UIEmpty.vue b/spx-gui/src/components/ui/empty/UIEmpty.vue
index 3123445d1..8cb6e2148 100644
--- a/spx-gui/src/components/ui/empty/UIEmpty.vue
+++ b/spx-gui/src/components/ui/empty/UIEmpty.vue
@@ -85,7 +85,7 @@ const rootClass = computed(() =>
       'flex-col': props.size === 'extra-large',
       'gap-2 text-grey-600': props.size === 'small' || props.size === 'medium'
     },
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/error/UIError.vue b/spx-gui/src/components/ui/error/UIError.vue
index 1b08ab6f2..20cbf2747 100644
--- a/spx-gui/src/components/ui/error/UIError.vue
+++ b/spx-gui/src/components/ui/error/UIError.vue
@@ -53,7 +53,7 @@ const rootClass = computed(() =>
   cn(
     'h-full w-full flex flex-col items-center justify-center',
     props.cover ? 'absolute inset-0 overflow-hidden bg-grey-100 opacity-[0.97] [border-radius:inherit]' : null,
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index 86b91e74c..f54f3f8d8 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -161,7 +161,7 @@ const props = defineProps<{
 
 const attrs = useAttrs()
 const rootClass = computed(() =>
-  cn('ui-icon flex h-4 w-4', props.type === 'loading' ? 'spinning' : null, attrs.class as ClassValue | null)
+  cn('ui-icon flex h-4 w-4', props.type === 'loading' ? 'spinning' : null, attrs.class as ClassValue)
 )
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
diff --git a/spx-gui/src/components/ui/input-wrapper.test.ts b/spx-gui/src/components/ui/input-wrapper.test.ts
new file mode 100644
index 000000000..d885307f7
--- /dev/null
+++ b/spx-gui/src/components/ui/input-wrapper.test.ts
@@ -0,0 +1,67 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import UINumberInput from './UINumberInput.vue'
+import UITextInput from './UITextInput.vue'
+
+describe('native wrappers for naive-ui inputs', () => {
+  it('keeps external class/style on the UITextInput wrapper while forwarding other attrs', () => {
+    const wrapper = mount(UITextInput, {
+      props: {
+        value: '',
+        clearable: false
+      },
+      attrs: {
+        class: 'mt-4 w-full',
+        style: 'margin-left: 1px;',
+        'data-test-id': 'text-input',
+        tabindex: '-1'
+      }
+    })
+
+    expect(wrapper.classes()).toContain('mt-4')
+    expect(wrapper.classes()).toContain('w-full')
+    expect(wrapper.classes()).toContain('min-w-0')
+    expect(wrapper.attributes('style')).toContain('margin-left: 1px;')
+
+    const input = wrapper.find('.ui-text-input')
+    expect(input.classes()).toContain('ui-text-input')
+    expect(input.classes()).toContain('w-full')
+    expect(input.classes()).toContain('min-w-0')
+    expect(input.classes()).toContain('color-default')
+    expect(input.classes()).toContain('ui-input-size-medium')
+    expect(input.classes()).not.toContain('mt-4')
+    expect(input.attributes('data-test-id')).toBe('text-input')
+    expect(input.attributes('tabindex')).toBe('-1')
+    expect(input.attributes('style')).not.toContain('margin-left: 1px;')
+  })
+
+  it('keeps external class/style on the UINumberInput wrapper while forwarding other attrs', () => {
+    const wrapper = mount(UINumberInput, {
+      props: {
+        value: 1
+      },
+      attrs: {
+        class: 'mx-2 w-32',
+        style: 'position: relative;',
+        'data-test-id': 'number-input',
+        tabindex: '0'
+      }
+    })
+
+    expect(wrapper.classes()).toContain('mx-2')
+    expect(wrapper.classes()).toContain('w-32')
+    expect(wrapper.classes()).not.toContain('w-full')
+    expect(wrapper.classes()).toContain('min-w-0')
+    expect(wrapper.attributes('style')).toContain('position: relative;')
+
+    const input = wrapper.find('.ui-number-input')
+    expect(input.classes()).toContain('ui-number-input')
+    expect(input.classes()).toContain('w-full')
+    expect(input.classes()).toContain('min-w-0')
+    expect(input.classes()).not.toContain('mx-2')
+    expect(input.attributes('data-test-id')).toBe('number-input')
+    expect(input.attributes('tabindex')).toBe('0')
+    expect(input.attributes('style') ?? '').not.toContain('position: relative;')
+  })
+})
diff --git a/spx-gui/src/components/ui/loading/UIDetailedLoading.vue b/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
index acd904a90..d322e7f07 100644
--- a/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
+++ b/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
@@ -39,7 +39,7 @@ const rootClass = computed(() =>
       ? 'bg-[#24292f99] [backdrop-filter:blur(5px)] [-webkit-backdrop-filter:blur(5px)]'
       : null,
     props.visible ? 'visible opacity-100' : 'invisible opacity-0',
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/loading/UILoading.vue b/spx-gui/src/components/ui/loading/UILoading.vue
index d699a4e98..fa0bc9dec 100644
--- a/spx-gui/src/components/ui/loading/UILoading.vue
+++ b/spx-gui/src/components/ui/loading/UILoading.vue
@@ -41,7 +41,7 @@ const rootClass = computed(() =>
     props.cover && mask.value === 'semi-transparent' ? 'bg-white/50' : null,
     props.cover && mask.value === 'solid' ? 'bg-grey-100' : null,
     props.visible ? 'visible opacity-100' : null,
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/menu/UIMenu.vue b/spx-gui/src/components/ui/menu/UIMenu.vue
index 564eb7238..273cca177 100644
--- a/spx-gui/src/components/ui/menu/UIMenu.vue
+++ b/spx-gui/src/components/ui/menu/UIMenu.vue
@@ -22,7 +22,7 @@ defineOptions({
 })
 
 const attrs = useAttrs()
-const rootClass = computed(() => cn('p-2', attrs.class as ClassValue | null))
+const rootClass = computed(() => cn('p-2', attrs.class as ClassValue))
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
   return rest
diff --git a/spx-gui/src/components/ui/menu/UIMenuGroup.vue b/spx-gui/src/components/ui/menu/UIMenuGroup.vue
index 5cb5a3ee3..104075fde 100644
--- a/spx-gui/src/components/ui/menu/UIMenuGroup.vue
+++ b/spx-gui/src/components/ui/menu/UIMenuGroup.vue
@@ -24,7 +24,7 @@ const props = withDefaults(
 )
 
 const attrs = useAttrs()
-const rootClass = computed(() => cn('flex flex-col gap-1', attrs.class as ClassValue | null))
+const rootClass = computed(() => cn('flex flex-col gap-1', attrs.class as ClassValue))
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
   return rest
diff --git a/spx-gui/src/components/ui/menu/UIMenuItem.vue b/spx-gui/src/components/ui/menu/UIMenuItem.vue
index 858b81f71..a5afb5e3e 100644
--- a/spx-gui/src/components/ui/menu/UIMenuItem.vue
+++ b/spx-gui/src/components/ui/menu/UIMenuItem.vue
@@ -45,7 +45,7 @@ const rootClass = computed(() => {
     disabled.value ? 'cursor-not-allowed text-grey-600' : null,
     !disabled.value && props.interactive ? 'cursor-pointer hover:bg-grey-300' : null,
     ctx?.inGroup ? 'in-group' : null,
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 })
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/modal/UIModalClose.vue b/spx-gui/src/components/ui/modal/UIModalClose.vue
index 6b29bd501..31a093fa5 100644
--- a/spx-gui/src/components/ui/modal/UIModalClose.vue
+++ b/spx-gui/src/components/ui/modal/UIModalClose.vue
@@ -27,7 +27,7 @@ const rootClass = computed(() =>
   cn(
     'flex items-center justify-center rounded-full text-grey-700 transition-colors duration-200 hover:bg-grey-400 active:bg-grey-500',
     props.size === 'large' ? 'h-8 w-8' : 'h-7 w-7',
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const iconClass = computed(() => (props.size === 'large' ? 'h-6 w-6' : 'h-5 w-5'))
diff --git a/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue b/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
index 86f4619bc..1793e2b2d 100644
--- a/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
+++ b/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
@@ -28,7 +28,7 @@ const emit = defineEmits<{
 }>()
 
 const attrs = useAttrs()
-const rootClass = computed(() => cn('flex gap-3', attrs.class as ClassValue | null))
+const rootClass = computed(() => cn('flex gap-3', attrs.class as ClassValue))
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
   return rest
diff --git a/spx-gui/src/components/ui/radio/UITabRadio.vue b/spx-gui/src/components/ui/radio/UITabRadio.vue
index 2ff5238b0..9e1d2fddc 100644
--- a/spx-gui/src/components/ui/radio/UITabRadio.vue
+++ b/spx-gui/src/components/ui/radio/UITabRadio.vue
@@ -30,7 +30,7 @@ const rootClass = computed(() =>
     isActive.value
       ? 'rounded-sm bg-grey-100 text-title [box-shadow:0_6px_10px_0_rgba(14,18,27,0.06),0_2px_4px_0_rgba(14,18,27,0.03)]'
       : 'cursor-pointer text-hint-1',
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/radio/UITabRadioGroup.vue b/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
index 33af9aef5..10f7593db 100644
--- a/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
+++ b/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
@@ -30,7 +30,7 @@ const emit = defineEmits<{
 
 const attrs = useAttrs()
 const rootClass = computed(() =>
-  cn('flex items-center justify-center rounded-sm bg-grey-400 p-[2px]', attrs.class as ClassValue | null)
+  cn('flex items-center justify-center rounded-sm bg-grey-400 p-[2px]', attrs.class as ClassValue)
 )
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
diff --git a/spx-gui/src/components/ui/select/UISelect.vue b/spx-gui/src/components/ui/select/UISelect.vue
index 4e704c37f..21bc13f5f 100644
--- a/spx-gui/src/components/ui/select/UISelect.vue
+++ b/spx-gui/src/components/ui/select/UISelect.vue
@@ -58,7 +58,7 @@ const selectRef = ref<HTMLSelectElement | null>(null)
 const rootClass = computed(() =>
   cn(
     'relative h-(--ui-line-height-2) inline-flex items-center justify-between gap-0.5 rounded-md px-middle text-grey-1000 bg-grey-300 [transition:0.3s]',
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/tab/UITab.vue b/spx-gui/src/components/ui/tab/UITab.vue
index b8c391ff2..a8871119b 100644
--- a/spx-gui/src/components/ui/tab/UITab.vue
+++ b/spx-gui/src/components/ui/tab/UITab.vue
@@ -32,7 +32,7 @@ const rootClass = computed(() =>
   cn(
     'cursor-pointer flex items-center bg-(--ui-tab-color-main) px-middle py-[9px] text-16 text-grey-100 transition-opacity duration-200 first:rounded-tl-lg last:rounded-tr-lg',
     active.value ? 'opacity-100' : 'opacity-70',
-    attrs.class as ClassValue | null
+    attrs.class as ClassValue
   )
 )
 const rootAttrs = computed(() => {
diff --git a/spx-gui/src/components/ui/tab/UITabs.vue b/spx-gui/src/components/ui/tab/UITabs.vue
index 02aa52e8d..a10680a90 100644
--- a/spx-gui/src/components/ui/tab/UITabs.vue
+++ b/spx-gui/src/components/ui/tab/UITabs.vue
@@ -45,7 +45,7 @@ const emit = defineEmits<{
 }>()
 
 const attrs = useAttrs()
-const rootClass = computed(() => cn('flex', attrs.class as ClassValue | null))
+const rootClass = computed(() => cn('flex', attrs.class as ClassValue))
 const rootAttrs = computed(() => {
   const { class: _class, ...rest } = attrs
   return rest
diff --git a/spx-gui/src/components/ui/utils/create-recipe.ts b/spx-gui/src/components/ui/utils/create-recipe.ts
index 4be2cba2d..0d2e7a1d5 100644
--- a/spx-gui/src/components/ui/utils/create-recipe.ts
+++ b/spx-gui/src/components/ui/utils/create-recipe.ts
@@ -79,7 +79,7 @@ export type RecipeConfig<SlotName extends string, TVariants extends VariantDefin
   }>
 }
 
-export type RecipeResult<SlotName extends string> = Record<SlotName, (extra?: ClassValue | null) => string>
+export type RecipeResult<SlotName extends string> = Record<SlotName, (extra?: ClassValue) => string>
 
 function normalizeVariantValue(value: string | boolean | null) {
   if (typeof value === 'boolean') return String(value) as BooleanVariantKeys
@@ -169,7 +169,7 @@ export function createRecipe<const SlotName extends string, const TVariants exte
         // The caller can pass extra classes here (commonly attrs.class for root).
         // `cn()` applies `twMerge`, so conflicting Tailwind utilities collapse in
         // a predictable way.
-        (extra: ClassValue | null = null) => cn(resolvedClasses[slotName], extra)
+        (extra: ClassValue = null) => cn(resolvedClasses[slotName], extra)
       ])
     ) as RecipeResult<SlotName>
   }
diff --git a/spx-gui/src/pages/sign-in/token.vue b/spx-gui/src/pages/sign-in/token.vue
index 00154f065..8cf343574 100644
--- a/spx-gui/src/pages/sign-in/token.vue
+++ b/spx-gui/src/pages/sign-in/token.vue
@@ -6,7 +6,7 @@
         <UITextInput
           v-model:value="form.value.token"
           v-radar="{ name: 'Token input', desc: 'Input field for authentication token' }"
-          style="justify-self: stretch; height: 160px"
+          class="justify-self-stretch h-40"
           type="textarea"
           :placeholder="$t({ en: 'Paste token here', zh: '在此粘贴 Token' })"
         />

From fe7484589ece6a8db25658549bc47f6fab47fb20 Mon Sep 17 00:00:00 2001
From: Hanxing Yang <nighca@live.cn>
Date: Fri, 10 Apr 2026 18:04:24 +0800
Subject: [PATCH 24/29] Use naive-ui with layer support (#2)

---
 spx-gui/index.html        |   6 ++
 spx-gui/package-lock.json | 204 +++++++++++---------------------------
 spx-gui/package.json      |   6 +-
 3 files changed, 68 insertions(+), 148 deletions(-)

diff --git a/spx-gui/index.html b/spx-gui/index.html
index a91d51593..872bab12b 100644
--- a/spx-gui/index.html
+++ b/spx-gui/index.html
@@ -21,7 +21,13 @@
         width: 100%;
         height: 100%;
       }
+
+      @layer theme, base, naive-ui, components, utilities;
     </style>
+    <!-- naive-ui's style will be inserted here -->
+    <meta name="naive-ui-style" />
+    <!-- vueuc's style will be inserted here -->
+    <meta name="vueuc-style" />
   </head>
 
   <body>
diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index e836af086..99e40b882 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -49,7 +49,7 @@
         "mdast-util-from-markdown": "^2.0.2",
         "mdast-util-to-hast": "^13.2.0",
         "monaco-editor": "^0.52.2",
-        "naive-ui": "^2.38.1",
+        "naive-ui": "npm:@nighca/naive-ui@^2.38.1-layer.0",
         "nanoid": "^5.0.5",
         "prettier": "^3.2.2",
         "property-information": "^6.5.0",
@@ -117,12 +117,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -429,17 +427,19 @@
       "license": "MIT"
     },
     "node_modules/@css-render/plugin-bem": {
-      "version": "0.15.12",
-      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.12.tgz",
-      "integrity": "sha512-Lq2jSOZn+wYQtsyaFj6QRz2EzAnd3iW5fZeHO1WSXQdVYwvwGX0ZiH3X2JQgtgYLT1yeGtrwrqJdNdMEUD2xTw==",
+      "version": "0.15.14",
+      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.14.tgz",
+      "integrity": "sha512-QK513CJ7yEQxm/P3EwsI+d+ha8kSOcjGvD6SevM41neEMxdULE+18iuQK6tEChAWMOQNQPLG/Rw3Khb69r5neg==",
+      "license": "MIT",
       "peerDependencies": {
-        "css-render": "~0.15.12"
+        "css-render": "~0.15.14"
       }
     },
     "node_modules/@css-render/vue3-ssr": {
-      "version": "0.15.12",
-      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.12.tgz",
-      "integrity": "sha512-AQLGhhaE0F+rwybRCkKUdzBdTEM/5PZBYy+fSYe1T9z9+yxMuV/k7ZRqa4M69X+EI1W8pa4kc9Iq2VjQkZx4rg==",
+      "version": "0.15.14",
+      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.14.tgz",
+      "integrity": "sha512-//8027GSbxE9n3QlD73xFY6z4ZbHbvrOVB7AO6hsmrEzGbg+h2A09HboUyDgu+xsmj7JnvJD39Irt+2D0+iV8g==",
+      "license": "MIT",
       "peerDependencies": {
         "vue": "^3.0.11"
       }
@@ -478,7 +478,8 @@
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "license": "MIT"
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.9.0",
@@ -887,7 +888,8 @@
     "node_modules/@juggle/resize-observer": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
-      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "license": "Apache-2.0"
     },
     "node_modules/@lezer/common": {
       "version": "1.3.0",
@@ -2809,19 +2811,22 @@
       "license": "MIT"
     },
     "node_modules/@types/katex": {
-      "version": "0.16.7",
-      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
-      "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==",
+      "license": "MIT"
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.202",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
-      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ=="
+      "version": "4.14.198",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.198.tgz",
+      "integrity": "sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==",
+      "license": "MIT"
     },
     "node_modules/@types/lodash-es": {
-      "version": "4.17.12",
-      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
-      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "version": "4.17.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.9.tgz",
+      "integrity": "sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -3755,19 +3760,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "optional": true,
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3839,15 +3831,6 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
-    "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -4032,42 +4015,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "optional": true,
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "optional": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -4181,9 +4128,10 @@
       "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
     },
     "node_modules/css-render": {
-      "version": "0.15.12",
-      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.12.tgz",
-      "integrity": "sha512-eWzS66patiGkTTik+ipO9qNGZ+uNuGyTmnz6/+EJIiFg8+3yZRpnMwgFo8YdXhQRsiePzehnusrxVvugNjXzbw==",
+      "version": "0.15.14",
+      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.14.tgz",
+      "integrity": "sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "@emotion/hash": "~0.8.0",
@@ -4193,7 +4141,8 @@
     "node_modules/css-render/node_modules/csstype": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
-      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
+      "license": "MIT"
     },
     "node_modules/cssesc": {
       "version": "3.0.0",
@@ -4241,6 +4190,7 @@
       "version": "2.30.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
       "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.21.0"
@@ -4254,11 +4204,12 @@
       }
     },
     "node_modules/date-fns-tz": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.0.tgz",
-      "integrity": "sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
+      "license": "MIT",
       "peerDependencies": {
-        "date-fns": ">=2.0.0"
+        "date-fns": "2.x"
       }
     },
     "node_modules/dayjs": {
@@ -4763,7 +4714,8 @@
     "node_modules/evtd": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/evtd/-/evtd-0.2.4.tgz",
-      "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw=="
+      "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==",
+      "license": "MIT"
     },
     "node_modules/expect-type": {
       "version": "1.3.0",
@@ -5423,12 +5375,6 @@
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
-    "node_modules/immutable": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
-      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
-      "optional": true
-    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -5470,18 +5416,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "optional": true,
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -7001,15 +6935,17 @@
       "license": "MIT"
     },
     "node_modules/naive-ui": {
-      "version": "2.38.1",
-      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.38.1.tgz",
-      "integrity": "sha512-AnU1FQ7K/CbhguAX++V4kCFjk7h7RvWt4nvZPRjORMpq+fUIlzD+EcQ5Cv1VqDloNF8+eMv4Akc2Ogacc9S+5A==",
+      "name": "@nighca/naive-ui",
+      "version": "2.38.1-layer.0",
+      "resolved": "https://registry.npmjs.org/@nighca/naive-ui/-/naive-ui-2.38.1-layer.0.tgz",
+      "integrity": "sha512-pWY+a5fS5bNLTHYCwPMn0qdoxWr/g32GPKoryZOBPXgmejy9nLC+uPqKCZZH29rKOSXfpexMQkIh4QSO4wJmvQ==",
+      "license": "MIT",
       "dependencies": {
         "@css-render/plugin-bem": "^0.15.12",
         "@css-render/vue3-ssr": "^0.15.12",
         "@types/katex": "^0.16.2",
-        "@types/lodash": "^4.14.198",
-        "@types/lodash-es": "^4.17.9",
+        "@types/lodash": "4.14.198",
+        "@types/lodash-es": "4.17.9",
         "async-validator": "^4.2.5",
         "css-render": "^0.15.12",
         "csstype": "^3.1.3",
@@ -7023,7 +6959,7 @@
         "treemate": "^0.3.11",
         "vdirs": "^0.1.8",
         "vooks": "^0.2.12",
-        "vueuc": "^0.4.58"
+        "vueuc": "0.4.58"
       },
       "peerDependencies": {
         "vue": "^3.0.0"
@@ -7071,15 +7007,6 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -7558,23 +7485,6 @@
         }
       }
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "optional": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
-    },
     "node_modules/regex-utilities": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
@@ -7837,9 +7747,10 @@
       "license": "Apache-2.0"
     },
     "node_modules/seemly": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.8.tgz",
-      "integrity": "sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA=="
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.10.tgz",
+      "integrity": "sha512-2+SMxtG1PcsL0uyhkumlOU6Qo9TAQ/WyH7tthnPIOQB05/12jz9naq6GZ6iZ6ApVsO3rr2gsnTf3++OV63kE1Q==",
+      "license": "MIT"
     },
     "node_modules/semver": {
       "version": "7.7.3",
@@ -8550,6 +8461,7 @@
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/vdirs/-/vdirs-0.1.8.tgz",
       "integrity": "sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==",
+      "license": "MIT",
       "dependencies": {
         "evtd": "^0.2.2"
       },
@@ -8799,6 +8711,7 @@
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/vooks/-/vooks-0.2.12.tgz",
       "integrity": "sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==",
+      "license": "MIT",
       "dependencies": {
         "evtd": "^0.2.2"
       },
@@ -8965,6 +8878,7 @@
       "version": "0.4.58",
       "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.58.tgz",
       "integrity": "sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==",
+      "license": "MIT",
       "dependencies": {
         "@css-render/vue3-ssr": "^0.15.10",
         "@juggle/resize-observer": "^3.3.1",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index dc4d5d250..0d497d2a5 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -23,8 +23,8 @@
     "@sentry/core": "^9.33.0",
     "@sentry/vue": "^9.33.0",
     "@shikijs/monaco": "^3.2.2",
-    "@tanstack/vue-query": "^5.36.1",
     "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/vue-query": "^5.36.1",
     "@tsconfig/node24": "^24.0.3",
     "@types/file-saver": "^2.0.7",
     "@types/node": "^24.10.1",
@@ -56,7 +56,7 @@
     "mdast-util-from-markdown": "^2.0.2",
     "mdast-util-to-hast": "^13.2.0",
     "monaco-editor": "^0.52.2",
-    "naive-ui": "^2.38.1",
+    "naive-ui": "npm:@nighca/naive-ui@^2.38.1-layer.0",
     "nanoid": "^5.0.5",
     "prettier": "^3.2.2",
     "property-information": "^6.5.0",
@@ -64,8 +64,8 @@
     "scheduler-polyfill": "^1.3.0",
     "shiki": "^3.2.2",
     "sortablejs": "^1.15.6",
-    "tailwindcss": "^4.2.2",
     "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
     "vite-plugin-ejs": "^1.7.0",

From bd9c49420b665b9123d29f91887f3ef20b7a32e6 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Fri, 10 Apr 2026 17:24:56 +0800
Subject: [PATCH 25/29] text-body -> text-base & remove redundant descriptions
 in docs

---
 spx-gui/AGENTS.md                             |  1 -
 spx-gui/src/app.css                           | 16 +++++----------
 .../app/device-check/MobileReminder.vue       |  2 +-
 .../UpdateNotificationWrapper.vue             |  2 +-
 .../common/ModificationWarningModal.vue       |  2 +-
 .../course/management/CourseItemMini.vue      |  2 +-
 .../management/CourseManagementModal.vue      |  2 +-
 .../CourseSeriesManagementModal.vue           |  2 +-
 .../editor/stage/sound/SoundRecorder.vue      | 10 +++++-----
 spx-gui/src/components/ui/README.md           |  2 --
 spx-gui/src/components/ui/UIButton.vue        |  2 +-
 spx-gui/src/components/ui/UIPagination.vue    |  2 +-
 .../components/ui/timeline/UITimelineItem.vue |  2 +-
 spx-gui/src/components/ui/utils/cn.test.ts    | 20 +++++++++----------
 spx-gui/src/components/ui/utils/cn.ts         |  7 +++----
 15 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 914090307..91b52052f 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -116,7 +116,6 @@ When working with backend unique string identifiers such as `username`, project
 
 ### Practical Styling Notes
 
-* Prefer standard Tailwind utility names when practical. For example, use `rounded-md` instead of a project-local alias like `rounded-2`; this keeps overrides more predictable because `tailwind-merge` understands standard utility groups better.
 * 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.
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 065ab3bf3..008a4aa94 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -241,21 +241,15 @@
   --shadow-big: var(--ui-box-shadow-big, 0px 4px 24px 0px rgba(36, 41, 47, 0.08));
   --shadow-diffusion: var(--ui-box-shadow-diffusion, 0px 4px 12px 0px #d0f2f8);
 
-  /* Shared spacing and text-size helpers bridged for utility-class authoring. */
-  /* TODO: The `leading-<number>` variables conflict with Tailwind's default syntax. These styles are not very generic either, confirm whether can be removed. */
-  /* --leading-*: initial; */
-  /* --leading-1: var(--ui-line-height-1, 26px); */
-  /* --leading-2: var(--ui-line-height-2, 32px); */
-  /* --leading-3: var(--ui-line-height-3, 40px); */
-
   /* Shared spacing and text-size helpers bridged for utility-class authoring. */
   --spacing-middle: var(--ui-gap-middle, 16px);
   --spacing-large: var(--ui-gap-large, 24px);
 
-  /* Numeric `text-<number>` utilities and the shared `text-body` alias are recognized as font sizes by the shared `cn()` twMerge config. */
+  /* `text-base` is Tailwind standard name, recognized by twMerge naturally. */
+  --text-base: var(--ui-font-size-text, 14px);
+  --text-base--line-height: 1.57143;
+  /* Numeric `text-<number>` utilities 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;
@@ -265,7 +259,7 @@
   --text-15: 15px;
   --text-15--line-height: 1.5;
   --text-16: 16px;
-  --text-16--line-height: 26px; /* 通常一起出现的, 设为默认值 */
+  --text-16--line-height: 26px;
   --text-18: 18px;
   --text-18--line-height: 1.5;
   --text-20: 20px;
diff --git a/spx-gui/src/components/app/device-check/MobileReminder.vue b/spx-gui/src/components/app/device-check/MobileReminder.vue
index 4d331bed3..78f1e03b9 100644
--- a/spx-gui/src/components/app/device-check/MobileReminder.vue
+++ b/spx-gui/src/components/app/device-check/MobileReminder.vue
@@ -7,7 +7,7 @@
       <h1 class="mb-3 text-20 font-semibold text-grey-1000">
         {{ t({ en: 'Please visit on desktop', zh: '请在电脑上访问' }) }}
       </h1>
-      <p class="text-body text-grey-900">
+      <p class="text-base text-grey-900">
         {{
           t({
             en: 'XBuilder is designed for desktop devices. Please visit this page on your computer for the full experience.',
diff --git a/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue b/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
index 608403708..6ea265a97 100644
--- a/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
+++ b/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
@@ -6,7 +6,7 @@
       role="status"
       aria-live="polite"
     >
-      <div class="flex items-center gap-3 text-body text-grey-900">
+      <div class="flex items-center gap-3 text-base text-grey-900">
         <DotLottieVue class="h-6 w-6" autoplay loop :src="notificationIconUrl" />
         {{
           $t({
diff --git a/spx-gui/src/components/common/ModificationWarningModal.vue b/spx-gui/src/components/common/ModificationWarningModal.vue
index 78c2b2356..a57360a68 100644
--- a/spx-gui/src/components/common/ModificationWarningModal.vue
+++ b/spx-gui/src/components/common/ModificationWarningModal.vue
@@ -39,7 +39,7 @@ function handleCancel() {
     :mask-closable="false"
     @update:visible="handleCancel"
   >
-    <div class="flex flex-col gap-2 text-body/[1.6] text-grey-800">
+    <div class="flex flex-col gap-2 text-base/[1.6] text-grey-800">
       <div class="flex items-center gap-2 font-semibold text-yellow-500">
         <span
           class="inline-flex h-5 w-5 flex-none items-center justify-center rounded-full bg-yellow-500 text-14 font-bold leading-none text-grey-100"
diff --git a/spx-gui/src/components/course/management/CourseItemMini.vue b/spx-gui/src/components/course/management/CourseItemMini.vue
index 5bf0dde5f..03b981114 100644
--- a/spx-gui/src/components/course/management/CourseItemMini.vue
+++ b/spx-gui/src/components/course/management/CourseItemMini.vue
@@ -31,7 +31,7 @@ const thumbnailUrl = useAsyncComputedLegacy(async (onCleanup) => {
     <slot name="prefix" />
     <UIImg class="h-9 w-12 shrink-0 rounded-sm" :src="thumbnailUrl" size="cover" />
     <div class="mx-3 flex-1 overflow-hidden">
-      <div class="overflow-hidden text-body font-medium text-grey-900 text-ellipsis whitespace-nowrap">
+      <div class="overflow-hidden text-base font-medium text-grey-900 text-ellipsis whitespace-nowrap">
         {{ course.title }}
       </div>
     </div>
diff --git a/spx-gui/src/components/course/management/CourseManagementModal.vue b/spx-gui/src/components/course/management/CourseManagementModal.vue
index 539ee543f..db79271c0 100644
--- a/spx-gui/src/components/course/management/CourseManagementModal.vue
+++ b/spx-gui/src/components/course/management/CourseManagementModal.vue
@@ -117,7 +117,7 @@ const handleRemove = useMessageHandle(
             class="flex-1 flex flex-col items-center justify-center text-grey-700"
           >
             <p>{{ $t({ en: 'No courses yet', zh: '还没有课程' }) }}</p>
-            <p class="mt-2 text-body text-grey-600">
+            <p class="mt-2 text-base text-grey-600">
               {{
                 $t({
                   en: 'Click "Create course" to add your first course',
diff --git a/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue b/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
index 73e620851..08bc51c47 100644
--- a/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
@@ -120,7 +120,7 @@ const handleRemove = useMessageHandle(
             class="flex-1 flex flex-col items-center justify-center text-grey-700"
           >
             <p>{{ $t({ en: 'No course series yet', zh: '还没有课程系列' }) }}</p>
-            <p class="mt-2 text-body text-grey-600">
+            <p class="mt-2 text-base text-grey-600">
               {{
                 $t({
                   en: 'Click "Create course series" to add your first series',
diff --git a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
index 835178996..d5ee69543 100644
--- a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
+++ b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
@@ -26,7 +26,7 @@
       <VolumeSlider :value="gain" @update:value="handleGainUpdate" />
     </div>
     <div class="mb-2 mt-8 flex justify-center gap-10">
-      <div v-if="recordingState === 'yetStarted'" class="flex flex-col items-center gap-2 text-body">
+      <div v-if="recordingState === 'yetStarted'" class="flex flex-col items-center gap-2 text-base">
         <UIButton shape="circle" size="large" icon="microphone" color="danger" @click="recordingState = 'recording'" />
         <span>
           {{
@@ -37,7 +37,7 @@
           }}
         </span>
       </div>
-      <div v-else-if="recordingState === 'recording'" class="flex flex-col items-center gap-2 text-body">
+      <div v-else-if="recordingState === 'recording'" class="flex flex-col items-center gap-2 text-base">
         <UIButton shape="circle" size="large" icon="stop" color="danger" @click="stopRecording" />
         <span>
           {{
@@ -49,7 +49,7 @@
         </span>
       </div>
       <template v-else>
-        <div class="flex flex-col items-center gap-2 text-body">
+        <div class="flex flex-col items-center gap-2 text-base">
           <div class="h-14 flex items-center">
             <UIButton shape="circle" size="large" icon="reload" color="boring" @click="resetRecording" />
           </div>
@@ -62,7 +62,7 @@
             }}
           </span>
         </div>
-        <div class="flex flex-col items-center gap-2 text-body">
+        <div class="flex flex-col items-center gap-2 text-base">
           <UIButton
             style="width: 56px; height: 56px"
             shape="circle"
@@ -83,7 +83,7 @@
             }}
           </span>
         </div>
-        <div class="flex flex-col items-center gap-2 text-body">
+        <div class="flex flex-col items-center gap-2 text-base">
           <div class="h-14 flex items-center">
             <UIButton shape="circle" size="large" icon="check" color="success" @click="saveRecording" />
           </div>
diff --git a/spx-gui/src/components/ui/README.md b/spx-gui/src/components/ui/README.md
index 48b59943c..7bd8d3117 100644
--- a/spx-gui/src/components/ui/README.md
+++ b/spx-gui/src/components/ui/README.md
@@ -22,8 +22,6 @@
   - For most non-Naive UI components, prefer Tailwind utilities for local structure, layout, and surface styling
   - Local authored style blocks in the UI package use plain CSS; do not reintroduce SCSS
   - Keep complex selectors, animations, third-party/global overrides, and other readability-sensitive rules in plain CSS
-  - Preserve component structure and visual behavior; do not add new visual states or remove existing hook classes unless confirmed unused
-  - Preserve existing comments/TODOs; when moving styles, keep still-relevant comments near the migrated logic
 
 - Root class handling
 
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index 630550391..4b2a19778 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -154,7 +154,7 @@ export const buttonRecipe = createRecipe({
       },
       medium: {
         root: 'h-(--ui-line-height-2)',
-        content: 'gap-1 px-4 text-body/[1.5]',
+        content: 'gap-1 px-4 text-base/[1.5]',
         icon: 'size-[14px]'
       },
       small: {
diff --git a/spx-gui/src/components/ui/UIPagination.vue b/spx-gui/src/components/ui/UIPagination.vue
index 4608285a7..054cb3b0b 100644
--- a/spx-gui/src/components/ui/UIPagination.vue
+++ b/spx-gui/src/components/ui/UIPagination.vue
@@ -64,7 +64,7 @@ const rootAttrs = computed(() => {
 })
 const buttonClass = (active = false) =>
   cn(
-    'h-8 w-8 flex items-center justify-center rounded-sm border-none bg-grey-300 text-body font-semibold text-grey-900',
+    'h-8 w-8 flex items-center justify-center rounded-sm border-none bg-grey-300 text-base font-semibold text-grey-900',
     'focus:outline-none enabled:hover:bg-grey-400 disabled:cursor-not-allowed disabled:bg-grey-300 disabled:text-grey-700',
     active ? 'bg-primary-500 text-grey-100 enabled:hover:bg-primary-500' : null
   )
diff --git a/spx-gui/src/components/ui/timeline/UITimelineItem.vue b/spx-gui/src/components/ui/timeline/UITimelineItem.vue
index 2832b931c..4704b6115 100644
--- a/spx-gui/src/components/ui/timeline/UITimelineItem.vue
+++ b/spx-gui/src/components/ui/timeline/UITimelineItem.vue
@@ -14,7 +14,7 @@ defineProps<{
       </svg>
     </template>
     <p class="text-12 text-hint-2">{{ time }}</p>
-    <p class="text-body">
+    <p class="text-base">
       <slot></slot>
     </p>
   </NTimelineItem>
diff --git a/spx-gui/src/components/ui/utils/cn.test.ts b/spx-gui/src/components/ui/utils/cn.test.ts
index 691423048..cb1c550aa 100644
--- a/spx-gui/src/components/ui/utils/cn.test.ts
+++ b/spx-gui/src/components/ui/utils/cn.test.ts
@@ -24,15 +24,15 @@ describe('cn', () => {
     expect(cn('text-15', 'text-grey-1000')).toBe('text-15 text-grey-1000')
   })
 
-  it('treats text-body as a font-size utility without colliding with text colors', () => {
-    expect(cn('text-body', 'text-15')).toBe('text-15')
-    expect(cn('text-15', 'text-body')).toBe('text-body')
-    expect(cn('text-title', 'text-body')).toBe('text-title text-body')
-    expect(cn('text-body', 'text-grey-1000')).toBe('text-body text-grey-1000')
+  it('treats text-base as a font-size utility without colliding with text colors', () => {
+    expect(cn('text-base', 'text-15')).toBe('text-15')
+    expect(cn('text-15', 'text-base')).toBe('text-base')
+    expect(cn('text-title', 'text-base')).toBe('text-title text-base')
+    expect(cn('text-base', 'text-grey-1000')).toBe('text-base text-grey-1000')
   })
 
   it('lets arbitrary variable text colors coexist with configured text-size utilities', () => {
-    expect(cn('text-(--ui-button-color)', 'text-body')).toBe('text-(--ui-button-color) text-body')
+    expect(cn('text-(--ui-button-color)', 'text-base')).toBe('text-(--ui-button-color) text-base')
     expect(cn('text-(--ui-button-color)', 'text-15')).toBe('text-(--ui-button-color) text-15')
     expect(cn('text-(--ui-button-color)', 'text-title')).toBe('text-title')
     expect(cn('text-title', 'text-(--ui-button-color)')).toBe('text-(--ui-button-color)')
@@ -43,9 +43,9 @@ describe('cn', () => {
     expect(cn('text-12/6', 'text-15')).toBe('text-15')
   })
 
-  it('keeps font-size and line-height conflict behavior for text-body', () => {
-    expect(cn('text-body/[1.6]', 'text-15')).toBe('text-15')
-    expect(cn('text-body leading-6', 'text-15')).toBe('text-15')
-    expect(cn('text-body', 'text-body/[1.6]')).toBe('text-body/[1.6]')
+  it('keeps font-size and line-height conflict behavior for text-base', () => {
+    expect(cn('text-base/[1.6]', 'text-15')).toBe('text-15')
+    expect(cn('text-base leading-6', 'text-15')).toBe('text-15')
+    expect(cn('text-base', 'text-base/[1.6]')).toBe('text-base/[1.6]')
   })
 })
diff --git a/spx-gui/src/components/ui/utils/cn.ts b/spx-gui/src/components/ui/utils/cn.ts
index 4d6936ad6..ae54f6324 100644
--- a/spx-gui/src/components/ui/utils/cn.ts
+++ b/spx-gui/src/components/ui/utils/cn.ts
@@ -25,8 +25,7 @@ const twMerge = extendTailwindMerge({
   extend: {
     theme: {
       // `text` is the key of the namespace `--text-*`
-      // `body` is the variable name without the namespace prefix
-      text: [validators.isNumber, 'body']
+      text: [validators.isNumber]
     }
   }
 })
@@ -41,8 +40,8 @@ const twMerge = extendTailwindMerge({
  * Important boundary:
  * - merge quality depends on class naming. Standard Tailwind utility names (for example `rounded-md`, `px-2`, `text-15`)
  *   are much more likely to merge predictably than project-private aliases such as old `rounded-2` style names.
- * - this project extends `tailwind-merge` so numeric `text-<number>` utilities such as `text-15`, plus the shared
- *   semantic size alias `text-body`, are treated as font-size classes instead of text colors.
+ * - this project extends `tailwind-merge` so numeric `text-<number>` utilities such as `text-15` are treated as font-size classes
+ *   instead of text colors. `text-base` is standard Tailwind utility that work out of the box and do not need extra merge config.
  * - additional semantic `text-*` size aliases would still share the namespace with text colors. If those are
  *   introduced later, extend this merge config first so names like `text-heading` do not collide with `text-title`.
  */

From 166d8ad3dd548beac41189a04ae42249b2243064 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Fri, 10 Apr 2026 18:16:53 +0800
Subject: [PATCH 26/29] simplify root class merging in UI components

---
 spx-gui/src/components/ui/UIButton.test.ts    | 26 ++++++++++++++++-
 spx-gui/src/components/ui/UIButton.vue        | 18 ++++--------
 spx-gui/src/components/ui/UIButtonGroup.vue   | 19 ++++--------
 .../src/components/ui/UIButtonGroupItem.vue   | 16 +++-------
 spx-gui/src/components/ui/UICard.vue          | 19 ++++--------
 spx-gui/src/components/ui/UIChip.vue          | 16 +++-------
 spx-gui/src/components/ui/UICode.vue          | 17 ++++-------
 spx-gui/src/components/ui/UIImg.vue           | 29 ++++---------------
 spx-gui/src/components/ui/UIPagination.vue    | 16 +++-------
 spx-gui/src/components/ui/UITag.vue           | 19 ++++--------
 .../ui/block-items/UIBlockItemTitle.vue       | 16 +++-------
 .../ui/block-items/UICornerIcon.vue           | 21 +++++---------
 .../src/components/ui/collapse/UICollapse.vue | 19 ++++--------
 .../components/ui/collapse/UICollapseItem.vue | 16 +++-------
 spx-gui/src/components/ui/empty/UIEmpty.vue   | 16 +++-------
 spx-gui/src/components/ui/error/UIError.vue   | 26 ++++++-----------
 spx-gui/src/components/ui/icons/UIIcon.vue    | 16 +++-------
 .../ui/loading/UIDetailedLoading.vue          | 19 ++++--------
 .../src/components/ui/loading/UILoading.vue   | 20 +++++--------
 spx-gui/src/components/ui/menu/UIMenu.vue     | 17 ++++-------
 .../src/components/ui/menu/UIMenuGroup.vue    | 19 ++++--------
 spx-gui/src/components/ui/menu/UIMenuItem.vue | 19 ++++--------
 .../src/components/ui/modal/UIModalClose.vue  | 19 ++++--------
 .../components/ui/radio/UIChipRadioGroup.vue  | 16 +++-------
 .../src/components/ui/radio/UITabRadio.vue    | 16 +++-------
 .../components/ui/radio/UITabRadioGroup.vue   | 16 +++-------
 spx-gui/src/components/ui/select/UISelect.vue | 19 ++++--------
 spx-gui/src/components/ui/tab/UITab.vue       | 17 +++--------
 spx-gui/src/components/ui/tab/UITabs.vue      | 19 ++++--------
 29 files changed, 175 insertions(+), 366 deletions(-)

diff --git a/spx-gui/src/components/ui/UIButton.test.ts b/spx-gui/src/components/ui/UIButton.test.ts
index 6f4348fda..4b0cea307 100644
--- a/spx-gui/src/components/ui/UIButton.test.ts
+++ b/spx-gui/src/components/ui/UIButton.test.ts
@@ -1,6 +1,7 @@
+import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
-import { buttonRecipe, resolveButtonCssVars } from './UIButton.vue'
+import UIButton, { buttonRecipe, resolveButtonCssVars } from './UIButton.vue'
 
 describe('buttonRecipe', () => {
   it('uses the documented defaults', () => {
@@ -80,4 +81,27 @@ describe('buttonRecipe', () => {
       '--ui-button-stroke-color': 'var(--ui-color-grey-400)'
     })
   })
+
+  it('keeps root attrs on the native button while merging external classes with twMerge semantics', () => {
+    const wrapper = mount(UIButton, {
+      props: {
+        class: 'mt-4 h-9 rounded-full'
+      },
+      attrs: {
+        'data-test-id': 'ui-button',
+        tabindex: '-1'
+      },
+      slots: {
+        default: 'Click'
+      }
+    })
+
+    expect(wrapper.classes()).toContain('mt-4')
+    expect(wrapper.classes()).toContain('h-9')
+    expect(wrapper.classes()).toContain('rounded-full')
+    expect(wrapper.classes()).not.toContain('h-(--ui-line-height-2)')
+    expect(wrapper.classes()).not.toContain('rounded-md')
+    expect(wrapper.attributes('data-test-id')).toBe('ui-button')
+    expect(wrapper.attributes('tabindex')).toBe('-1')
+  })
 })
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index 4b2a19778..1e6fb5d26 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -223,14 +223,10 @@ export const buttonRecipe = createRecipe({
 </script>
 
 <script setup lang="ts">
-import { computed, ref, useAttrs, useSlots } from 'vue'
+import { computed, ref, useSlots } from 'vue'
 
 import UIIcon, { type Type as IconType } from './icons/UIIcon.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     variant?: ButtonVariant
@@ -241,6 +237,7 @@ const props = withDefaults(
     disabled?: boolean
     loading?: boolean
     htmlType?: ButtonHtmlType
+    class?: ClassValue
   }>(),
   {
     variant: 'shadow',
@@ -250,12 +247,12 @@ const props = withDefaults(
     icon: undefined,
     disabled: false,
     loading: false,
-    htmlType: 'button'
+    htmlType: 'button',
+    class: undefined
   }
 )
 
 const btnRef = ref<HTMLButtonElement | null>(null)
-const attrs = useAttrs()
 const slots = useSlots()
 const isDisabled = computed(() => props.disabled || props.loading)
 const resolvedIcon = computed(() => (props.loading ? 'loading' : props.icon))
@@ -278,13 +275,9 @@ const classes = computed(() =>
     iconOnly: iconOnly.value
   })
 )
-const rootClass = computed(() => classes.value.root(attrs.class as ClassValue))
+const rootClass = computed(() => classes.value.root(props.class ?? null))
 const contentClass = computed(() => classes.value.content())
 const iconClass = computed(() => classes.value.icon())
-const buttonAttrs = computed(() => {
-  const { class: _class, disabled: _disabled, type: _type, ...rest } = attrs
-  return rest
-})
 
 defineExpose({
   focus() {
@@ -296,7 +289,6 @@ defineExpose({
 <template>
   <button
     ref="btnRef"
-    v-bind="buttonAttrs"
     class="ui-button-root"
     :class="rootClass"
     :data-loading="loading || null"
diff --git a/spx-gui/src/components/ui/UIButtonGroup.vue b/spx-gui/src/components/ui/UIButtonGroup.vue
index 1b20e86fa..bb70e7686 100644
--- a/spx-gui/src/components/ui/UIButtonGroup.vue
+++ b/spx-gui/src/components/ui/UIButtonGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <slot></slot>
   </div>
 </template>
@@ -17,25 +17,23 @@ export const variantInjectionKey: InjectionKey<() => Variant> = Symbol('variant'
 </script>
 
 <script setup lang="ts">
-import { computed, provide, useAttrs } from 'vue'
+import { computed, provide } from 'vue'
 
 import { cn, type ClassValue } from './utils'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     value?: string
     /** Type of group-item content. */
     type?: Type
     variant?: Variant
+    class?: ClassValue
   }>(),
   {
     value: undefined,
     type: 'icon',
-    variant: 'primary'
+    variant: 'primary',
+    class: undefined
   }
 )
 
@@ -43,12 +41,7 @@ const emit = defineEmits<{
   'update:value': [string]
 }>()
 
-const attrs = useAttrs()
-const rootClass = computed(() => cn('flex', attrs.class as ClassValue))
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
+const rootClass = computed(() => cn('flex', props.class ?? null))
 
 provide(selectedValueInjectionKey, () => props.value)
 provide(updateValueInjectionKey, (value: string) => {
diff --git a/spx-gui/src/components/ui/UIButtonGroupItem.vue b/spx-gui/src/components/ui/UIButtonGroupItem.vue
index 5ced971ce..0a1a51bfd 100644
--- a/spx-gui/src/components/ui/UIButtonGroupItem.vue
+++ b/spx-gui/src/components/ui/UIButtonGroupItem.vue
@@ -1,11 +1,11 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass" @click="handleClick">
+  <div :class="rootClass" @click="handleClick">
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useAttrs } from 'vue'
+import { computed, inject } from 'vue'
 
 import { cn, type ClassValue } from './utils'
 import {
@@ -15,12 +15,9 @@ import {
   variantInjectionKey
 } from './UIButtonGroup.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   value: string
+  class?: ClassValue
 }>()
 
 const selectedValue = inject(selectedValueInjectionKey)
@@ -28,7 +25,6 @@ const updateValue = inject(updateValueInjectionKey)
 const type = inject(typeInjectionKey, () => 'icon')
 const variant = inject(variantInjectionKey, () => 'primary')
 
-const attrs = useAttrs()
 const isActive = computed(() => selectedValue?.() === props.value)
 const rootClass = computed(() =>
   cn(
@@ -43,13 +39,9 @@ const rootClass = computed(() =>
         ? 'bg-grey-200 text-turquoise-600'
         : 'bg-[#47d8e4] text-grey-200',
     isActive.value ? 'cursor-default' : 'cursor-pointer',
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 
 const handleClick = () => {
   if (!isActive.value) {
diff --git a/spx-gui/src/components/ui/UICard.vue b/spx-gui/src/components/ui/UICard.vue
index 170283f6c..2ee805d3c 100644
--- a/spx-gui/src/components/ui/UICard.vue
+++ b/spx-gui/src/components/ui/UICard.vue
@@ -1,24 +1,17 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed } from 'vue'
 
 import { cn, type ClassValue } from './utils'
 
-defineOptions({
-  inheritAttrs: false
-})
+const props = defineProps<{
+  class?: ClassValue
+}>()
 
-const attrs = useAttrs()
-const rootClass = computed(() =>
-  cn('overflow-hidden rounded-lg bg-grey-100 shadow-diffusion', attrs.class as ClassValue)
-)
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
+const rootClass = computed(() => cn('overflow-hidden rounded-lg bg-grey-100 shadow-diffusion', props.class ?? null))
 </script>
diff --git a/spx-gui/src/components/ui/UIChip.vue b/spx-gui/src/components/ui/UIChip.vue
index 5dd052e50..c22a81dbd 100644
--- a/spx-gui/src/components/ui/UIChip.vue
+++ b/spx-gui/src/components/ui/UIChip.vue
@@ -1,25 +1,21 @@
 <template>
-  <button v-bind="buttonAttrs" :class="rootClass">
+  <button :class="rootClass">
     <slot></slot>
   </button>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed } from 'vue'
 
 import { cn, type ClassValue } from './utils'
 
 export type ChipType = 'primary' | 'boring'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   type: ChipType
+  class?: ClassValue
 }>()
 
-const attrs = useAttrs()
 const rootClass = computed(() =>
   cn(
     // TODO: support different sizes
@@ -28,11 +24,7 @@ const rootClass = computed(() =>
       'text-grey-100 bg-primary-main border-primary-main': props.type === 'primary',
       'text-grey-900 bg-grey-300 border-grey-300': props.type === 'boring'
     },
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const buttonAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 </script>
diff --git a/spx-gui/src/components/ui/UICode.vue b/spx-gui/src/components/ui/UICode.vue
index a5f130ffd..07ed14d4e 100644
--- a/spx-gui/src/components/ui/UICode.vue
+++ b/spx-gui/src/components/ui/UICode.vue
@@ -1,24 +1,19 @@
 <template>
-  <code v-bind="codeAttrs" :class="rootClass">
+  <code :class="rootClass">
     <slot></slot>
   </code>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed } from 'vue'
 
 import { cn, type ClassValue } from './utils'
 
-defineOptions({
-  inheritAttrs: false
-})
+const props = defineProps<{
+  class?: ClassValue
+}>()
 
-const attrs = useAttrs()
 const rootClass = computed(() =>
-  cn('rounded-[4px] bg-primary-200 px-1 py-[2px] font-code text-10/[1.6] text-primary-main', attrs.class as ClassValue)
+  cn('rounded-[4px] bg-primary-200 px-1 py-[2px] font-code text-10/[1.6] text-primary-main', props.class ?? null)
 )
-const codeAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 </script>
diff --git a/spx-gui/src/components/ui/UIImg.vue b/spx-gui/src/components/ui/UIImg.vue
index a3642a873..f5ff7a0f2 100644
--- a/spx-gui/src/components/ui/UIImg.vue
+++ b/spx-gui/src/components/ui/UIImg.vue
@@ -1,45 +1,38 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass" :style="imgStyle">
+  <div :class="rootClass" :style="backgroundStyle">
     <UILoading :visible="loading" cover :mask="false" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs, type CSSProperties, type StyleValue } from 'vue'
+import { computed, type CSSProperties } from 'vue'
 
 import { cn, type ClassValue } from './utils'
 import UILoading from './loading/UILoading.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     src: string | null
     loading?: boolean
     size?: 'contain' | 'cover'
+    class?: ClassValue
   }>(),
   {
     // TODO: loading for public URL fetching
     loading: false,
-    size: 'contain'
+    size: 'contain',
+    class: undefined
   }
 )
 
-const attrs = useAttrs()
 const rootClass = computed(() =>
   cn(
     // Disable image smoothing to keep pixelated look, so it looks good for pixel art assets.
     // See details in https://github.com/goplus/builder/issues/2214.
     'relative flex items-center justify-center bg-center bg-no-repeat [image-rendering:pixelated]',
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, style: _style, ...rest } = attrs
-  return rest
-})
 
 const backgroundStyle = computed<CSSProperties | null>(() => {
   if (props.src == null) return null
@@ -48,14 +41,4 @@ const backgroundStyle = computed<CSSProperties | null>(() => {
     backgroundSize: props.size
   }
 })
-
-const imgStyle = computed<StyleValue | null>(() => {
-  if (attrs.style == null) {
-    return backgroundStyle.value
-  }
-  if (backgroundStyle.value == null) {
-    return attrs.style as StyleValue
-  }
-  return [attrs.style as StyleValue, backgroundStyle.value] as StyleValue
-})
 </script>
diff --git a/spx-gui/src/components/ui/UIPagination.vue b/spx-gui/src/components/ui/UIPagination.vue
index 054cb3b0b..b0a720b17 100644
--- a/spx-gui/src/components/ui/UIPagination.vue
+++ b/spx-gui/src/components/ui/UIPagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <button :class="buttonClass()" :disabled="current === 1" @click="prevPage">
       <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
@@ -39,29 +39,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed } from 'vue'
 import { cn, type ClassValue } from './utils'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   /** Total page num */
   total: number
   /** Current page index, start from `1` */
   current: number
+  class?: ClassValue
 }>()
 const emit = defineEmits<{
   'update:current': [number]
 }>()
 
-const attrs = useAttrs()
-const rootClass = computed(() => cn('flex gap-2', attrs.class as ClassValue))
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
+const rootClass = computed(() => cn('flex gap-2', props.class ?? null))
 const buttonClass = (active = false) =>
   cn(
     'h-8 w-8 flex items-center justify-center rounded-sm border-none bg-grey-300 text-base font-semibold text-grey-900',
diff --git a/spx-gui/src/components/ui/UITag.vue b/spx-gui/src/components/ui/UITag.vue
index 527084412..efc796f11 100644
--- a/spx-gui/src/components/ui/UITag.vue
+++ b/spx-gui/src/components/ui/UITag.vue
@@ -5,15 +5,11 @@ export type TagSize = 'small'
 </script>
 
 <script setup lang="ts">
-import { computed, useAttrs, useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 import { cn, type ClassValue } from './utils'
 
 import UIIcon from './icons/UIIcon.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     variant?: TagVariant
@@ -22,6 +18,7 @@ const props = withDefaults(
     disabled?: boolean
     closable?: boolean
     checkable?: false | { checked: boolean }
+    class?: ClassValue
   }>(),
   {
     variant: 'stroke',
@@ -29,7 +26,8 @@ const props = withDefaults(
     size: 'small',
     disabled: false,
     closable: false,
-    checkable: false
+    checkable: false,
+    class: undefined
   }
 )
 
@@ -38,7 +36,6 @@ const emit = defineEmits<{
 }>()
 
 const slots = useSlots()
-const attrs = useAttrs()
 const rootClass = computed(() =>
   cn(
     'ui-tag',
@@ -49,17 +46,13 @@ const rootClass = computed(() =>
       'ui-tag-checkable': !!props.checkable,
       'ui-tag-checked': props.checkable ? props.checkable.checked : false
     },
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 </script>
 
 <template>
-  <button v-bind="rootAttrs" :class="rootClass" :disabled="disabled">
+  <button :class="rootClass" :disabled="disabled">
     <slot></slot>
     <UIIcon
       v-if="slots.suffix == null && closable && !disabled"
diff --git a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
index 54431ab7c..5f7b885c7 100644
--- a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <span class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
       <slot></slot>
     </span>
@@ -7,28 +7,20 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, useAttrs, useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 import { cn, type ClassValue } from '../utils'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   size: 'medium' | 'large'
+  class?: ClassValue
 }>()
 
 const slots = useSlots()
-const attrs = useAttrs()
 const rootClass = computed(() =>
   cn(
     '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
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 </script>
diff --git a/spx-gui/src/components/ui/block-items/UICornerIcon.vue b/spx-gui/src/components/ui/block-items/UICornerIcon.vue
index 90fb0f719..f588f8e0c 100644
--- a/spx-gui/src/components/ui/block-items/UICornerIcon.vue
+++ b/spx-gui/src/components/ui/block-items/UICornerIcon.vue
@@ -1,30 +1,28 @@
 <!-- icon at the top-right corner of block-item -->
 
 <template>
-  <div v-bind="rootAttrs" :class="rootClass" :style="rootStyle" @click.stop="emit('click', $event)">
+  <div :class="rootClass" :style="rootStyle" @click.stop="emit('click', $event)">
     <UIIcon class="h-4 w-4" :type="type" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs, type StyleValue } from 'vue'
+import { computed } from 'vue'
 import { cn, type ClassValue } from '../utils'
 import UIIcon, { type Type as IconType } from '../icons/UIIcon.vue'
 import type { Color } from '../tokens/colors'
 import { useUIVariables } from '../UIConfigProvider.vue'
 import { getCssVars } from '../tokens/utils'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     type: IconType
     color?: Color
+    class?: ClassValue
   }>(),
   {
-    color: 'primary'
+    color: 'primary',
+    class: undefined
   }
 )
 
@@ -32,19 +30,14 @@ const emit = defineEmits<{
   click: [MouseEvent]
 }>()
 
-const attrs = useAttrs()
 const uiVariables = useUIVariables()
 const cssVars = computed(() => getCssVars('--ui-corner-icon-color-', uiVariables.color[props.color]))
 const rootClass = computed(() =>
   cn(
     'absolute -top-1.5 -right-1.5 h-6 w-6 flex items-center justify-center rounded-full cursor-pointer',
     'text-grey-100 bg-(--ui-corner-icon-color-main) hover:bg-(--ui-corner-icon-color-400) active:bg-(--ui-corner-icon-color-600)',
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, style: _style, ...rest } = attrs
-  return rest
-})
-const rootStyle = computed<StyleValue>(() => [attrs.style as StyleValue, cssVars.value])
+const rootStyle = computed(() => cssVars.value)
 </script>
diff --git a/spx-gui/src/components/ui/collapse/UICollapse.vue b/spx-gui/src/components/ui/collapse/UICollapse.vue
index 07935e0d4..64897461e 100644
--- a/spx-gui/src/components/ui/collapse/UICollapse.vue
+++ b/spx-gui/src/components/ui/collapse/UICollapse.vue
@@ -14,35 +14,28 @@ export function useCollapseCtx() {
 </script>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed } from 'vue'
 import { cn, type ClassValue } from '../utils'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     defaultExpandedNames?: string[]
+    class?: ClassValue
   }>(),
   {
-    defaultExpandedNames: () => []
+    defaultExpandedNames: () => [],
+    class: undefined
   }
 )
 
 const expandedNames = ref(props.defaultExpandedNames)
-const attrs = useAttrs()
-const rootClass = computed(() => cn('m-0 flex list-none flex-col p-0', attrs.class as ClassValue))
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
+const rootClass = computed(() => cn('m-0 flex list-none flex-col p-0', props.class ?? null))
 
 provide(collapseCtxKey, { expandedNames })
 </script>
 
 <template>
-  <ul v-bind="rootAttrs" :class="rootClass">
+  <ul :class="rootClass">
     <slot></slot>
   </ul>
 </template>
diff --git a/spx-gui/src/components/ui/collapse/UICollapseItem.vue b/spx-gui/src/components/ui/collapse/UICollapseItem.vue
index 8ce9310fe..df93efee6 100644
--- a/spx-gui/src/components/ui/collapse/UICollapseItem.vue
+++ b/spx-gui/src/components/ui/collapse/UICollapseItem.vue
@@ -1,27 +1,19 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed } from 'vue'
 import { cn, type ClassValue } from '../utils'
 import UIIcon from '../icons/UIIcon.vue'
 import { useCollapseCtx } from './UICollapse.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   title: string
   name: string
+  class?: ClassValue
 }>()
 
 const collapseCtx = useCollapseCtx()
-const attrs = useAttrs()
 
 const expanded = computed(() => collapseCtx.expandedNames.value.includes(props.name))
-const rootClass = computed(() => cn('flex flex-col', attrs.class as ClassValue))
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
+const rootClass = computed(() => cn('flex flex-col', props.class ?? null))
 
 function handleToggle() {
   collapseCtx.expandedNames.value = expanded.value
@@ -31,7 +23,7 @@ function handleToggle() {
 </script>
 
 <template>
-  <li v-bind="rootAttrs" class="ui-collapse-item" :class="rootClass">
+  <li class="ui-collapse-item" :class="rootClass">
     <header
       class="flex cursor-pointer items-center justify-between [transition:margin-bottom_0.3s]"
       :class="expanded ? 'mb-2' : null"
diff --git a/spx-gui/src/components/ui/empty/UIEmpty.vue b/spx-gui/src/components/ui/empty/UIEmpty.vue
index 8cb6e2148..e0f617a70 100644
--- a/spx-gui/src/components/ui/empty/UIEmpty.vue
+++ b/spx-gui/src/components/ui/empty/UIEmpty.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <template v-if="size === 'large'">
       <img :src="img" />
       <slot></slot>
@@ -51,19 +51,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs, useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 import { cn, type ClassValue } from '../utils'
 import { useConfig } from '../UIConfigProvider.vue'
 import searchImg from './search.svg'
 import gameImg from './game.svg'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   size: 'small' | 'medium' | 'large' | 'extra-large'
   img?: 'search' | 'game'
+  class?: ClassValue
 }>()
 
 const img = computed(() => {
@@ -76,7 +73,6 @@ const img = computed(() => {
 const config = useConfig()
 const defaultText = computed(() => config.empty?.text ?? 'No data')
 const slots = useSlots()
-const attrs = useAttrs()
 const rootClass = computed(() =>
   cn(
     'h-full w-full flex items-center justify-center',
@@ -85,13 +81,9 @@ const rootClass = computed(() =>
       'flex-col': props.size === 'extra-large',
       'gap-2 text-grey-600': props.size === 'small' || props.size === 'medium'
     },
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 
 // TODO: support button for size:large ?
 </script>
diff --git a/spx-gui/src/components/ui/error/UIError.vue b/spx-gui/src/components/ui/error/UIError.vue
index 20cbf2747..6bfa2b3a7 100644
--- a/spx-gui/src/components/ui/error/UIError.vue
+++ b/spx-gui/src/components/ui/error/UIError.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <img :src="defaultErrorImg" alt="" />
     <h5 class="mt-3 text-16 text-grey-1000">
       <slot></slot>
@@ -21,50 +21,42 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useAttrs } from 'vue'
+import { computed, ref } from 'vue'
 import { cn, type ClassValue } from '../utils'
 import { useConfig } from '../UIConfigProvider.vue'
 import UIIcon from '../icons/UIIcon.vue'
 import defaultErrorImg from './default-error.svg'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 // TODO: support more error types
 const props = withDefaults(
   defineProps<{
     retry?: () => unknown
     back?: () => unknown
     cover?: boolean
+    class?: ClassValue
   }>(),
   {
     retry: undefined,
     back: undefined,
-    cover: false
+    cover: false,
+    class: undefined
   }
 )
 
 const config = useConfig()
-const attrs = useAttrs()
 const retryText = computed(() => config.error?.retryText ?? 'Retry')
 const backText = computed(() => config.error?.backText ?? 'Back')
 const rootClass = computed(() =>
   cn(
     'h-full w-full flex flex-col items-center justify-center',
     props.cover ? 'absolute inset-0 overflow-hidden bg-grey-100 opacity-[0.97] [border-radius:inherit]' : null,
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 
-const opBtnClass = [
-  'px-3 cursor-pointer border-none outline-none bg-transparent flex items-center gap-1 text-13/5',
-  'text-primary-main transition-colors duration-200 hover:text-primary-400 active:text-primary-600'
-].join(' ')
+const opBtnClass =
+  'px-3 cursor-pointer border-none outline-none bg-transparent flex items-center gap-1 text-13/5 \
+text-primary-main transition-colors duration-200 hover:text-primary-400 active:text-primary-600'
 
 const loading = ref(false)
 
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index f54f3f8d8..f950e264b 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- TODO: is there any way to avoid the wrapper `<div>`? -->
   <!-- eslint-disable-next-line vue/no-v-html -->
-  <div v-bind="rootAttrs" :class="rootClass" v-html="typeIconMap[type]"></div>
+  <div :class="rootClass" v-html="typeIconMap[type]"></div>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed } from 'vue'
 import { cn, type ClassValue } from '../utils'
 import file from './file.svg?raw'
 import arrowDown from './arrow-down.svg?raw'
@@ -151,22 +151,14 @@ const typeIconMap = {
 
 export type Type = keyof typeof typeIconMap
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   type: Type
+  class?: ClassValue
 }>()
 
-const attrs = useAttrs()
 const rootClass = computed(() =>
-  cn('ui-icon flex h-4 w-4', props.type === 'loading' ? 'spinning' : null, attrs.class as ClassValue)
+  cn('ui-icon flex h-4 w-4', props.type === 'loading' ? 'spinning' : null, props.class ?? null)
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 </script>
 
 <style scoped>
diff --git a/spx-gui/src/components/ui/loading/UIDetailedLoading.vue b/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
index d322e7f07..d5230a64e 100644
--- a/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
+++ b/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, watch, nextTick, useAttrs } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import { DotLottieVue, type DotLottieVueInstance } from '@lottiefiles/dotlottie-vue'
 import { cn, type ClassValue } from '../utils'
 import animationFileUrl from './animation.lottie?url'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 export type MaskType = 'none' | 'semi-transparent'
 
 const props = withDefaults(
@@ -16,11 +12,13 @@ const props = withDefaults(
     cover?: boolean
     visible?: boolean
     mask?: boolean | MaskType
+    class?: ClassValue
   }>(),
   {
     cover: false,
     visible: true,
-    mask: true
+    mask: true,
+    class: undefined
   }
 )
 
@@ -30,7 +28,6 @@ const mask = computed(() => {
   return props.mask
 })
 
-const attrs = useAttrs()
 const rootClass = computed(() =>
   cn(
     'h-4/5 w-full flex flex-col items-center justify-center [transition:visibility_0.3s,opacity_0.3s]',
@@ -39,13 +36,9 @@ const rootClass = computed(() =>
       ? 'bg-[#24292f99] [backdrop-filter:blur(5px)] [-webkit-backdrop-filter:blur(5px)]'
       : null,
     props.visible ? 'visible opacity-100' : 'invisible opacity-0',
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 const textClass = computed(() =>
   cn(
     'flex items-center gap-2 text-13/5 text-title',
@@ -69,7 +62,7 @@ watch(
 </script>
 
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <DotLottieVue ref="dotLottieRef" class="h-[150px] w-[90px] flex-none" autoplay loop :src="animationFileUrl" />
     <div class="mb-1 h-[5px] w-45 rounded-full bg-grey-600">
       <div
diff --git a/spx-gui/src/components/ui/loading/UILoading.vue b/spx-gui/src/components/ui/loading/UILoading.vue
index fa0bc9dec..1ef974ca8 100644
--- a/spx-gui/src/components/ui/loading/UILoading.vue
+++ b/spx-gui/src/components/ui/loading/UILoading.vue
@@ -1,18 +1,14 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <NSpin />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed } from 'vue'
 import { NSpin } from 'naive-ui'
 import { cn, type ClassValue } from '../utils'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 export type MaskType = 'none' | 'semi-transparent' | 'solid'
 
 const props = withDefaults(
@@ -20,20 +16,22 @@ const props = withDefaults(
     cover?: boolean
     visible?: boolean
     mask?: boolean | MaskType
+    class?: ClassValue
   }>(),
   {
     cover: false,
     visible: true,
-    mask: true
+    mask: true,
+    class: undefined
   }
 )
 
-const attrs = useAttrs()
 const mask = computed(() => {
   if (props.mask === false) return 'none'
   if (props.mask === true) return 'semi-transparent'
   return props.mask
 })
+
 const rootClass = computed(() =>
   cn(
     'h-4/5 w-full flex justify-center invisible opacity-0 [transition:visibility_0.3s,opacity_0.3s]',
@@ -41,11 +39,7 @@ const rootClass = computed(() =>
     props.cover && mask.value === 'semi-transparent' ? 'bg-white/50' : null,
     props.cover && mask.value === 'solid' ? 'bg-grey-100' : null,
     props.visible ? 'visible opacity-100' : null,
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 </script>
diff --git a/spx-gui/src/components/ui/menu/UIMenu.vue b/spx-gui/src/components/ui/menu/UIMenu.vue
index 273cca177..1b68b2f84 100644
--- a/spx-gui/src/components/ui/menu/UIMenu.vue
+++ b/spx-gui/src/components/ui/menu/UIMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <slot></slot>
   </div>
 </template>
@@ -14,19 +14,14 @@ export const ctxKey: InjectionKey<MenuCtx> = Symbol('menu-ctx')
 </script>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed } from 'vue'
 import { cn, type ClassValue } from '../utils'
 
-defineOptions({
-  inheritAttrs: false
-})
+const props = defineProps<{
+  class?: ClassValue
+}>()
 
-const attrs = useAttrs()
-const rootClass = computed(() => cn('p-2', attrs.class as ClassValue))
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
+const rootClass = computed(() => cn('p-2', props.class ?? null))
 
 provide(ctxKey, { disabled: false, inGroup: false })
 </script>
diff --git a/spx-gui/src/components/ui/menu/UIMenuGroup.vue b/spx-gui/src/components/ui/menu/UIMenuGroup.vue
index 104075fde..b3a0984cd 100644
--- a/spx-gui/src/components/ui/menu/UIMenuGroup.vue
+++ b/spx-gui/src/components/ui/menu/UIMenuGroup.vue
@@ -1,34 +1,27 @@
 <template>
-  <div v-bind="rootAttrs" class="ui-menu-group" :class="rootClass">
+  <div class="ui-menu-group" :class="rootClass">
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, provide, useAttrs } from 'vue'
+import { computed, provide } from 'vue'
 import { computedShallowReactive } from '@/utils/utils'
 import { cn, type ClassValue } from '../utils'
 import { ctxKey } from './UIMenu.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
+    class?: ClassValue
   }>(),
   {
-    disabled: false
+    disabled: false,
+    class: undefined
   }
 )
 
-const attrs = useAttrs()
-const rootClass = computed(() => cn('flex flex-col gap-1', attrs.class as ClassValue))
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
+const rootClass = computed(() => cn('flex flex-col gap-1', props.class ?? null))
 
 provide(
   ctxKey,
diff --git a/spx-gui/src/components/ui/menu/UIMenuItem.vue b/spx-gui/src/components/ui/menu/UIMenuItem.vue
index a5afb5e3e..3ec936102 100644
--- a/spx-gui/src/components/ui/menu/UIMenuItem.vue
+++ b/spx-gui/src/components/ui/menu/UIMenuItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="rootAttrs" class="ui-menu-item" :class="rootClass" @click="handleClick">
+  <div class="ui-menu-item" :class="rootClass" @click="handleClick">
     <div v-if="hasSlotIcon" class="h-6 w-6 shrink-0 *:h-full *:w-full" :class="disabled ? 'opacity-50' : null">
       <slot name="icon"></slot>
     </div>
@@ -8,23 +8,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useAttrs, useSlots } from 'vue'
+import { computed, inject, useSlots } from 'vue'
 import { cn, type ClassValue } from '../utils'
 import { useDropdown } from '../UIDropdown'
 import { ctxKey } from './UIMenu.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     interactive?: boolean
     disabled?: boolean
+    class?: ClassValue
   }>(),
   {
     interactive: true,
-    disabled: false
+    disabled: false,
+    class: undefined
   }
 )
 
@@ -36,7 +34,6 @@ const slots = useSlots()
 const hasSlotIcon = !!slots['icon']
 const ctx = inject(ctxKey)
 const dropdownCtrl = useDropdown()
-const attrs = useAttrs()
 
 const disabled = computed(() => props.disabled || !!ctx?.disabled)
 const rootClass = computed(() => {
@@ -45,13 +42,9 @@ const rootClass = computed(() => {
     disabled.value ? 'cursor-not-allowed text-grey-600' : null,
     !disabled.value && props.interactive ? 'cursor-pointer hover:bg-grey-300' : null,
     ctx?.inGroup ? 'in-group' : null,
-    attrs.class as ClassValue
+    props.class ?? null
   )
 })
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 
 function handleClick(e: MouseEvent) {
   if (disabled.value) return
diff --git a/spx-gui/src/components/ui/modal/UIModalClose.vue b/spx-gui/src/components/ui/modal/UIModalClose.vue
index 31a093fa5..a1f82f132 100644
--- a/spx-gui/src/components/ui/modal/UIModalClose.vue
+++ b/spx-gui/src/components/ui/modal/UIModalClose.vue
@@ -1,38 +1,31 @@
 <template>
-  <div v-radar="{ name: 'Close button', desc: 'Click to close the modal' }" v-bind="rootAttrs" :class="rootClass">
+  <div v-radar="{ name: 'Close button', desc: 'Click to close the modal' }" :class="rootClass">
     <UIIcon type="close" :class="iconClass" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed } from 'vue'
 import { cn, type ClassValue } from '../utils'
 import UIIcon from '../icons/UIIcon.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     size?: 'medium' | 'large'
+    class?: ClassValue
   }>(),
   {
-    size: 'medium'
+    size: 'medium',
+    class: undefined
   }
 )
 
-const attrs = useAttrs()
 const rootClass = computed(() =>
   cn(
     'flex items-center justify-center rounded-full text-grey-700 transition-colors duration-200 hover:bg-grey-400 active:bg-grey-500',
     props.size === 'large' ? 'h-8 w-8' : 'h-7 w-7',
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
 const iconClass = computed(() => (props.size === 'large' ? 'h-6 w-6' : 'h-5 w-5'))
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 </script>
diff --git a/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue b/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
index 1793e2b2d..ca755d640 100644
--- a/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
+++ b/spx-gui/src/components/ui/radio/UIChipRadioGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <slot />
   </div>
 </template>
@@ -11,28 +11,20 @@ export const updateRadioValueKey: InjectionKey<(value: string) => void> = Symbol
 </script>
 
 <script setup lang="ts">
-import { computed, provide, useAttrs } from 'vue'
+import { computed, provide } from 'vue'
 
 import { cn, type ClassValue } from '../utils'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   value?: string
+  class?: ClassValue
 }>()
 
 const emit = defineEmits<{
   'update:value': [string]
 }>()
 
-const attrs = useAttrs()
-const rootClass = computed(() => cn('flex gap-3', attrs.class as ClassValue))
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
+const rootClass = computed(() => cn('flex gap-3', props.class ?? null))
 
 const updateValue = (newValue: string) => {
   emit('update:value', newValue)
diff --git a/spx-gui/src/components/ui/radio/UITabRadio.vue b/spx-gui/src/components/ui/radio/UITabRadio.vue
index 9e1d2fddc..47b8b32d8 100644
--- a/spx-gui/src/components/ui/radio/UITabRadio.vue
+++ b/spx-gui/src/components/ui/radio/UITabRadio.vue
@@ -1,27 +1,23 @@
 <template>
-  <li v-bind="rootAttrs" :class="rootClass" @click="handleClick">
+  <li :class="rootClass" @click="handleClick">
     <slot></slot>
   </li>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useAttrs } from 'vue'
+import { computed, inject } from 'vue'
 
 import { cn, type ClassValue } from '../utils'
 import { radioGroupValueKey, updateRadioValueKey } from './UITabRadioGroup.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   value: string
+  class?: ClassValue
 }>()
 
 const radioGroupValue = inject(radioGroupValueKey)
 const updateRadioValue = inject(updateRadioValueKey)
 
-const attrs = useAttrs()
 const isActive = computed(() => radioGroupValue?.value === props.value)
 const rootClass = computed(() =>
   cn(
@@ -30,13 +26,9 @@ const rootClass = computed(() =>
     isActive.value
       ? 'rounded-sm bg-grey-100 text-title [box-shadow:0_6px_10px_0_rgba(14,18,27,0.06),0_2px_4px_0_rgba(14,18,27,0.03)]'
       : 'cursor-pointer text-hint-1',
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 
 const handleClick = () => {
   updateRadioValue?.(props.value)
diff --git a/spx-gui/src/components/ui/radio/UITabRadioGroup.vue b/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
index 10f7593db..109931d60 100644
--- a/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
+++ b/spx-gui/src/components/ui/radio/UITabRadioGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="rootAttrs" :class="rootClass">
+  <div :class="rootClass">
     <slot />
   </div>
 </template>
@@ -12,30 +12,22 @@ export const updateRadioValueKey: InjectionKey<(value: string) => void> = Symbol
 </script>
 
 <script setup lang="ts">
-import { computed, provide, useAttrs } from 'vue'
+import { computed, provide } from 'vue'
 
 import { cn, type ClassValue } from '../utils'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   value?: string
+  class?: ClassValue
 }>()
 
 const emit = defineEmits<{
   'update:value': [string]
 }>()
 
-const attrs = useAttrs()
 const rootClass = computed(() =>
-  cn('flex items-center justify-center rounded-sm bg-grey-400 p-[2px]', attrs.class as ClassValue)
+  cn('flex items-center justify-center rounded-sm bg-grey-400 p-[2px]', props.class ?? null)
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 
 const updateValue = (newValue: string) => {
   emit('update:value', newValue)
diff --git a/spx-gui/src/components/ui/select/UISelect.vue b/spx-gui/src/components/ui/select/UISelect.vue
index 21bc13f5f..6bbca910f 100644
--- a/spx-gui/src/components/ui/select/UISelect.vue
+++ b/spx-gui/src/components/ui/select/UISelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="rootAttrs" class="ui-select" :class="rootClass">
+  <div class="ui-select" :class="rootClass">
     <span
       class="min-w-0 flex-1 overflow-x-hidden text-ellipsis whitespace-nowrap"
       :class="selectedRef == null ? 'text-grey-700' : null"
@@ -20,22 +20,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount, computed, useAttrs } from 'vue'
+import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
 import { untilNotNull } from '@/utils/utils'
 import { cn, type ClassValue } from '../utils'
 import UIIcon from '../icons/UIIcon.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     value: string | null
     placeholder?: string
+    class?: ClassValue
   }>(),
   {
-    placeholder: ''
+    placeholder: '',
+    class: undefined
   }
 )
 
@@ -52,19 +50,14 @@ type Selected = {
 // Uses a NUL character so it cannot collide with any real option value.
 const placeholderValue = '\0'
 
-const attrs = useAttrs()
 const selectedRef = ref<Selected>(null)
 const selectRef = ref<HTMLSelectElement | null>(null)
 const rootClass = computed(() =>
   cn(
     'relative h-(--ui-line-height-2) inline-flex items-center justify-between gap-0.5 rounded-md px-middle text-grey-1000 bg-grey-300 [transition:0.3s]',
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
 
 async function syncSelected() {
   const select = await untilNotNull(() => selectRef.value)
diff --git a/spx-gui/src/components/ui/tab/UITab.vue b/spx-gui/src/components/ui/tab/UITab.vue
index a8871119b..3f990ce83 100644
--- a/spx-gui/src/components/ui/tab/UITab.vue
+++ b/spx-gui/src/components/ui/tab/UITab.vue
@@ -1,26 +1,22 @@
 <template>
-  <li v-bind="rootAttrs" :class="rootClass" :style="rootStyle" @click="handleClick">
+  <li :class="rootClass" :style="cssVars" @click="handleClick">
     <slot></slot>
   </li>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs, type StyleValue } from 'vue'
+import { computed } from 'vue'
 import { cn, type ClassValue } from '../utils'
 import { getCssVars } from '../tokens/utils'
 import { useUIVariables } from '../UIConfigProvider.vue'
 import { useTabsCtx } from './UITabs.vue'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   value: string
+  class?: ClassValue
 }>()
 
 const tabsCtx = useTabsCtx()
-const attrs = useAttrs()
 const active = computed(() => tabsCtx.value === props.value)
 const uiVariables = useUIVariables()
 const cssVars = computed(() =>
@@ -32,14 +28,9 @@ const rootClass = computed(() =>
   cn(
     'cursor-pointer flex items-center bg-(--ui-tab-color-main) px-middle py-[9px] text-16 text-grey-100 transition-opacity duration-200 first:rounded-tl-lg last:rounded-tr-lg',
     active.value ? 'opacity-100' : 'opacity-70',
-    attrs.class as ClassValue
+    props.class ?? null
   )
 )
-const rootAttrs = computed(() => {
-  const { class: _class, style: _style, ...rest } = attrs
-  return rest
-})
-const rootStyle = computed<StyleValue>(() => [attrs.style as StyleValue, cssVars.value])
 
 function handleClick() {
   tabsCtx.setValue(props.value)
diff --git a/spx-gui/src/components/ui/tab/UITabs.vue b/spx-gui/src/components/ui/tab/UITabs.vue
index a10680a90..e461b879e 100644
--- a/spx-gui/src/components/ui/tab/UITabs.vue
+++ b/spx-gui/src/components/ui/tab/UITabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul v-bind="rootAttrs" :class="rootClass">
+  <ul :class="rootClass">
     <slot></slot>
   </ul>
 </template>
@@ -21,22 +21,20 @@ export function useTabsCtx() {
 </script>
 
 <script setup lang="ts">
-import { computed, provide, useAttrs } from 'vue'
+import { computed, provide } from 'vue'
 import { type Color } from '../tokens/colors'
 import { computedShallowReactive } from '@/utils/utils'
 import { cn, type ClassValue } from '../utils'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = withDefaults(
   defineProps<{
     color?: Color
     value: string
+    class?: ClassValue
   }>(),
   {
-    color: 'primary'
+    color: 'primary',
+    class: undefined
   }
 )
 
@@ -44,12 +42,7 @@ const emit = defineEmits<{
   'update:value': [string]
 }>()
 
-const attrs = useAttrs()
-const rootClass = computed(() => cn('flex', attrs.class as ClassValue))
-const rootAttrs = computed(() => {
-  const { class: _class, ...rest } = attrs
-  return rest
-})
+const rootClass = computed(() => cn('flex', props.class ?? null))
 
 provide(
   tabsCtxInjectionKey,

From 1e85dc5985c4a0e413c4a6bf80b3f7e933e1a630 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Fri, 10 Apr 2026 18:20:59 +0800
Subject: [PATCH 27/29] remove redundant layer order declarations

---
 spx-gui/src/app.css                       | 1 -
 spx-gui/src/components/ui/index.ts        | 6 ------
 spx-gui/src/components/ui/layer-order.css | 6 ------
 3 files changed, 13 deletions(-)
 delete mode 100644 spx-gui/src/components/ui/layer-order.css

diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 008a4aa94..8692ad905 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -1,4 +1,3 @@
-@import './components/ui/layer-order.css';
 @import './components/ui/global.css';
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);
diff --git a/spx-gui/src/components/ui/index.ts b/spx-gui/src/components/ui/index.ts
index 76a760cc9..1a5ec002c 100644
--- a/spx-gui/src/components/ui/index.ts
+++ b/spx-gui/src/components/ui/index.ts
@@ -1,9 +1,3 @@
-// Keep the canonical layer order in this UI entry as well, because after a production
-// build these component styles are emitted into a split CSS chunk. Importing it here
-// ensures that chunk registers the layer order before any `@layer components` rules,
-// so `base` does not accidentally outrank `components` due to cross-chunk load order.
-import './layer-order.css'
-
 export { default as UIConfigProvider, useUIVariables, type Config } from './UIConfigProvider.vue'
 export { default as UICard } from './UICard.vue'
 export { default as UICardHeader } from './UICardHeader.vue'
diff --git a/spx-gui/src/components/ui/layer-order.css b/spx-gui/src/components/ui/layer-order.css
deleted file mode 100644
index 1bd35749b..000000000
--- a/spx-gui/src/components/ui/layer-order.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/*
- * Declare the canonical cascade layer order in every entry that can emit a split CSS chunk.
- * In production, the UI library styles may be extracted before `app.css`; without this,
- * a chunk that first introduces `@layer components` can make later `@layer base` rules win.
- */
-@layer theme, base, components, utilities;

From 3b5b7f06006ef5e0d864154cf992d737f9ecfb70 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Fri, 10 Apr 2026 19:09:02 +0800
Subject: [PATCH 28/29] fix: restore loading compatibility hooks for project
 runner

---
 spx-gui/src/components/community/user/AvatarZoomSlider.vue | 2 +-
 spx-gui/src/components/ui/UIButton.vue                     | 1 +
 spx-gui/src/components/ui/UISlider.vue                     | 3 ++-
 spx-gui/src/components/ui/loading/UIDetailedLoading.vue    | 7 ++++++-
 spx-gui/src/pages/community/project.vue                    | 7 ++++---
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/spx-gui/src/components/community/user/AvatarZoomSlider.vue b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
index f89f7bf8f..24da15d83 100644
--- a/spx-gui/src/components/community/user/AvatarZoomSlider.vue
+++ b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
@@ -81,7 +81,7 @@ function handleValueUpdate(value: number) {
   border-radius: 999px;
 }
 
-.slider:deep(.thumb) {
+.slider:deep(.ui-slider-thumb) {
   box-sizing: border-box;
   box-shadow:
     inset 0 0 0 2px var(--ui-color-primary-400),
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index 1e6fb5d26..4f4bc95ba 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -296,6 +296,7 @@ defineExpose({
     :disabled="isDisabled"
     :type="htmlType"
   >
+    <!-- keep `ui-button-content` for existing :deep(...) overrides -->
     <span class="ui-button-content" :class="contentClass" :style="contentStyle">
       <UIIcon v-if="resolvedIcon != null" :class="iconClass" :type="resolvedIcon" />
       <slot v-else name="icon"></slot>
diff --git a/spx-gui/src/components/ui/UISlider.vue b/spx-gui/src/components/ui/UISlider.vue
index 5cef730ac..1f5bcda1e 100644
--- a/spx-gui/src/components/ui/UISlider.vue
+++ b/spx-gui/src/components/ui/UISlider.vue
@@ -11,8 +11,9 @@
     @update:value="handleUpdateValue"
   >
     <template #thumb>
+      <!-- keep `ui-slider-thumb` for existing :deep(...) overrides -->
       <div
-        class="h-5 w-5 rounded-full bg-white transition-transform duration-200 hover:scale-120"
+        class="ui-slider-thumb h-5 w-5 rounded-full bg-white transition-transform duration-200 hover:scale-120"
         :style="{ boxShadow }"
       ></div>
     </template>
diff --git a/spx-gui/src/components/ui/loading/UIDetailedLoading.vue b/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
index d5230a64e..cfafbbcc9 100644
--- a/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
+++ b/spx-gui/src/components/ui/loading/UIDetailedLoading.vue
@@ -28,10 +28,14 @@ const mask = computed(() => {
   return props.mask
 })
 
+// Keep these semantic class hooks `ui-detailed-loading` `cover` `mask-${mask.value}` `text` for compatibility with existing page-level :deep(...) overrides.
+// Some pages still rely on them to adjust runner loading layering/mask behavior until we replace those overrides with explicit component APIs.
 const rootClass = computed(() =>
   cn(
+    'ui-detailed-loading',
     'h-4/5 w-full flex flex-col items-center justify-center [transition:visibility_0.3s,opacity_0.3s]',
-    props.cover ? 'absolute left-0 top-0 h-full' : null,
+    props.cover ? 'cover absolute left-0 top-0 h-full' : null,
+    `mask-${mask.value}`,
     props.cover && mask.value === 'semi-transparent'
       ? 'bg-[#24292f99] [backdrop-filter:blur(5px)] [-webkit-backdrop-filter:blur(5px)]'
       : null,
@@ -41,6 +45,7 @@ const rootClass = computed(() =>
 )
 const textClass = computed(() =>
   cn(
+    'text',
     'flex items-center gap-2 text-13/5 text-title',
     props.cover && mask.value === 'semi-transparent' ? 'text-grey-100' : null
   )
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index f1ad797b8..b58f40d88 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -684,10 +684,10 @@ const remixesRet = useQuery(
   overflow: hidden;
 }
 
+/* TODO: replace these UIDetailedLoading deep overrides with an explicit loading styling API. */
 .project-wrapper :deep(.ui-detailed-loading.cover.mask-semi-transparent .text) {
   color: var(--ui-color-grey-100);
 }
-
 .project-wrapper :deep(.project-runner-surface:not(.fullscreen) .ui-detailed-loading.cover) {
   background: transparent;
   backdrop-filter: none;
@@ -713,11 +713,12 @@ const remixesRet = useQuery(
   width: 40px;
 }
 
-.ops > *.more :deep(.content) {
+/* TODO: replace these UIButton deep overrides with a more explicit styling API or stable override hook. */
+.ops > *.more :deep(.ui-button-content) {
   padding: 0;
 }
 
-.ops .liking :deep(.content) {
+.ops .liking :deep(.ui-button-content) {
   color: var(--ui-color-red-main);
 }
 </style>

From 76f1026b309e66bfa6dc88e3fe1ab4e380b62e1a Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Fri, 10 Apr 2026 20:52:54 +0800
Subject: [PATCH 29/29] align component styles with css layers and root class
 merging

---
 spx-gui/AGENTS.md                             |   4 +-
 spx-gui/src/components/ui/README.md           |  16 ++-
 spx-gui/src/components/ui/UIButton.vue        |  16 ++-
 spx-gui/src/components/ui/UINumberInput.vue   |  54 +++-----
 spx-gui/src/components/ui/UITextInput.vue     | 123 ++++++++----------
 spx-gui/src/components/ui/UITooltip.vue       |  12 +-
 spx-gui/src/components/ui/form/UIFormItem.vue |  14 +-
 .../src/components/ui/input-wrapper.test.ts   |  67 ----------
 .../ui/message/UIMessageProvider.vue          |  12 +-
 .../components/ui/modal/UIDropdownModal.vue   |   9 +-
 .../components/ui/modal/UIFullScreenModal.vue |  24 ++--
 .../ui/modal/UIFullScreenModalHeader.vue      |  12 +-
 spx-gui/src/components/ui/modal/UIModal.vue   |  66 +++++-----
 13 files changed, 179 insertions(+), 250 deletions(-)
 delete mode 100644 spx-gui/src/components/ui/input-wrapper.test.ts

diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 91b52052f..709cdc687 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -94,6 +94,7 @@ When working with backend unique string identifiers such as `username`, project
 
 * Keep `src/app.css` limited to Tailwind entry setup, theme bridge, and rare project-wide utilities.
 * Keep `src/components/ui/global.css` and `src/components/ui/reset.css` as the base reset/foundation layer (Tailwind preflight stays disabled).
+* The global CSS layer order is `theme, base, naive-ui, components, utilities`, declared in `index.html`.
 * Keep `--ui-*` tokens as the source of truth.
 * In Tailwind classes, prefer bridged semantic tokens (for example `text-text`, `text-title`, `bg-primary-100`).
 * In local CSS, prefer direct `--ui-*` variables instead of bridged Tailwind variables.
@@ -119,7 +120,8 @@ When working with backend unique string identifiers such as `username`, project
 * 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.
+	- For the Naive UI-root components listed in `src/components/ui/README.md`, Naive UI defaults live in the `naive-ui` layer and our authored UI styles live in the `components` layer, so component-layer rules have higher cascade priority on the same element/property pair.
+	- Even so, those Naive UI-root components still are not identical to DOM-root utility wrappers. Treat them as component-specific: simple root overrides are often fine, while deeper visual changes may still need wrapper layout control, explicit props, or Naive UI theme overrides.
 * Avoid non-equivalent Tailwind simplifications for flex values. In particular, `flex: 1 1 0` is not equivalent to Tailwind `flex-1` (`flex: 1 1 0%`), so do not simplify between them unless the layout behavior has been verified. Likewise, do not simplify `flex: 0 0 auto` to `shrink-0`; use the equivalent `flex-none` when that shorthand is desired.
 * Prefer `style` / `:style` for one-off values when clearer than Tailwind arbitrary utilities. For example, prefer `style="box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1)"` over a long arbitrary utility such as `shadow-[0_24px_32px_-16px_rgba(0,0,0,0.1)]`.
 * For important/non-obvious background assets, prefer TS imports and inline `backgroundImage` binding.
diff --git a/spx-gui/src/components/ui/README.md b/spx-gui/src/components/ui/README.md
index 7bd8d3117..737548cc0 100644
--- a/spx-gui/src/components/ui/README.md
+++ b/spx-gui/src/components/ui/README.md
@@ -22,13 +22,15 @@
   - For most non-Naive UI components, prefer Tailwind utilities for local structure, layout, and surface styling
   - Local authored style blocks in the UI package use plain CSS; do not reintroduce SCSS
   - Keep complex selectors, animations, third-party/global overrides, and other readability-sensitive rules in plain CSS
+  - The global CSS layer order is `theme, base, naive-ui, components, utilities` and is declared in `spx-gui/index.html`
 
 - Root class handling
 
-  - Current cases fall into three buckets: DOM-root components with merged utilities, single-root semantic wrappers that rely on inherited classes, and Naive UI-root wrappers whose final class priority can be harder to predict
-  - If the root is a normal DOM element and the component already owns root utility classes, use `cn(..., attrs.class)` so external root classes are merged with `tailwind-merge`
+  - Current cases fall into three buckets: DOM-root components with merged utilities, single-root semantic wrappers that rely on inherited classes, and Naive UI-root wrappers whose root-level styling behavior still needs component-specific judgment
+  - If the root is a normal DOM element and the component already owns root utility classes, prefer an explicit `class?: ClassValue` prop and merge it with `cn(..., props.class ?? null)` so external root classes participate in `tailwind-merge`
   - If the component is a single-root wrapper whose styling still depends on semantic hook classes in `@layer components`, prefer Vue's default root attr/class/style inheritance unless explicit root attr control is needed
-  - If the rendered root is primarily a Naive UI component, do not assume external root classes will override reliably. Naive UI's internal styles are not layered with our component styles, so their priority can be higher and the final visual result may be hard to predict
+  - If the rendered root is primarily a Naive UI component, remember that Naive UI styles live in the `naive-ui` layer while our authored UI styles live in `@layer components`, so component-layer rules have higher cascade priority than Naive UI defaults on the same element/property pair
+  - Even so, Naive UI-root components still do not behave exactly like DOM-root utility wrappers: some visual details live on internal child nodes, teleported content, or Naive UI theme tokens instead of the exposed root element
   - Current Naive UI-root components that need extra care are:
 
     - `UIDropdown` → `NPopover`
@@ -42,12 +44,14 @@
     - `UIRadio` → `NRadio`
     - `UIRadioGroup` → `NRadioGroup`
     - `UIForm` → `NForm`
+    - `UITextInput` → `NInput`
+    - `UINumberInput` → `NInputNumber`
     - `UITimeline` → `NTimeline`
     - `UITimelineItem` → `NTimelineItem`
 
-  - For all UI components, an external `class` can still be passed, but do not rely on it for styling-critical behavior. Prefer an outer layout wrapper, explicit component props, or a dedicated API extension when finer control is needed
-  - For the Naive UI-root components listed above, root-level visual overrides from an external `class` are especially hard to predict. Prefer an outer layout wrapper or Naive UI theme overrides instead of assuming the component root will restyle reliably
-  - `UIDivider`, `UIFormItem`, `UILoading`, `UITextInput`, and `UINumberInput` also use Naive UI internally, but they expose a wrapper DOM root; external `class` lands on that wrapper instead of the inner Naive UI control
+  - For all UI components, an external `class` can still be passed, but prefer explicit component props or a dedicated API extension for styling-critical behavior
+  - For the Naive UI-root components listed above, simple root-level overrides are generally workable because the `components` layer sits above `naive-ui`, but do not assume every visual change should come from the root `class`. For deeper visual changes, prefer an outer layout wrapper, explicit props, or Naive UI theme overrides
+  - `UIDivider`, `UIFormItem`, and `UILoading` also use Naive UI internally, but they expose a wrapper DOM root; external `class` lands on that wrapper instead of the inner Naive UI control
   - This is primarily a component authoring/maintenance concern. The long-term goal is to keep these wrappers easy to consume so business code does not need to carry much Naive UI-specific styling knowledge
 
 ### Usage
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index 4f4bc95ba..a08c103b4 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -305,13 +305,15 @@ defineExpose({
   </button>
 </template>
 
-<style scoped>
-.ui-button-root:hover:enabled:not(:active) .ui-button-content {
-  background-color: var(--ui-button-hover-bg-color);
-}
+<style>
+@layer components {
+  .ui-button-root:hover:enabled:not(:active) .ui-button-content {
+    background-color: var(--ui-button-hover-bg-color);
+  }
 
-.ui-button-root[data-variant='shadow']:enabled:active .ui-button-content,
-.ui-button-root[data-variant='shadow'][data-loading='true'] .ui-button-content {
-  box-shadow: none;
+  .ui-button-root[data-variant='shadow']:enabled:active .ui-button-content,
+  .ui-button-root[data-variant='shadow'][data-loading='true'] .ui-button-content {
+    box-shadow: none;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/UINumberInput.vue b/spx-gui/src/components/ui/UINumberInput.vue
index 9bdd30ff1..5a7ffcff7 100644
--- a/spx-gui/src/components/ui/UINumberInput.vue
+++ b/spx-gui/src/components/ui/UINumberInput.vue
@@ -1,37 +1,28 @@
 <template>
-  <div :class="rootClass" :style="rootStyle">
-    <NInputNumber
-      ref="nInput"
-      v-bind="inputAttrs"
-      class="ui-number-input w-full min-w-0"
-      :placeholder="placeholder || ''"
-      :show-button="false"
-      :value="value"
-      :disabled="disabled"
-      :min="min"
-      :max="max"
-      @update:value="(v) => emit('update:value', v)"
-    >
-      <template v-if="slots.prefix != null" #prefix>
-        <slot name="prefix"></slot>
-      </template>
-      <template v-if="slots.suffix != null" #suffix>
-        <slot name="suffix"></slot>
-      </template>
-    </NInputNumber>
-  </div>
+  <NInputNumber
+    ref="nInput"
+    class="ui-number-input"
+    :placeholder="placeholder || ''"
+    :show-button="false"
+    :value="value"
+    :disabled="disabled"
+    :min="min"
+    :max="max"
+    @update:value="(v) => emit('update:value', v)"
+  >
+    <template v-if="!!slots.prefix" #prefix>
+      <slot name="prefix"></slot>
+    </template>
+    <template v-if="!!slots.suffix" #suffix>
+      <slot name="suffix"></slot>
+    </template>
+  </NInputNumber>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, type StyleValue, useAttrs, useSlots } from 'vue'
+import { onMounted, ref, useSlots } from 'vue'
 import { NInputNumber } from 'naive-ui'
 
-import { cn, type ClassValue } from './utils'
-
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps<{
   value: number | null
   disabled?: boolean
@@ -45,14 +36,7 @@ const emit = defineEmits<{
   'update:value': [number | null]
 }>()
 
-const attrs = useAttrs()
 const slots = useSlots()
-const rootClass = computed(() => cn('w-full min-w-0 rounded-md', attrs.class as ClassValue))
-const rootStyle = computed(() => attrs.style as StyleValue)
-const inputAttrs = computed(() => {
-  const { class: _class, style: _style, ...rest } = attrs
-  return rest
-})
 
 // It's wierd that the prop `autofocus` of `NInput` does not work as expected, so we handle it manually.
 const nInput = ref<InstanceType<typeof NInputNumber> | null>(null)
diff --git a/spx-gui/src/components/ui/UITextInput.vue b/spx-gui/src/components/ui/UITextInput.vue
index 60816ec46..597e46c02 100644
--- a/spx-gui/src/components/ui/UITextInput.vue
+++ b/spx-gui/src/components/ui/UITextInput.vue
@@ -1,50 +1,42 @@
+<!-- TODO: Wrap it with a native node ? -->
 <template>
-  <div :class="rootClass" :style="rootStyle">
-    <NInput
-      ref="nInput"
-      v-bind="inputAttrs"
-      class="ui-text-input w-full min-w-0"
-      :class="[`color-${color}`, `ui-input-size-${size}`]"
-      :placeholder="placeholder || ''"
-      :value="value"
-      :type="type"
-      :disabled="disabled"
-      :readonly="readonly"
-      :resizable="false"
-      @update:value="(v) => emit('update:value', v)"
-    >
-      <template v-if="slots.prefix != null" #prefix>
-        <slot name="prefix"></slot>
-      </template>
-      <template v-if="(value && clearable) || slots.suffix != null" #suffix>
-        <div
-          v-if="value && clearable"
-          class="-mr-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full text-grey-800 transition-colors duration-200 hover:bg-grey-400 active:bg-grey-500"
-          @click="emit('update:value', '')"
-        >
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M6.70713 5.99999L9.35363 3.35347C9.54913 3.15847 9.54913 2.8415 9.35363 2.6465C9.15813 2.451 8.84212 2.451 8.64663 2.6465L6.00013 5.29299L3.35363 2.6465C3.15813 2.451 2.84212 2.451 2.64662 2.6465C2.45112 2.8415 2.45112 3.15847 2.64662 3.35347L5.29312 5.99999L2.64662 8.6465C2.45112 8.8415 2.45112 9.15847 2.64662 9.35347C2.74412 9.45097 2.87213 9.49999 3.00013 9.49999C3.12813 9.49999 3.25613 9.45097 3.35363 9.35347L6.00013 6.70699L8.64663 9.35347C8.74412 9.45097 8.87213 9.49999 9.00013 9.49999C9.12813 9.49999 9.25613 9.45097 9.35363 9.35347C9.54913 9.15847 9.54913 8.8415 9.35363 8.6465L6.70713 5.99999Z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-        <slot name="suffix"></slot>
-      </template>
-    </NInput>
-  </div>
+  <NInput
+    ref="nInput"
+    class="ui-text-input"
+    :class="[`ui-text-input-color-${color}`, `ui-text-input-size-${size}`]"
+    :placeholder="placeholder || ''"
+    :value="value"
+    :type="type"
+    :disabled="disabled"
+    :readonly="readonly"
+    :resizable="false"
+    @update:value="(v) => emit('update:value', v)"
+  >
+    <template v-if="!!slots.prefix" #prefix>
+      <slot name="prefix"></slot>
+    </template>
+    <template v-if="(value && clearable) || !!slots.suffix" #suffix>
+      <div
+        v-if="value && clearable"
+        class="-mr-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full text-grey-800 transition-colors duration-200 hover:bg-grey-400 active:bg-grey-500"
+        @click="emit('update:value', '')"
+      >
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M6.70713 5.99999L9.35363 3.35347C9.54913 3.15847 9.54913 2.8415 9.35363 2.6465C9.15813 2.451 8.84212 2.451 8.64663 2.6465L6.00013 5.29299L3.35363 2.6465C3.15813 2.451 2.84212 2.451 2.64662 2.6465C2.45112 2.8415 2.45112 3.15847 2.64662 3.35347L5.29312 5.99999L2.64662 8.6465C2.45112 8.8415 2.45112 9.15847 2.64662 9.35347C2.74412 9.45097 2.87213 9.49999 3.00013 9.49999C3.12813 9.49999 3.25613 9.45097 3.35363 9.35347L6.00013 6.70699L8.64663 9.35347C8.74412 9.45097 8.87213 9.49999 9.00013 9.49999C9.12813 9.49999 9.25613 9.45097 9.35363 9.35347C9.54913 9.15847 9.54913 8.8415 9.35363 8.6465L6.70713 5.99999Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <slot name="suffix"></slot>
+    </template>
+  </NInput>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, type StyleValue, useAttrs, useSlots } from 'vue'
+import { onMounted, ref, useSlots } from 'vue'
 import { NInput } from 'naive-ui'
 
-import { cn, type ClassValue } from './utils'
-
-defineOptions({
-  inheritAttrs: false
-})
-
 type Type = 'textarea' | 'text' | 'password'
 type Color = 'default' | 'white'
 type Size = 'medium' | 'large'
@@ -73,14 +65,7 @@ const emit = defineEmits<{
   'update:value': [string]
 }>()
 
-const attrs = useAttrs()
 const slots = useSlots()
-const rootClass = computed(() => cn('w-full min-w-0 rounded-md', attrs.class as ClassValue))
-const rootStyle = computed(() => attrs.style as StyleValue)
-const inputAttrs = computed(() => {
-  const { class: _class, style: _style, ...rest } = attrs
-  return rest
-})
 
 // It's weird that the prop `autofocus` of `NInput` does not work as expected, so we handle it manually.
 const nInput = ref<InstanceType<typeof NInput> | null>(null)
@@ -89,6 +74,29 @@ onMounted(() => {
 })
 </script>
 
+<style>
+@layer components {
+  /* color */
+  .ui-text-input-color-default {
+    --ui-text-input-bg-color: var(--ui-color-grey-300);
+    --ui-text-input-bg-color-hover: var(--ui-color-grey-400);
+  }
+
+  .ui-text-input-color-white {
+    --ui-text-input-bg-color: var(--ui-color-grey-100);
+    --ui-text-input-bg-color-hover: var(--ui-color-grey-100);
+  }
+
+  /* size */
+  .ui-text-input-size-medium {
+    --ui-text-input-height: 32px;
+  }
+  .ui-text-input-size-large {
+    --ui-text-input-height: 40px;
+  }
+}
+</style>
+
 <style scoped>
 /* it's not possible to control input's hovered-bg-color with themeOverrides, */
 /* so we do background color control here */
@@ -107,23 +115,4 @@ onMounted(() => {
 .ui-text-input :deep(.n-input__prefix) {
   margin-right: 8px;
 }
-
-/* color */
-.color-default {
-  --ui-text-input-bg-color: var(--ui-color-grey-300);
-  --ui-text-input-bg-color-hover: var(--ui-color-grey-400);
-}
-
-.color-white {
-  --ui-text-input-bg-color: var(--ui-color-grey-100);
-  --ui-text-input-bg-color-hover: var(--ui-color-grey-100);
-}
-
-/* size */
-.ui-input-size-medium {
-  --ui-text-input-height: 32px;
-}
-.ui-input-size-large {
-  --ui-text-input-height: 40px;
-}
 </style>
diff --git a/spx-gui/src/components/ui/UITooltip.vue b/spx-gui/src/components/ui/UITooltip.vue
index a7bccf8b2..13d06aaea 100644
--- a/spx-gui/src/components/ui/UITooltip.vue
+++ b/spx-gui/src/components/ui/UITooltip.vue
@@ -52,12 +52,10 @@ const attachTo = usePopupContainer()
 </script>
 
 <style>
-/*
-  Now the style is broken with scoped <style>, the `data-v-xxx` is not correctly applied on `NTooltip` element
-  TODO: use scoped style
-*/
-.ui-tooltip {
-  font-size: 12px; /* TODO: some text-size related var? */
-  line-height: 1.5;
+@layer components {
+  .ui-tooltip {
+    font-size: 12px; /* TODO: some text-size related var? */
+    line-height: 1.5;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/form/UIFormItem.vue b/spx-gui/src/components/ui/form/UIFormItem.vue
index 5fdc12922..13b48a078 100644
--- a/spx-gui/src/components/ui/form/UIFormItem.vue
+++ b/spx-gui/src/components/ui/form/UIFormItem.vue
@@ -76,15 +76,13 @@ const handleContentInput = debounce(() => {
   .ui-form-item + .ui-form-item {
     margin-top: 24px;
   }
-}
-</style>
 
-<style scoped>
-.ui-form-item :deep(.n-form-item-feedback-wrapper) {
-  line-height: 1.57143;
-}
+  .ui-form-item :deep(.n-form-item-feedback-wrapper) {
+    line-height: 1.57143;
+  }
 
-.ui-form-item :deep(.n-form-item-feedback-wrapper):empty {
-  display: none;
+  .ui-form-item :deep(.n-form-item-feedback-wrapper):empty {
+    display: none;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/input-wrapper.test.ts b/spx-gui/src/components/ui/input-wrapper.test.ts
deleted file mode 100644
index d885307f7..000000000
--- a/spx-gui/src/components/ui/input-wrapper.test.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-
-import UINumberInput from './UINumberInput.vue'
-import UITextInput from './UITextInput.vue'
-
-describe('native wrappers for naive-ui inputs', () => {
-  it('keeps external class/style on the UITextInput wrapper while forwarding other attrs', () => {
-    const wrapper = mount(UITextInput, {
-      props: {
-        value: '',
-        clearable: false
-      },
-      attrs: {
-        class: 'mt-4 w-full',
-        style: 'margin-left: 1px;',
-        'data-test-id': 'text-input',
-        tabindex: '-1'
-      }
-    })
-
-    expect(wrapper.classes()).toContain('mt-4')
-    expect(wrapper.classes()).toContain('w-full')
-    expect(wrapper.classes()).toContain('min-w-0')
-    expect(wrapper.attributes('style')).toContain('margin-left: 1px;')
-
-    const input = wrapper.find('.ui-text-input')
-    expect(input.classes()).toContain('ui-text-input')
-    expect(input.classes()).toContain('w-full')
-    expect(input.classes()).toContain('min-w-0')
-    expect(input.classes()).toContain('color-default')
-    expect(input.classes()).toContain('ui-input-size-medium')
-    expect(input.classes()).not.toContain('mt-4')
-    expect(input.attributes('data-test-id')).toBe('text-input')
-    expect(input.attributes('tabindex')).toBe('-1')
-    expect(input.attributes('style')).not.toContain('margin-left: 1px;')
-  })
-
-  it('keeps external class/style on the UINumberInput wrapper while forwarding other attrs', () => {
-    const wrapper = mount(UINumberInput, {
-      props: {
-        value: 1
-      },
-      attrs: {
-        class: 'mx-2 w-32',
-        style: 'position: relative;',
-        'data-test-id': 'number-input',
-        tabindex: '0'
-      }
-    })
-
-    expect(wrapper.classes()).toContain('mx-2')
-    expect(wrapper.classes()).toContain('w-32')
-    expect(wrapper.classes()).not.toContain('w-full')
-    expect(wrapper.classes()).toContain('min-w-0')
-    expect(wrapper.attributes('style')).toContain('position: relative;')
-
-    const input = wrapper.find('.ui-number-input')
-    expect(input.classes()).toContain('ui-number-input')
-    expect(input.classes()).toContain('w-full')
-    expect(input.classes()).toContain('min-w-0')
-    expect(input.classes()).not.toContain('mx-2')
-    expect(input.attributes('data-test-id')).toBe('number-input')
-    expect(input.attributes('tabindex')).toBe('0')
-    expect(input.attributes('style') ?? '').not.toContain('position: relative;')
-  })
-})
diff --git a/spx-gui/src/components/ui/message/UIMessageProvider.vue b/spx-gui/src/components/ui/message/UIMessageProvider.vue
index 3e4a4ea9f..ac15ab674 100644
--- a/spx-gui/src/components/ui/message/UIMessageProvider.vue
+++ b/spx-gui/src/components/ui/message/UIMessageProvider.vue
@@ -35,11 +35,13 @@ provide(messageEventsInjectKey, emitter)
 </template>
 
 <style>
-.n-message {
-  align-items: flex-start; /** text-content may contain multiple lines */
-}
+@layer components {
+  .n-message {
+    align-items: flex-start; /** text-content may contain multiple lines */
+  }
 
-.n-message .n-message__icon {
-  margin-top: 1px; /** align icon with text-content */
+  .n-message .n-message__icon {
+    margin-top: 1px; /** align icon with text-content */
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/modal/UIDropdownModal.vue b/spx-gui/src/components/ui/modal/UIDropdownModal.vue
index 4e317a9b6..1592a0e9e 100644
--- a/spx-gui/src/components/ui/modal/UIDropdownModal.vue
+++ b/spx-gui/src/components/ui/modal/UIDropdownModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <form class="flex flex-col items-stretch" @submit.prevent="emit('confirm')">
+  <form :class="rootClass" @submit.prevent="emit('confirm')">
     <header class="h-11 flex flex-none items-center px-4">
       <h4 class="flex-1 text-16 text-title">{{ title }}</h4>
       <UIModalClose class="-mr-1" @click="emit('cancel')" />
@@ -27,15 +27,20 @@
   </form>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue'
 import { UIButton, UIDivider } from '@/components/ui'
+import { cn, type ClassValue } from '../utils'
 import UIModalClose from './UIModalClose.vue'
 
-defineProps<{
+const props = defineProps<{
   title: string
+  class?: ClassValue
 }>()
 
 const emit = defineEmits<{
   cancel: []
   confirm: []
 }>()
+
+const rootClass = computed(() => cn('flex flex-col items-stretch', props.class ?? null))
 </script>
diff --git a/spx-gui/src/components/ui/modal/UIFullScreenModal.vue b/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
index 11eea1949..3ac4b0aa9 100644
--- a/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
+++ b/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
@@ -59,17 +59,19 @@ useModalEsc(
   </Teleport>
 </template>
 
-<style scoped>
-.ui-full-screen-modal.v-enter-active,
-.ui-full-screen-modal.v-leave-active {
-  transition:
-    transform 0.4s ease-in-out,
-    opacity 0.2s ease-in-out 0.1s;
-}
+<style>
+@layer components {
+  .ui-full-screen-modal.v-enter-active,
+  .ui-full-screen-modal.v-leave-active {
+    transition:
+      transform 0.4s ease-in-out,
+      opacity 0.2s ease-in-out 0.1s;
+  }
 
-.ui-full-screen-modal.v-enter-from,
-.ui-full-screen-modal.v-leave-to {
-  transform: scale(0);
-  opacity: 0;
+  .ui-full-screen-modal.v-enter-from,
+  .ui-full-screen-modal.v-leave-to {
+    transform: scale(0);
+    opacity: 0;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/ui/modal/UIFullScreenModalHeader.vue b/spx-gui/src/components/ui/modal/UIFullScreenModalHeader.vue
index 495c1610a..e0341bc90 100644
--- a/spx-gui/src/components/ui/modal/UIFullScreenModalHeader.vue
+++ b/spx-gui/src/components/ui/modal/UIFullScreenModalHeader.vue
@@ -1,13 +1,23 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { cn, type ClassValue } from '../utils'
 import UIModalClose from './UIModalClose.vue'
 
+const props = defineProps<{
+  class?: ClassValue
+}>()
+
 const emit = defineEmits<{
   close: []
 }>()
+
+const rootClass = computed(() =>
+  cn('h-14 flex items-center gap-8 border-b border-grey-400 text-16 text-title', props.class ?? null)
+)
 </script>
 
 <template>
-  <div class="h-14 flex items-center gap-8 border-b border-grey-400 text-16 text-title">
+  <div :class="rootClass">
     <div class="basis-[30%] flex-1"></div>
     <div class="basis-[40%] flex-1 min-w-0 overflow-hidden">
       <slot></slot>
diff --git a/spx-gui/src/components/ui/modal/UIModal.vue b/spx-gui/src/components/ui/modal/UIModal.vue
index ab1aafa58..54d72562f 100644
--- a/spx-gui/src/components/ui/modal/UIModal.vue
+++ b/spx-gui/src/components/ui/modal/UIModal.vue
@@ -106,44 +106,44 @@ useModalEsc(
 )
 </script>
 
-<style scoped>
-.ui-modal-container {
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--ui-box-shadow-big);
-  border-radius: var(--ui-border-radius-2);
-  background-color: white;
-  overflow: hidden;
-}
+<style>
+@layer components {
+  .ui-modal.has-custom-origin {
+    /* Override NaiveUI's transform-origin to support custom animation origins */
+    transform-origin: var(--ui-modal-custom-origin, center) !important;
+  }
 
-.ui-modal-size-small {
-  width: 480px;
-}
+  .ui-modal.has-custom-origin.fade-in-scale-up-transition-enter-active,
+  .ui-modal.has-custom-origin.fade-in-scale-up-transition-leave-active,
+  .ui-modal.has-custom-origin.fade-in-scale-up-transition-enter-to,
+  .ui-modal.has-custom-origin.fade-in-scale-up-transition-leave-to {
+    transform-origin: var(--ui-modal-custom-origin, center) !important;
+  }
 
-.ui-modal-size-medium {
-  width: 640px;
-}
+  .ui-modal-container {
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--ui-box-shadow-big);
+    border-radius: var(--ui-border-radius-2);
+    background-color: white;
+    overflow: hidden;
+  }
 
-.ui-modal-size-large {
-  width: 960px;
-}
+  .ui-modal-size-small {
+    width: 480px;
+  }
 
-.ui-modal-size-full {
-  width: 100%;
-  margin: 16px;
-}
-</style>
+  .ui-modal-size-medium {
+    width: 640px;
+  }
 
-<style>
-.ui-modal.has-custom-origin {
-  /* Override NaiveUI's transform-origin to support custom animation origins */
-  transform-origin: var(--ui-modal-custom-origin, center) !important;
-}
+  .ui-modal-size-large {
+    width: 960px;
+  }
 
-.ui-modal.has-custom-origin.fade-in-scale-up-transition-enter-active,
-.ui-modal.has-custom-origin.fade-in-scale-up-transition-leave-active,
-.ui-modal.has-custom-origin.fade-in-scale-up-transition-enter-to,
-.ui-modal.has-custom-origin.fade-in-scale-up-transition-leave-to {
-  transform-origin: var(--ui-modal-custom-origin, center) !important;
+  .ui-modal-size-full {
+    width: 100%;
+    margin: 16px;
+  }
 }
 </style>