Styling

• Regular .css files
  • All class names and selectors are global by default.
  • If you define .root in one CSS file, that style can affect any element with class="root" anywhere in your app.
  • This can cause style collisions if different components reuse the same class name.

• CSS Modules (.module.css)

  • When imported into a JavaScript/TypeScript file, the class names are locally scoped to that module.
  • The build tool (e.g., Vite, Webpack, CRA) automatically generates unique class names like Right_root__1a2b3 behind the scenes.
  • You import them as an object and apply styles like:

  import styles from './Right.module.css';
  ...
  

• Tailwind is Mobile-first Responsive

  • Provides a {screen:} prefix to use instead of media queries/rules
  • Screen prefix identifies when to use utility class
    • default screen is mobile (no prefix)
  • Example:
  • Set custom value
  • Pseudo class prefix