[Feature] - Switch to ShadCN and TailwindCSS

[Yugveer06]

What feature would you like to see?

Feature Request: Switch to ShadCN and TailwindCSS

Description

Currently, we build all components and styles from scratch. Switching to ShadCN for UI components and TailwindCSS for styling will improve accessibility, reusability, and maintainability.

Motivation

• Accessibility: ShadCN provides accessible components out of the box, which can avoid issues like [Bug] - Language selector dropdown not working as expected in Safari #76.
• Reusability: Ready-to-use, customizable components streamline development.
• Maintainability: TailwindCSS reduces CSS bloat and simplifies style management.
• Consistency: Ensures a unified look and feel across the app.

Benefits

• Improved accessibility
• Faster development
• Cleaner, maintainable code
• Better scalability

Implementation

1. Add TailwindCSS.
2. Migrate components to ShadCN.
3. Incrementally refactor styles and components.

Additional Context

ShadCN and TailwindCSS align with modern best practices, enhancing our development process.

[GreenMan36]

May I add for the motivation; you copy and paste the components you need. If done properly, you have full ownership over the components and how they work.

If we were to use a "component library", I think ShadCN would be a great fit. As for Tailwind, its a classic choice, no personal experience with it but I do agree it might be the right choice if this project keeps growing over time.

[neoRandom]

Maintaining styles made with plain CSS is really a lot of work and can make unexpected bugs, but I think using ShadCN components is not necessary.

Many, if not all, conversions from plain CSS to Tailwind are almost 1:1, so I guess that is better to make this convertion first, that includes lots of files, and then think about using some library to improve the visuals.

[Mathys-Gasnier]

ShadCN wouldn't be included for visual, but to improve the compatibility of certains components (Mainly the language select)
As currently it's not working on some browser because we have our own custom one... Using the browser one would be an option, but it's a pain to work with, and has a lot of issues, and making it searchable easily is also a pain.