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

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
 
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
 
netaisllc profile image
CSSian

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