GitAuto: Replace current CSS with tailwind CSS

[gitauto-ai]

Resolves #63

What is the feature

The feature is to replace the current CSS styling with Tailwind CSS in the project.

Why we need the feature

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without having to leave the HTML. It can significantly reduce the amount of custom CSS we need to write, improve consistency across the application, and make it easier to maintain and scale the design system.

How to implement and why

1. Install Tailwind CSS:

   • Add Tailwind CSS to the project using npm or yarn. This will allow us to use Tailwind's utility classes in our HTML files.

2. Configure Tailwind:

   • Create a tailwind.config.js file to customize the default configuration. This step is crucial to tailor the framework to our project's needs, such as defining custom colors, spacing, etc.

3. Remove Existing CSS:

   • Gradually replace existing CSS classes with Tailwind's utility classes. This can be done incrementally to ensure that the design remains consistent throughout the transition.

4. Refactor HTML:

   • Update the HTML files in the pages directory to use Tailwind's utility classes. This will involve replacing existing class names with Tailwind's classes.

5. Test the Design:

   • Thoroughly test the application to ensure that the design looks as expected and that there are no regressions. This step is important to maintain the visual integrity of the application.

6. Optimize for Production:

   • Use PurgeCSS to remove unused CSS classes in production builds. This will help in reducing the final CSS bundle size, improving load times.

About backward compatibility

The transition to Tailwind CSS should be done in a way that maintains backward compatibility. This means that during the transition period, both the old CSS and Tailwind CSS can coexist. This approach allows for a gradual migration and ensures that the application remains functional and visually consistent throughout the process.

Test these changes locally

git checkout -b gitauto/issue-#63-5256d83f-191c-4f90-a205-07adba051b22
git pull origin gitauto/issue-#63-5256d83f-191c-4f90-a205-07adba051b22