November 13, 2024
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:
- Create a new Svelte project that automatically includes TailwindCSS
- 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!