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 leaving 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 Tailwind configuration. This step is crucial to define custom colors, fonts, and other design tokens that match the current design system.

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 remains consistent and that there are no visual regressions.

6. Optimize for Production:

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

About backward compatibility

Backward compatibility is not a concern in this case as the change is purely related to styling. However, it is important to ensure that the visual appearance of the application remains consistent after the transition to Tailwind CSS. Therefore, thorough testing is required to maintain the current design integrity.

Test these changes locally

git checkout -b gitauto/issue-#63-b654085d-0bd7-4bf4-a5cc-e0850360564a
git pull origin gitauto/issue-#63-b654085d-0bd7-4bf4-a5cc-e0850360564a