Jun 2021 update: This guide has been completely updated for SvelteKit@next.113 + Tailwind JIT! You can also see this guide
Aug 2021 update: try this first:
npm init svelte@next npx svelte-add@latest tailwindcss npm install
Prerequisites
I'm going to skip the preamble. You can read:
I will also assume you have SvelteKit set up:
npm init svelte@next my-app
cd my-app
npm install
npm run dev
I strongly recommend picking at least the ESLint and Prettier options.
Step 1: Install deps
npm install -D svelte-preprocess tailwindcss autoprefixer postcss
# optional tailwind ui plugin
npm install @tailwindcss/ui
Step 2: Setup Config Files
Add a tailwind.config.cjs file at the project root. (we use .cjs for now, or else the tailwind vs code extension complains it uses require when the rest of the project is in ESM).
// tailwind.config.cjs
module.exports = {
mode: 'jit',
// you dont need `purge: enabled: production` because you are using jit
purge: [
"./src/**/*.svelte",
// may also want to include HTML files
"./src/**/*.html"
],
darkMode: 'class',
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Step 2A: Svelte Config with inline PostCSS
And now set it up inside of your Svelte bundler config as well:
// svelte.config.js
import preprocess from 'svelte-preprocess';
import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess({
postcss: {
plugins: [
tailwind,
autoprefixer
]
}
}),
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte'
}
};
export default config;
Step 2B: Svelte Config with separate PostCSS for PostCSS nesting
ALTERNATIVELY you can also set up your postcss.config.js in a separate file (this seems to be better for the postcss nesting plugin to run).
We use PostCSS 7, not 8 (latest) for now, because... JavaScript. I've added in postcss-nesting because I like it - feel free to remove of course.
npm i -D postcss-load-config postcss@7 postcss-nesting@7-
svelte.config.js:
preprocess: preprocess({
defaults: {
style: 'postcss',
},
postcss: true,
}),
-
postcss.config.js
import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import nesting from 'postcss-nesting'
export default {
syntax: 'postcss-scss',
plugins: [
// Some plugins, like postcss-nested, need to run before Tailwind
nesting(),
tailwind(),
// But others, like autoprefixer, need to run after
autoprefixer(),
// !dev &&
// cssnano({
// preset: 'default',
// }),
],
};
However, this setup is still buggy when you actually try to nest CSS. I haven't figured it out yet and would like some help here if you are reading this.
Step 3: Add the Tailwind includes to your Svelte App
Create src/routes/__layout.svelte and add this:
<style global lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
<slot></slot>
And that's it!
Optional: Dark Mode
I like using Dark mode with classes so you can let the user toggle it:
Put this in your app.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>
%svelte.head%
</head>
<body class="dark:bg-gray-900 dark:text-gray-100">
<div id="svelte">%svelte.body%</div>
</body>
</html>
What about Svelte classes!
Svelte has a class: binding syntax that didn't used to be supported by Tailwind. With Tailwind JIT, it has now been supported as of 2021!
What versions are you working with?!?
"devDependencies": {
"@sveltejs/adapter-netlify": "^1.0.0-next.17",
"@sveltejs/kit": "^1.0.0-next.113",
"@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.19.0",
"autoprefixer": "^9.8.6",
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-svelte3": "^3.2.0",
"postcss": "^8.3.0",
"postcss-load-config": "^3.0.1",
"prettier": "~2.2.1",
"prettier-plugin-svelte": "^2.2.0",
"svelte": "^3.34.0",
"svelte-check": "^2.0.0",
"svelte-preprocess": "^4.7.3",
"tailwindcss": "^2.1.4",
"tslib": "^2.0.0",
"typescript": "^4.0.0"
},
Reference Repos
More practical repos you can reference and run
- https://github.com/sw-yx/swyxkit
- https://github.com/navneetsharmaui/sveltekit-starter
- https://github.com/Dan1ve/Sveltekit-Typescript-TailwindCSS-Jit
You are supposed to be able to run npx svelte-add tailwindcss --jit - but as of time of writing it is very buggy and doesn't work.
Appendix: Prior content (Old outdated content)
Mar 2021 update: SvelteKit and Tailwind JIT were released this month and completely changed the game. Both are still in beta but strongly recommend checking out these templates and tools:
- https://github.com/navneetsharmaui/sveltekit-starter
- https://github.com/Dan1ve/Sveltekit-Typescript-TailwindCSS-Jit
- more integrations here: https://github.com/sveltejs/integrations#sveltekit-templates
-
npx svelte-add tailwindcss --jithttps://github.com/svelte-add/tailwindcss
Jan 2021 update: minor update of config for Tailwind 2.0. I've also added alternative approaches at the bottom, scroll down
Sep 2020 update: Chris has shown a much easier way to do this than I originally outlined, so I have replaced my original notes with notes from his sample repo. There's a build speed tradeoff, I discuss alternatives at bottom.
On the latest Toolsday, Chris Dhanaraj said he had trouble finding documentation for adding Tailwind to Svelte.
Today I also needed to add Tailwind to a Svelte project, so I am writing this as a reference for myself. Setting up PostCSS with Svelte is something I have documented on the new Svelte Society site, but of course it could be better and more specifically tailored to Tailwind (which after all is "just" a PostCSS plugin).
So I am writing this for him and for me.
A quick aside on WHY Use Tailwind with Svelte, since Svelte offers scoped CSS by default: Tailwind offers a nicely constrained "design system" so you don't overuse Magic Numbers and it's easy to add responsive styling with Tailwind breakpoints. Because Tailwind has the developer experience of "inline styles", I also find it easier to delete and move HTML around without having to go back for the styling. I also like not having to name classes. I discuss more on Why Tailwind in general in a separate post.
I will assume you have a standard existing Svelte or Sapper project with no PostCSS/Tailwind set up. I'll also add in autoprefixer and postcss-nesting since I like to work with those, but of course feel free to remove as needed.
Note: this section used to involve messing with
package.jsonscripts to runpostcss-cli, but Chris realized that you didn't need to do any of this since Svelte already has a way to inject CSS andsvelte-preprocessalready runs on every Svelte file.
Please see:
To see this working in action.
Alternative Approaches
This method outlined above is simple to get running, but does end up running thousands of lines of Tailwind's CSS through the Svelte compiler. This may cause performance issues (primarily, every time you change the entry point file). Alternative approaches may be more appropriate depending on your preferences:
- David Parker's video on Adding TailwindCSS to a Sapper / Svelte App
- Jacob Babich: "I'm moving to https://github.com/babichjacob/sapper-postcss-template/tree/main running the global css builder in parallel with a reimplementation of postcss-cli (just so I can have source maps controlled by a variable in rollup.config.js) but without getting that extreme you can just use npm-run-all with postcss-cli"
- dominikg: "The easiest way to setup tailwind with svelte:
npx svite create -t postcss-tailwind my-svelte-tailwind-project" - https://github.com/sarioglu/sapper-tailwindcss-template
- https://github.com/sarioglu/svelte-tailwindcss-template
- https://github.com/breadthe/svelte-tailwind2-starter
- https://codechips.me/sapper-with-postcss-and-tailwind/
Top comments (30)
I followed these steps, but had major perf issues. Anyone else find the sveltePreprocess step to be very slow? Every change I made was taking around 18 seconds to reload the page. I sped it up by disabling source maps and purging, but it still took 11 seconds. I ended up rolling my own setup and now it takes 109ms. Still don't really understand what was going on, but I'm happy with my setup so I saved it here: github.com/dctalbot/svelte-typescr...
Cheers!
just curious, why the purge css ignore? don't you want purge CSS to remove unused styles from the base, or is purge css too aggressive?
Thanks for the article!
no reason - i'll be honest i blindly copied it from github.com/chrisdhanaraj/svelte-ta... but you're right, it's not needed, i took it out
For context, I pulled that one from Tailwind's docs on Controlling File Size.
tailwindcss.com/docs/controlling-f...
dammit, lol nicely done. will add back with a note
While I appreciate this tutorials like they I find they go out of date in about a week. For example, using SvelteKit
next.231I found most of everything in this tutorial is no longer relevant. As such, I'd advise anyone setting up these tools to rely on offical docs and model from GitHub repos people are using to showcase their own work.Don't forget to actually test if Autoprefixer is working when you're finished.
In my case I had to change the build script from:
"build": "rollup -c"
to
"build": "NODE_ENV=production rollup -c"
to actually purge unused css
Ref: tailwindcss.com/docs/optimizing-fo...
Hello and thank you for writing this tutorial!
I've followed along with it but ran into an issue - the resulting
bundle.cssdoes not have prefixed classes. It seems like PostCSS does not prefix them, unlike if you use a normal<style>tag where Svelte will prefix the classes.I've added the
prefix: 'my-prefix'setting totailwind.config.js. It does work, but you have to write out the prefixed version in your code, soflexbecomesmy-prefix-flex, and so on. This gets old fast. 😅In an ideal world, I would write the normal Tailwind classes and the resulting bundle would be automatically prefixed.
PS.
I've also tried the
postcss-prefixerpackage, but then Svelte didn't include any of my classes in the bundle.css output. Perhaps i misconfigured it...Thank you so much again and hope that you or someone else has solved this issue or have some suggestions for how to proceed!
no idea about that, sorry. I don't use any prefixes. perhaps check one of the alternative methods listed at the bottom to see if works
Here is another similar tutorial for Svelte and Sapper that I have written a while ago: dev.to/sarioglu/using-svelte-with-...
It also includes template repositories for both.
added, cheers. i think mine is a bit simpler tho
Thank you so much for this amazing guide!
I have gone with 2A option but my page not auto-reloading on tailwind css class changes.
Did I miss something?
no you did not... i had it broken as well but @abdelwahab313 helped me fix it. what version of sveltekit are you using? make sure it is the latest
Everything has the latest version.
By the way, I found a quick solution for all just in 3 steps:
In the app directory,
(1) npm init svelte@next
(2) npx svelte-add@latest tailwindcss
(3) npm install
Everything is working great!
I would be very happy if you add this to the guide.
will do
Hi Shawn, I'm trying out this config with the routify-ts template. I got the classes working, but seems like
@applydirectives doesn't work on my project. Did you get this working with this config?it worked for me but I don't use Routify so I don't know how to help you
Managed to get it working using your config. There was a duplicate
preprocesskey on my rollup config. Thank you for the write up!@swyx Have you seen WindiCSS? It seems to fix the overhead on the preprocess side. windicss.netlify.app/guide/svelte....
Thank you! I'm going to try that right away
Although the project is very promising...
I have discovered some issues there with an {#each...} inside of an {#if...}
I have to dig into that but I don't get compiled class for this one and styles won't get applied.
In case anyone needs to setup Sapper + Tailwind one day 🙂
sapper-with-postcss-and-tailwind.v...
added, cheers