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.

npx svelte-add@latest tailwindcss

You’re done! πŸ˜„

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

	import '../app.postcss'

<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.

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

Skip this step if you have prettier in your project.

npm i -D prettier prettier-plugin-svelte

Install the Prettier plugin for Tailwind CSS.

npm i -D prettier-plugin-tailwindcss

After you save it should sort the classes.

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

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

Useful Tailwind CSS Tips

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


If you want to support the content you're reading or watching on YouTube consider becoming a patreon starting low as 1$ per month.

Become a patreon
Subscribe For Updates
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