DEV Community

Cover image for Sapper + Svelte + tailwindcss boilerplate
Mauro Garcia
Mauro Garcia

Posted on • Updated on • Originally published at maurogarcia.dev

Sapper + Svelte + tailwindcss boilerplate

Last week I wrote an article about some things I loved about Svelte after trying it for the first time:

Although I think Svelte could be the next big thing in web development, it's a UI framework. That means you won't find features like server-side rendering, advance routing, offline support, prefetching content and more.

Sapper to the rescue 🥳

Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

Unlike single-page apps, Sapper doesn't compromise on SEO, progressive enhancement or the initial load experience — but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel.
Btw, it's powered by Svelte.

If you want to read more about Sapper, follow this link

After reading about Sapper, I decided to clone the sapper-template repo to start playing with it.

Tailwindcss integration

If you read my last articles, you'll know I'm obsessed with tailwindcss 🤣. I've been using it for two years and I think there is no way back (at least at the moment). So, the first thing I thought after cloning Sapper was: I cannot use this without tailwind

TL;DR

I made a ready-to-use sapper-tailwindcss boilerplate repo on github.

GitHub logo mauro-codes / sapper-tailwindcss-boilerplate

Sapper boilerplate including tailwindcss integration with purgeCSS

sapper-template working with tailwindcss

The default Sapper template, available for Rollup and webpack.

Getting started

Using degit

degit is a scaffolding tool that lets you create a directory from a branch in a repository. Use either the rollup or webpack branch in sapper-template:

# for Rollup
npx degit "sveltejs/sapper-template#rollup" my-app
# for webpack
npx degit "sveltejs/sapper-template#webpack" my-app
Enter fullscreen mode Exit fullscreen mode

Using GitHub templates

Alternatively, you can use GitHub's template feature with the sapper-template-rollup or sapper-template-webpack repositories.

Running the project

However you get the code, you can install dependencies and run the project in development mode with:

cd my-app
npm install # or yarn
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open up localhost:3000 and start clicking around.

Consult sapper.svelte.dev for help getting started.

Structure

Sapper expects to find two directories in the root of your project — src and static.

src

The src directory contains the entry points for your app…

In case you want to do it by yourself instead of cloning the repo, here are the required steps to integrate tailwindcss in you sapper-template repo.

1 - Setup repo, tailwind dependencies and scripts

The first thing you should do is clone the sapper-boilerplate repo and run the application:

npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open your browser and visit http://localhost:3000 to see if the application is working as expected:
Sapper-boilerplate running

Install the required dependencies for tailwind:

npm i @fullhuman/postcss-purgecss postcss-cli tailwindcss -D
Enter fullscreen mode Exit fullscreen mode

Then, add the following scripts in your package.json:

"watch:tailwind": "postcss static/tailwind.css -o static/index.css -w",
"build:tailwind": "NODE_ENV=production postcss static/tailwind.css -o static/index.css"
Enter fullscreen mode Exit fullscreen mode

This additional scripts will be required in orden to make sure we're builing our tailwindcss utilities before building our project for production. With this scripts, all the unused tailwind utilities will be purged from our index.css to drastically reduce our bundle size.

Finally, change your build script like this:

"build": "npm run build:tailwind && sapper build"
Enter fullscreen mode Exit fullscreen mode

2 - Setup PostCSS and Tailwind

Add the following files in your root directory

tailwind.js

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}
Enter fullscreen mode Exit fullscreen mode

postcss.config.js

const tailwindcss = require("tailwindcss");

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] : [])
    ]
};
Enter fullscreen mode Exit fullscreen mode

Finally, add a "tailwind.css" file within your /static directory:

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

3 - Load tailwindcss utilities

In order to generate the tailwindcss utilities, run this command:

npm run build:tailwind
Enter fullscreen mode Exit fullscreen mode

Finally, add the following link tag in your src/template.html file:

<link rel='stylesheet' href='index.css'>
Enter fullscreen mode Exit fullscreen mode

That's it. Like I said above, I made a ready-to-use gitgub repo with all this work done and some additional svelte components like Nav and NavLink.

Final thoughts

It was SUPER FUN to play with Sapper and, in a couple of minutes, I managed to create two reusable components to handle my site navigation.

After building my app, the client-side bundle size was 32KB 🚀. This is awesome! (and to be honest, I'm not sure if I can do something else to further reduce this bundle size).

I'm really looking forward to see what Sapper has to offer in the next months and I'm definitely gonna keep playing with it and sharing my experiments.


What do you think about Sapper? Let me know in the comments below 👇

Top comments (15)

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