DEV Community

How to Set Up SvelteKit with Tailwind CSS

swyx on September 08, 2020

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 t...
Collapse
 
dctalbot profile image
David Talbot

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!

Collapse
 
paul42 profile image
Paul.42

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!

Collapse
 
swyx profile image
swyx

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

Collapse
 
chrisdhanaraj profile image
Chris Dhanaraj

For context, I pulled that one from Tailwind's docs on Controlling File Size.

tailwindcss.com/docs/controlling-f...

Thread Thread
 
swyx profile image
swyx

dammit, lol nicely done. will add back with a note

Collapse
 
vhs profile image
vhs

While I appreciate this tutorials like they I find they go out of date in about a week. For example, using SvelteKit next.231 I 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.

Collapse
 
mgrisole profile image
mgrisole

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

Collapse
 
khromov profile image
Stanislav Khromov

Hello and thank you for writing this tutorial!

I've followed along with it but ran into an issue - the resulting bundle.css does 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 to tailwind.config.js. It does work, but you have to write out the prefixed version in your code, so flex becomes my-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-prefixer package, 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!

Collapse
 
swyx profile image
swyx

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

Collapse
 
sarioglu profile image
sarioglu

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.

Collapse
 
swyx profile image
swyx

added, cheers. i think mine is a bit simpler tho

Collapse
 
ercode profile image
Erkut TEKOĞLU

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?

Collapse
 
swyx profile image
swyx

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

Collapse
 
ercode profile image
Erkut TEKOĞLU

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.

Thread Thread
 
swyx profile image
swyx

will do

Collapse
 
rraihansaputra profile image
raihan saputra

Hi Shawn, I'm trying out this config with the routify-ts template. I got the classes working, but seems like @apply directives doesn't work on my project. Did you get this working with this config?

Collapse
 
swyx profile image
swyx

it worked for me but I don't use Routify so I don't know how to help you

Collapse
 
rraihansaputra profile image
raihan saputra

Managed to get it working using your config. There was a duplicate preprocess key on my rollup config. Thank you for the write up!

Collapse
 
dwstevens profile image
David Stevens

@swyx Have you seen WindiCSS? It seems to fix the overhead on the preprocess side. windicss.netlify.app/guide/svelte....

Collapse
 
malikbenkirane profile image
Malik Benkirane

Thank you! I'm going to try that right away

Collapse
 
malikbenkirane profile image
Malik Benkirane • Edited

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.

Collapse
 
codechips profile image
Ilia Mikhailov

In case anyone needs to setup Sapper + Tailwind one day πŸ™‚

sapper-with-postcss-and-tailwind.v...

Collapse
 
swyx profile image
swyx

added, cheers

Collapse
 
kevinast profile image
Kevin Bridges

Thanks for this reference @swyx . It proved to be invaluable for a new tailwind svelter!

BTW: You may want to mention that most likely you will want to remove the public/global.css reference (of the svelte template) so it does not interfere with tailwind css. This may be obvious to some, but I had several issues related to this.

Collapse
 
giorgosk profile image
Giorgos Kontopoulos πŸ‘€

Nice one @swyx perhaps you can add some tags #svelte #tailwind ?

Collapse
 
swyx profile image
swyx

oh word lol

Collapse
 
bwighthunter profile image
Blake Wight

Hmmm. Having issues with getting scss media queries working with this. Is there more I have to do to get that to work? Or should it just work?

Collapse
 
swyx profile image
swyx

oh no, i dont know, i dont use scss. it should just work.. if anything is wrong its probably your setup of svelte-preprocess

Collapse
 
lalit64 profile image
Lalit Yalamanchili • Edited

Can I suggest another method to add Tailwind to SvelteKit, I use it for all my projects.

jsco.dev/blog/how-to-set-up-tailwi...

Collapse
 
jesuscovam profile image
jesuscovam • Edited