Migrate the CSS styling solution from Twind to Tailwind CSS v3

[dtinth]

Background

The WebMIDICon project is using Twind to style the app. It is very similar to Tailwind CSS but is a JS-based solution.

However, Twind has no updates and 1.0 is not yet released for a long time.

So I want to migrate the app to use Tailwind CSS, because Tailwind CSS v3 is released with JIT mode and has great integration with Vite and is more popular, meaning that it would be easier for people to contribute to the project.

Task

• Migrate the app from twind to tailwindcss
• Your PR should:
  • Add Tailwind CSS to the project following the guide for Vite.
  • Migrate the theme from index.tsx into tailwind.config.cjs.
  • Remove twind from dependency and migrate the twind syntax to Tailwind CSS.
• Automated builds must be passing.
• Please include a screenshot in your PR to confirm that it is working.

Hacktoberfest

If you would like to work on this task, please write a comment stating your intent. We will then assign the issue to you. To ensure continuity, the issue will be unassigned after 3 days of inactivity — so please keep us updated.

Getting assigned to an issue is NOT a reservation. It is simply to let others know that someone is already working on it to avoid duplicated efforts. The first person who submits a valid Pull Request (PR) that resolves the issue will have their PR merged, regardless of who was assigned to the issue. However, if you are assigned to an issue and start working on it, but someone else submits a valid PR before you, you can still submit a valid PR even if it has conflicts. The PR will be given the "hacktoberfest-accepted" label and the issue will be closed.

If you encounter any problem, please include relevant logs and screenshot so it’s easy to troubleshoot.

[Amogh1001]

Can I do it?

[dtinth]

@Amogh1001 Please go ahead, thank you!