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.

terminal
npm init svelte

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

Install the dependencies required by Tailwind.

terminal
npm i -D tailwindcss postcss autoprefixer

Create the Tailwind CSS config.

terminal
npx tailwindcss init tailwind.config.cjs -p

Give Tailwind the path to your template files.

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

Add the Tailwind directives to your CSS.

app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Import the CSS file.

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

<slot />

You’re done!

routes/+page.svelte
<h1 class="grid h-screen place-content-center text-8xl">
  Heading
</h1>

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"

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

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

Skip this step if you have Prettier.

terminal
npm i -D prettier

Install the Prettier plugin for Tailwind CSS.

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

terminal
npm uninstall prettier-plugin-svelte 

Remove plugins from your Prettier config.

.prettierrc
{
  "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.

settings.json
"[svelte]": {
  "editor.defaultFormatter": "svelte.svelte-vscode"
}

You might need to restart your editor.

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:

Conclusion

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