SvelteKit With Tailwind CSS

Table of Contents

Set up Tailwind CSS

You can create a new SvelteKit project or add Tailwind to an existing project.

🧪 You can find the example repository on GitHub.

Create new SvelteKit project.

npm init svelte

🐿️ You can skip the next part and use npx svelte-add tailwindcss

Install the dependencies required by Tailwind.

npm i -D tailwindcss postcss autoprefixer

Create the Tailwind CSS config.

npx tailwindcss init tailwind.config.cjs -p

Give Tailwind the path to your template files.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  plugins: []

Add the Tailwind directives to your CSS.

@tailwind base;
@tailwind components;
@tailwind utilities;

Import the CSS file.

  import '../app.css'

<slot />

You’re done!

<h1 class="grid h-screen place-content-center text-8xl">

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"

You’re going to need the prettier package which is one of the options when you create a SvelteKit project.

✔ Add Prettier for code formatting? … No / [Yes]

Skip this step if you have Prettier.

npm i -D prettier

Install the Prettier plugin for Tailwind CSS.

npm i -D prettier-plugin-tailwindcss

SvelteKit uses prettier-plugin-svelte which conflicts with the Tailwind CSS plugin and you have to remove it but prettier-plugin-tailwindcss includes it for you so everything should work as before.

npm uninstall prettier-plugin-svelte 

Remove plugins from your Prettier config.

  "semi": false,
  "useTabs": true,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 60,
- "plugins": ["prettier-plugin-svelte"],
  "pluginSearchDirs": ["."],
  "overrides": [
      "files": "*.svelte",
      "options": { "parser": "svelte" }

You also don’t have to change the formatter for your Svelte files.

"[svelte]": {
  "editor.defaultFormatter": "svelte.svelte-vscode"

You might need to restart your editor.

<!-- 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:


Despite the drama around it Tailwind CSS is a great way for moving quick without distractions and feels great because of it but it doesn’t compensate for not understanding CSS because a Tailwind class is just a line of regular CSS and it’s not a UI component framework.

If you decide at a later point in your project that you don’t want to use Tailwind anymore that’s perfectly fine because it’s a great prototyping tool and you can replace it with regular CSS using Open Props if you want.

Thank you for reading! 🏄️

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
Subscribe For Updates