Integrate TailwindCSS with Svelte 5

If you’re aiming to style your Svelte 5 applications easily and efficiently, you’re in the right place. There are two simple ways to add TailwindCSS:

1. Create a new Svelte project that automatically includes TailwindCSS
2. Integrate TailwindCSS into an existing project

Create a New Svelte Project

Run the following command to create a new Svelte 5 project, then make sure to select TailwindCSS when prompted:

bunx sv create <name>

This will automatically setup a Svelte 5 project for you and install TailwindCSS as a dependency if you select it.

Integrate TailwindCSS in an Existing Project

To add TailwindCSS to your project, use sv add tailwindcss instead:

bunx sv add tailwindcss

Use TailwindCSS in Your Components

Once TailwindCSS is set up, you can start using its utility classes directly in your Svelte components. For example, you can create a simple button with the following code:

<button class="rounded bg-blue-500 px-4 py-2 font-bold text-white">Click Me!</button>

Final Thoughts

Integrating TailwindCSS with Svelte 5 is easy and allows you to create beautiful, responsive layouts and components rapidly. Enjoy crafting your next project!