Set Up SvelteKit With Tailwind CSS

Published Oct 12, 2022

Table of Contents

Using Svelte Add

The easiest way to set up Tailwind CSS inside of an existing SvelteKit project is with svelte-add.

terminal
npx svelte-add@latest tailwindcss

You’re done! πŸ˜„

This creates a app.postcss file which is imported inside the root layout.

src/routes/+layout.svelte
<script>
	import '../app.postcss'
</script>

<slot />

Automatic Class Sorting With Prettier

Make sure you have the Prettier extension installed and it’s the default formatter in your VS Code settings.

settings.json
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

Skip this step if you have prettier in your project.

terminal
npm i -D prettier prettier-plugin-svelte

Install the Prettier plugin for Tailwind CSS.

terminal
npm i -D prettier-plugin-tailwindcss

After you save it should sort the classes.

routes/+page.svelte
<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">
  ...
</button>

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">
  ...
</button>

Useful Tailwind CSS Tips

Here are some useful quality of life tips when using Tailwind:

Support

You can subscribe on YouTube, or consider becoming a patron if you want to support my work.

Patreon
Found a mistake?

Every post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.

Edit on GitHub