Migrate frontend styling to Tailwind CSS v4 with tokenized design layer

[Copilot]

This PR begins the Tailwind v4 migration by replacing Bootstrap/Reactstrap-based UI styling while preserving the existing app structure and visual behavior. It also introduces a small Tailwind-backed design layer and removes obsolete styling dependencies.

• Tailwind v4 integration

  • Added @tailwindcss/vite to Vite plugin chain.
  • Replaced Sass entrypoint with app/style/main.css using Tailwind v4 (@import "tailwindcss").

• Design system foundation

  • Introduced theme tokens via @theme (--font-display, --color-card, --color-filter-active).
  • Centralized reusable UI classes for card, header/logo, filter button, and typography sizing to keep styling consistent.

• UI component migration (Bootstrap/Reactstrap → Tailwind classes)

  • Replaced Card, CardBody, CardText, CardTitle, and Progress usage in Country.tsx with semantic HTML + Tailwind utility classes.
  • Converted filter button active state in App.tsx from inline style to class-driven styling (filterBtn--active).

• Dependency cleanup

  • Removed unused styling packages: bootstrap, reactstrap, sass.
  • Added Tailwind packages: tailwindcss, @tailwindcss/vite.

• Focused behavior coverage

  • Added targeted tests for ProgressBar rendering paths (normal and overflow segment).

@import "tailwindcss";

@theme {
  --font-display: "Twemoji Country Flags", "Helvetica", "Comic Sans", serif;
  --color-card: #f8f9fa;
  --color-filter-active: #add8e6;
}

.filterBtn--active {
  @apply bg-filter-active;
}

Original prompt

Start implementation

The user has attached the following file paths as relevant context:

• .github/instructions/.instructions.md

[Chronological Review: The conversation began with the user requesting to rewrite an application using Tailwind CSS v4 while maintaining the same UI. The user also asked to set up a design system with Tailwind and to remove all unused dependencies. Following this, the user initiated the implementation phase of the project.]

[Intent Mapping:

• "rewrite the app into tailwind v4. keep the same ui. setup a design system with tailwind. remove all the unused dependencies afterwards" - The user wants to modernize the application using Tailwind CSS v4, ensuring the UI remains unchanged, while also establishing a design system and cleaning up dependencies.
• "Start implementation" - The user is signaling readiness to begin the coding work.]

[Technical Inventory:

• Tailwind CSS v4: The user intends to use this version for styling the application.
• Design System: The user aims to create a design system using Tailwind, which involves defining reusable components and styles.
• Dependency Management: The user plans to remove unused dependencies to streamline the project.]

[Code Archaeology: No specific files or code changes have been discussed yet, as the conversation is still in the planning and initiation phase.]

[Progress Assessment: The user has outlined the goals for the project and has initiated the implementation phase. No coding has been completed yet.]

[Context Validation: The user’s goals and the context for the implementation are clear, focusing on Tailwind CSS v4 and a design system.]

[Recent Commands Analysis:

• Last Agent Commands: The user executed commands to initiate the implementation of the project.
• Tool Results Summary: No specific tool results were returned as the conversation is still in the early stages of implementation.
• Pre-Summary State: The agent was preparing to start the implementation of the user’s requests regarding Tailwind CSS and the design system.
• Operation Context: The commands executed were directly related to the user’s goal of rewriting the app with Tailwind CSS v4 and setting up a design system.]

1. Conversation Overview: - Primary Objectives: The user requested to "rewrite the app into tailwind v4. keep the same ui. setup a design system with tailwind. remove all the unused dependencies afterwards" and indicated readiness to "Start implementation." - Session Context: The conversation has focused on transitioning the application to Tailwind CSS v4, maintaining the existing UI, and establishing a design system while cleaning up dependencies. - User Intent Evolution: The user has clearly defined their goals and is now ready to begin the implementation phase.

2. Technical Foundation:

• Tailwind CSS v4: The user plans to utilize this version for styling the application.
• Design System: The user aims to create a design system using Tailwind, which will involve defining reusable components and styles.

3. Codebase Status:

• No specific files or code changes have been discussed yet, as the conversation is still in the planning and initiation phase.

4. Problem Resolution:

• Issues Encountered: No technical problems have been identified yet.
• Solutions Implemented: The user has not yet begun coding, so no solutions have been implemented.
• Debugging Context: There are no ongoing troubleshooting efforts at this stage.
• Lessons Learned: No insights have been discovered yet as the project has not commenced.

5. Progress Tracking:

• Completed Tasks: The user has outlined the project goals and initiated the implementation phase.
• Partially Complete Work: No tasks are currently in progress as the implementation has just begun.
• Validated Outcomes: No features or code have been confirmed working through testing yet.

6. Active Work State:

• Current Focus: The user is focused on starting the implementation of the application using Tailwind CSS v4.
• Recent Context: The last few exchanges involved the user confirming their readiness to begin the implementation.
• Working Code: No specific code snippets have been discussed yet.
• Immediate Context: The user is preparing to implement the requested changes to the application.

7. Recent Operations:

• Last Agent Commands: The user executed commands to start the implementation of the project.
• Tool Results Summary: No specific tool results were returned as the conversation is still in the early stages of implementation.
• Pre-Summary State: The agent was preparing to start the implementation of the user’s requests regarding Tailwind CSS and the design system.
• Operation Context: The commands executed were directly related to the user’s goal of rewriting the app with Tailwind CSS v4 and setting up a design system.

8. Continuation Plan:

• [Pending Task 1]: Begin the implementation of the application using Tailwind CSS v4 while maintaining the existing UI.
• [Pendi...

Created from VS Code.

[wvanderp]

@copilot please remove the gitBuild as this is only for the pipeline

[Copilot]

@copilot please remove the gitBuild as this is only for the pipeline

Fixed in f1cae9f: removed the tracked gitBuild directory contents and added gitBuild to .gitignore so it stays pipeline-only.

[Copilot]

Copilot wasn't able to review any files in this pull request.