DEV Community

Cover image for Sapper + Svelte + tailwindcss boilerplate

Sapper + Svelte + tailwindcss boilerplate

Mauro Garcia on October 25, 2019

Last week I wrote an article about some things I loved about Svelte after trying it for the first time: Article No Longer Availabl...
Read full post
Collapse
 
s0kil profile image
Daniel Sokil •

Using cssnano is a good idea:

const tailwindcss = require("tailwindcss");

const cssnano = require("cssnano")({
  preset: "default"
});

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./src/**/*.svelte", "./src/**/*.html"],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
  plugins: [
    tailwindcss("./tailwind.js"),
    ...(process.env.NODE_ENV === "production"
      ? [purgecss, cssnano]
      : [])
  ]
};
Collapse
 
mauro_codes profile image
Mauro Garcia •

👏👏👏👏👏👏👏👏👏👏👏

Collapse
 
sinitsa profile image
Andrei Sinitsa •

This is a big plus for Svelte framework, as well as appeared few days ago Svelte SSR + Cloudflare Workers integration demo.. Playing with Stencil now, another great way for building lightweight SSR apps, maybe more powerful... But these beautiful boilerplates will be my next step, thanks ;)

Collapse
 
pavelloz profile image
Paweł Kowalski •

Im getting fluid in Tailwind and I dream about doing what you are doing - marrying Svelte, Sapper and Tailwind. One day... :)

Collapse
 
mauro_codes profile image
Mauro Garcia •

hahahahaah I heard someone say that we're getting pretty close to Dev Nirvana! hahaha

Collapse
 
pavelloz profile image
Paweł Kowalski •

Heh, im pretty sure in 3 years we will be laughing at today, but compared to 200k+ bundles doing "Hello world" in react/angular+bootstrap ecosystem its still a huge progress ;-)

Collapse
 
happycollision profile image
Don Denton •

Finally, add a "tailwind.css" file within your src directory

src/static directory ;-)

Thank you so much for the post. Saved me tons of time!

Collapse
 
mauro_codes profile image
Mauro Garcia •

Oops :p fixed. Thanks!!

Collapse
 
budparr profile image
bud parr •

Thank you for this, Mauro. I'm curious to know why you decided to run Tailwind as a separate process from the Sapper build via the Rollup plugin? If you tried it, did you slow up builds? And do you know if purgecss works well here?

Collapse
 
rshemant profile image
rshemant • • Edited

Hi Man, How to add live reload on CSS changes in Dev env.

"dev": "concurrently --kill-others \"yarn watch:tailwind\" \"sapper dev\""

I am using above code but the problem is when CSS changes swapper does not.

Collapse
 
reducio profile image
Dmitry S. •

github.com/tailwindcss/setup-examp...
github.com/tailwindcss/setup-examp...

Collapse
 
kbzaso profile image
Alejandro Sáez •

¡Thank you very much for this!
You make my life so easy with this repo.

Collapse
 
mauro_codes profile image
Mauro Garcia •

Thanks to you for that feedback! I'm thinking about updating that repo with additional tailwind components so stay tuned.

Collapse
 
juancpgo profile image
Juan •

Thanks for the post, Mauro. Do you find Sapper a good use for behind login (non public-facing) business ERP-type web applications? Or is it too much extra complexity for little benefit?

Collapse
 
mauro_codes profile image
Mauro Garcia •

Hi Juan, to be totally honest... I didn't have the opportunity to use Sapper on big/complex projects yet so It's hard to know if there are problems but I think you should be able to build that kind of projects. The last months I've been doing a lot of iOS work and learning SWIFTUI so I wasn't able to keep doing experiments with Sapper 😔