SvelteKit With Tailwind CSS

Table of Contents

• Set up Tailwind CSS
• Automatic Class Sorting With Prettier
• Useful Tailwind CSS Tips
• Conclusion

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.

<script>
  import '../app.css'
</script>

<slot />

You’re done!

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

"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">
  ...
</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:

• If you need a component library for Svelte you can use Skeleton or daisyUI and Flowbite which are framework agnostic
• Use the Tailwind CSS IntelliSense extension to help you with autocomplete so you don’t have to look for every value in the documentation
• Use Tailwind CSS Cheat Sheet to find what you need at a glance
• Don’t forget you can place your long class names inside a variable if you need to reuse them because the author of Tailwind discourages extracting classes with @apply
• Enable word wrap in your editor with Alt + Z to make it easier to work with long class names
• Another way to get class sorting in Tailwind is with the Headwind extension if other methods don’t work for you

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! 🏄️