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...
For further actions, you may consider blocking this person and/or reporting abuse
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
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.
Nice one @swyx perhaps you can add some tags #svelte #tailwind ?
oh word lol
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?
oh no, i dont know, i dont use scss. it should just work.. if anything is wrong its probably your setup of
svelte-preprocessCan I suggest another method to add Tailwind to SvelteKit, I use it for all my projects.
jsco.dev/blog/how-to-set-up-tailwi...
dev-to-uploads.s3.amazonaws.com/up...