(SP: 3) Refactor Tailwind theme: centralize tokens and remove duplication #140
Description
Overview
As part of ongoing infrastructure improvements and database migration preparation, we need to refactor the Tailwind CSS theme configuration.
The goal is to centralize design tokens, remove duplicated styles, and ensure a clean, scalable, and maintainable styling foundation across the application.
This task focuses purely on UI infrastructure and does not introduce visual redesigns or feature changes.
Goals
- Centralize Tailwind theme configuration
- Remove duplicated and scattered styling logic
- Improve maintainability of design tokens
- Prepare UI layer for future scaling and theme extensions
- Ensure no visual regressions in production
Scope of Work
Tailwind Theme Refactor
- Review current
@themeand@layerconfiguration - Identify duplicated or overlapping tokens and styles
- Consolidate design tokens (colors, radii, animations, accents)
- Ensure consistent naming and usage across the project
Component Styling Cleanup
- Refactor button styles into reusable primitives (e.g.
.btn,.btn-primary) - Remove inline hardcoded colors in components
- Ensure components rely only on theme tokens and utilities
Architecture Improvements
- Separate responsibilities between:
@layer base(resets & global behavior)@layer components(reusable UI primitives)@theme(design tokens)
- Ensure proper dark/light theme switching via CSS variables
Verification
- Validate styles in light and dark themes
- Verify no layout or color regressions
- Ensure Tailwind build output remains stable
Acceptance Criteria
- All duplicated Tailwind/theme-related code is removed
- UI styles are driven exclusively by centralized tokens
- Buttons and interactive elements use shared primitives
- Light/Dark theme switching works without regressions
- No visual or functional regressions in production
Notes
- This is a refactor-only task (no new features)
- No database or backend changes involved
- Safe to merge independently from DB migration work