Migrate component-specific `global.css` classes to Tailwind utilities #126

New issue

Closed

opened 2026-07-08 12:33:36 -05:00 by Gitchegumi · 0 comments

Gitchegumi commented

2026-07-08 12:33:36 -05:00

(Migrated from github.com)

Summary

Refactor styling so component-specific CSS currently living in global.css is moved into the components that use it via Tailwind CSS utility classes.

This is a maintainability issue, not a redesign. The UI should look and behave the same after the migration.

Problem

Too much component-specific styling in global.css makes the UI harder to maintain. When classes or patterns become deprecated, it requires hunting through a large global stylesheet to figure out which component owns the styling and whether it is still used.

Tailwind should keep component-level styling close to the component markup. That makes future cleanup, deprecation fixes, and UI iteration much easier.

Desired behavior

Component-specific styles should live on or near the component using Tailwind utility classes.
global.css should only contain styles that are genuinely global.
Theme-level concerns, such as color palette variables, root tokens, base theme setup, resets, and app-wide defaults, can remain in global.css.
Component-level layout, spacing, typography, borders, state styles, editor controls, panels, buttons, tabs, alert editor elements, and other specific UI styling should be migrated out of global.css where practical.
The refactor should preserve the existing visual appearance and behavior.

Scope

Audit global.css and classify styles into two groups:

Keep global
- Theme variables
- Color palette definitions
- Root-level app defaults
- CSS resets/base rules
- Truly shared global behavior
Move to components
- Classes used by one component or one small component family
- Editor-specific layout/styling
- Dashboard/page-specific styling
- Button/control variants that are only used in a bounded component context
- Any class where the owning component can be clearly identified

Acceptance criteria

global.css is audited for component-specific classes.
Component-specific classes are migrated to Tailwind utility classes in the owning components.
Theme-level and truly global styles remain in global.css.
The alert editor, dashboard, settings, assets, workspaces, guide, and overlay/browser-source views retain their current visual appearance.
No intentional redesign is introduced as part of this issue.
Obsolete CSS classes are removed after migration.
No duplicate styling paths remain where both Tailwind and old global classes define the same component styling.
Lint/build checks pass.

Implementation notes

Prefer straightforward Tailwind utilities directly in component markup unless a repeated pattern clearly justifies a small local abstraction.

Do not move theme tokens, palette definitions, or other app-wide design primitives out of global.css just for the sake of removing lines. The goal is to stop using global.css as a dumping ground for component-specific styling while keeping actual global styling global.

## Summary Refactor styling so component-specific CSS currently living in `global.css` is moved into the components that use it via Tailwind CSS utility classes. This is a maintainability issue, not a redesign. The UI should look and behave the same after the migration. ## Problem Too much component-specific styling in `global.css` makes the UI harder to maintain. When classes or patterns become deprecated, it requires hunting through a large global stylesheet to figure out which component owns the styling and whether it is still used. Tailwind should keep component-level styling close to the component markup. That makes future cleanup, deprecation fixes, and UI iteration much easier. ## Desired behavior - Component-specific styles should live on or near the component using Tailwind utility classes. - `global.css` should only contain styles that are genuinely global. - Theme-level concerns, such as color palette variables, root tokens, base theme setup, resets, and app-wide defaults, can remain in `global.css`. - Component-level layout, spacing, typography, borders, state styles, editor controls, panels, buttons, tabs, alert editor elements, and other specific UI styling should be migrated out of `global.css` where practical. - The refactor should preserve the existing visual appearance and behavior. ## Scope Audit `global.css` and classify styles into two groups: 1. **Keep global** - Theme variables - Color palette definitions - Root-level app defaults - CSS resets/base rules - Truly shared global behavior 2. **Move to components** - Classes used by one component or one small component family - Editor-specific layout/styling - Dashboard/page-specific styling - Button/control variants that are only used in a bounded component context - Any class where the owning component can be clearly identified ## Acceptance criteria - [ ] `global.css` is audited for component-specific classes. - [ ] Component-specific classes are migrated to Tailwind utility classes in the owning components. - [ ] Theme-level and truly global styles remain in `global.css`. - [ ] The alert editor, dashboard, settings, assets, workspaces, guide, and overlay/browser-source views retain their current visual appearance. - [ ] No intentional redesign is introduced as part of this issue. - [ ] Obsolete CSS classes are removed after migration. - [ ] No duplicate styling paths remain where both Tailwind and old global classes define the same component styling. - [ ] Lint/build checks pass. ## Implementation notes Prefer straightforward Tailwind utilities directly in component markup unless a repeated pattern clearly justifies a small local abstraction. Do not move theme tokens, palette definitions, or other app-wide design primitives out of `global.css` just for the sake of removing lines. The goal is to stop using `global.css` as a dumping ground for component-specific styling while keeping actual global styling global.

No milestone

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

gitchegumi/GitchAlerts#126

No description provided.

Rows
Columns

Migrate component-specific global.css classes to Tailwind utilities #126