GitAuto: Replace current CSS with tailwind CSS

[gitauto-for-dev]

Resolves #60

What is the feature

This pull request proposes replacing the current CSS stylesheets with Tailwind CSS, a utility-first CSS framework that provides a robust set of pre-defined classes to style our application efficiently.

Why we need the feature

• Improved Development Efficiency: Tailwind CSS allows developers to style components directly in the markup using utility classes, reducing the need to write custom CSS.
• Consistent Styling: Utilizing a standardized framework ensures a consistent design language across the application.
• Reduced CSS Bloat: Tailwind's purging feature removes unused styles in production builds, resulting in smaller CSS files and faster load times.
• Customizability: Tailwind is highly customizable, allowing us to tweak the default styles to fit our branding needs without overriding styles manually.

How to implement and why

Step 1: Install Tailwind CSS and Dependencies

• Install Tailwind CSS via npm:

  npm install tailwindcss postcss autoprefixer
  

• Initialize Tailwind and create configuration files:

  npx tailwindcss init -p
  

  This creates tailwind.config.js and postcss.config.js in the root directory.

Reason: Setting up Tailwind and PostCSS is essential to integrate Tailwind into the build process and customize its configuration.

Step 2: Configure Tailwind

• Specify the paths to all of our template files in tailwind.config.js for purging unused styles:

  module.exports = {
    content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
    // ...
  }

Reason: This ensures Tailwind analyzes all relevant files to include only the necessary styles in the final build.

Step 3: Update CSS Entry Point

• Replace the content of our main CSS file (e.g., styles/globals.css) with Tailwind's base styles:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

Reason: This incorporates Tailwind's base, components, and utility styles into our application.

Step 4: Refactor Existing Styles

• Gradually refactor styles in the pages directory by replacing custom CSS classes with Tailwind utility classes.
• Update JSX/HTML elements to use Tailwind classes directly.
• Remove redundant CSS from custom stylesheets.

Reason: Incremental refactoring minimizes risk and allows for testing at each step to ensure visual consistency.

Step 5: Test the Application

• Thoroughly test each page to ensure the new styles match the previous design.
• Use browser developer tools to compare before and after styles where necessary.

Reason: Testing ensures we maintain the application's look and feel, catching any discrepancies early.

Step 6: Clean Up

• After confirming that all styles have been successfully migrated, delete obsolete CSS files.
• Remove any unused CSS classes in the codebase.

Reason: Cleaning up reduces technical debt and prevents confusion from legacy code.

About backward compatibility

• Visual Consistency: Efforts will be made to match the existing design closely to prevent any disruption to the user experience.
• Fallbacks: If certain styles cannot be replicated exactly with Tailwind, we'll document these changes and consider maintaining specific custom styles as needed.
• Component Stability: Component interfaces and props remain unchanged, so there should be no impact on functionality from a code integration standpoint.
• Recommendation: Since the styling overhaul could have unintended side effects, we should perform a thorough review and perhaps stage the rollout to monitor for any issues.

Test these changes locally

git checkout -b gitauto-wes/issue-#60-b1e74ecc-2780-4864-967e-245b11786181
git pull origin gitauto-wes/issue-#60-b1e74ecc-2780-4864-967e-245b11786181