Migrate to tailwindcss for styling

[nikero41]

This pull request migrates the application’s styling system from SCSS modules to Tailwind CSS utility classes. It removes all SCSS files, replaces their usage with Tailwind classes throughout the codebase, and updates configuration files to support Tailwind and related tools. Several new dependencies are added, and component code is refactored to use utility-based styling for improved maintainability and consistency.

Styling System Migration

• All SCSS module files and the global SCSS file have been deleted, and their styles are now implemented using Tailwind CSS utility classes directly in the component files. [1] [2] [3] [4] [5] [6] [7] [8] [9]
• All components (Sidebar, CountryCardsGrid, CountryCard, ProgressBar, Title, Button, Card, Modal) have been refactored to use Tailwind classes instead of SCSS module imports. [1] [2] [3] [4] [5] [6] [7] [8] [9]

Configuration and Dependency Updates

• Tailwind CSS and supporting libraries (@tailwindcss/vite, clsx, tailwind-merge) have been added to package.json dependencies.
• Tailwind configuration has been integrated into eslint.config.js and prettier.config.js to support linting and formatting of Tailwind classes and stylesheets. [1] [2]

Project Structure and Imports

• The global stylesheet import in src/App.tsx is updated to use the new Tailwind-based globals.css instead of the removed SCSS file.
• Utility functions (such as cn for class name composition) are now used in place of SCSS module class name references in all relevant components. [1] [2] [3]

These changes modernize the styling approach, streamline the codebase, and make it easier to maintain and extend UI styles going forward.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
neighbors-game	Ready	Preview, Comment	Feb 2, 2026 5:22pm

[coderabbitai]

Warning

Rate limit exceeded

@nikero41 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 52 minutes and 11 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch tailwindcss

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nikero41]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.