UI : Improve the UI and UX #71
Description
We want to improve the CSS.
Folder Structure
Create /styles folder with subfolders:
components/ → component-specific CSS modules
pages/ → page-specific styles
globals.css, variables.css, typography.css
Global Styles
Implement CSS reset and base typography in globals.css
Define CSS variables for colors, fonts, spacing in variables.css
Component Styles
Use CSS Modules (ComponentName.module.css) for each component
Follow BEM or descriptive class naming
Tailwind Integration (Optional)
Configure tailwind.config.js with project colors, fonts, and content paths
Use Tailwind for utility-first classes alongside CSS Modules
Responsive Design
Use mobile-first media queries or Tailwind responsive classes
Performance & Best Practices
Avoid deep selectors and !important
Minimize global overrides
Remove unused CSS (Tailwind purge if applicable)
Acceptance Criteria:
Project has a clear and organized CSS folder structure
All components use CSS Modules with proper naming conventions
Global styles and variables are implemented
Tailwind configuration is applied (if project uses Tailwind)
Styles are responsive and optimized for performance
Team can easily add new components or pages following the guidelines