DEV Community

Svelte + Tailwind + Parcel = Awesome!

Ilia Mikhailov on January 05, 2020

I must admit that Rollup.js, that default Svelte projects use, never grew on me for some reason so I decided to give Parcel a try. Let's see how to...
Collapse
 
codechips profile image
Ilia Mikhailov •

Thanks! How often do change your config file? PostCSS imports are possible with Tailwind. You just have to structure your files in specific way. tailwindcss.com/docs/using-with-pr.... I think you should give Parcel and Tailwind a second chance :)

Collapse
 
khrome83 profile image
Zane Milakovic •

I really love this. But I need static site generation and have to use sapper.

I much prefer parcel over Webpack or rollup for simple spas and flat file sites.

This is a really good write up. Thank you for sharing.

Collapse
 
codechips profile image
Ilia Mikhailov •

Hear hear. Sapper is a different beast. Thanks for reading!

Collapse
 
jackedai profile image
jackedai •

Signed up just to say thank you, this cut my build time from 15 seconds with rollup to 130ms. Really appreciate it thankyou sir!

Collapse
 
parables profile image
Parables •

I followed your steps to create the Svelte template only. I checked the size and it was over 70.4 MB whiles the default one with Rollup is just about 16.5 MB . Why is this so ?

Collapse
 
parables profile image
Parables •

You know what, am feed up with Rollup, I am finding it hard to use ES6 export and import syntax but I just read that ". Parcel supports both CommonJS and ES6 module syntax for importing files" so am gonna give it a try and forget about Rollup

Collapse
 
felipesere profile image
Felipe Sere •

👋 interesting article. Have you looked at the testing side of Svelte?

Collapse
 
codechips profile image
Ilia Mikhailov •

Haven't actually looked into component testing yet. I usually prefer e2e testing for web apps and I use tdd for separate files such as stores, services, etc with ava.js.

Collapse
 
netaisllc profile image
CSSian •

My terminal reports: Built in 37ms.
I give you the credit!
Thanks for doing the working putting this together.

Collapse
 
triptych profile image
Andrew Wooldridge •

fyi on windows you have to use a different method to delete the dist dir:
"build2": "rmdir /s /q dist && parcel build src/index.html --no-source-maps"

Collapse
 
codechips profile image
Ilia Mikhailov •

Yep. Thanks! Maybe the best is to use some kind of cross-platform lib like del-cli.