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 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 component by component 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 in the UI.

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

The transition to Tailwind CSS will not maintain backward compatibility with the existing CSS. However, since this is a styling change, it should not affect the functionality of the application. It is important to ensure that the visual appearance remains consistent and that any custom styles are replicated using Tailwind's configuration options.

Test these changes locally

git checkout -b gitauto/issue-#63-150e3c43-3836-4027-9e85-2bcfa3e4cd9d
git pull origin gitauto/issue-#63-150e3c43-3836-4027-9e85-2bcfa3e4cd9d