Sapper + Svelte + tailwindcss boilerplate
Tags: javascript, svelte, tailwindcss, webdev
Published: 2019-10-25 12:09:32

---
title: Sapper + Svelte + tailwindcss boilerplate
published: true
description: Follow this steps to setup your Sapper project to work with tailwindcss
tags: javascript, svelte, tailwindcss, webdev
cover_image: https://i.imgur.com/UI4DYpt.png
canonical_url: https://maurogarcia.dev/maurogarcia.dev/posts/sapper-svelte-tailwindcss-boilerplate/
---

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

{% link https://dev.to/maurogarcia_19/5-things-i-love-about-svelte-39h9 %}

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](https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework)

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 https://github.com/mauro-codes/sapper-tailwindcss-boilerplate %}

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:
```bash
npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
npm install
npm run dev
```

Open your browser and visit http://localhost:3000 to see if the application is working as expected:
![Sapper-boilerplate running](https://i.imgur.com/ewhFGVR.png)

Install the required dependencies for tailwind:
```bash
npm i @fullhuman/postcss-purgecss postcss-cli tailwindcss -D
```

Then, add the following scripts in your package.json:
```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"
```
> 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:
```json
"build": "npm run build:tailwind && sapper build"
```

### 2 - Setup PostCSS and Tailwind
Add the following files in your root directory

#### tailwind.js
```javascript
module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}
```

#### postcss.config.js
```javascript
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] : [])
	]
};
```

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

#### tailwind.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### 3 - Load tailwindcss utilities

In order to generate the tailwindcss utilities, run this command:
```bash
npm run build:tailwind
```
Finally, add the following link tag in your src/template.html file:
```html
<link rel='stylesheet' href='index.css'>
```

That's it. Like I said above, I made a ready-to-use [gitgub repo](https://github.com/mauro-codes/sapper-tailwindcss-boilerplate) 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 👇