Getting started with Sapper, Svelte, Postcss & Tailwind
Tags: svelte, postcss, tailwindcss
Published: 2020-06-11 20:32:15

Coming from the Vue ecosystem, where [vue cli](https://cli.vuejs.org/) makes it a breeze to get up and running, it was a bit of a struggle coming to Sapper/Svelte and trying to put all the pieces together.

# Goal
A Sapper project with Postcss, Tailwind and the ability to import css files from node_modules packages and a single `npm run dev` to get going.

Many thanks to this article: [A simpler way to add TailwindCSS to your Svelte project ](https://dev.to/inalbant/a-simpler-way-to-add-tailwindcss-to-your-svelte-project-11ja) for an up to date way to add tailwind to a svelte project.


## Step 1: Clone the starter template

```
npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
npm i
```


## Step 2: Install requirements

```
npm i --D svelte-preprocess rollup-plugin-svelte postcss-load-config postcss-import postcss-nested postcss-cli tailwindcss npm-run-all
```


## Step 3: Configure tailwind

```
npx tailwind init
```

Edit the resulting `tailwind.config.js` and add the required rules to the purgecss block to ensure svelte's styles are not removed:

```
module.exports = {
  purge: ["./src/**/*.svelte"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};
```

Edit `/static/global.css` with the following:

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```


## Step 4: Configure PostCSS and svelte-preprocess

In the root of your project, create and edit `postcss.config.js` as follows (this will be used by the postcss-cli to compile the above global.css to index.css):

```
module.exports = {
  plugins: [
    require("postcss-import"),
    require("postcss-nested"),
    require("tailwindcss")
  ],
}
```

Edit `rollup.config.js` by adding `import sveltePreprocess from 'svelte-preprocess';` at the top of the file and instantiate like so:

```
const preprocess = sveltePreprocess({
  postcss: {
    plugins: [
      require('postcss-import')(),
      require('postcss-nested')()
    ]
  }
});

// Add the above

export default { ...
```

Add `preprocess` to the `svelte` object in both the client and server:

```
client: {
  ...
  plugins: [
    ...
    svelte({
      preprocess,
      dev,
      ...
},
server: {
  ...
  plugins: [
    ...
    svelte({
      preprocess,
      generate: 'ssr',
      ...
}
```


## Step 5: Adjust run scripts

In `/my-app/package.json`, adjust the `scripts` block as follows:

```
"scripts": {
  "dev": "run-p start:dev watch:css",
  "build": "npm run build:css && sapper build --legacy",
  "watch:css": "postcss static/global.css -o static/index.css -w",
  "build:css": "NODE_ENV=production postcss static/global.css -o static/index.css",
  "export": "sapper export --legacy",
  "start": "node __sapper__/build",
  "start:dev": "sapper dev",
  "cy:run": "cypress run",
  "cy:open": "cypress open",
  "test": "run-p --race dev cy:run"
}
```

Basically, the adjusted `dev` script uses `npm-run-all` to run the tasks to compile tailwind and run sapper from the new `start:dev` script. If you need to run sapper on another port, you can adjust it so: `"start:dev": "sapper dev --port 8080"`.


## Step 6: Adjust the css import in the template

Edit `/src/template.html` ahd replace `<link rel='stylesheet' href='global.css'>` with `<link rel='stylesheet' href='index.css'>`


## Step 7: Import css in svelte

So this is where things get a bit complicated.

Let's take [Tippy.js](https://atomiks.github.io/tippyjs/) as an example.

```
npm i -D tippy.js
```

You can add a tooltip to the default `index.svelte` like so:

```
<h1 data-tippy-content="Hello World">Great success!</h1>
...
```

To instantiate tippy, you have to do so inside an `onMount` to prevent a `document is not defined` error caused on the server-side:

```
<script>
  import { onMount } from "svelte";
  onMount(async () => {
    const { default: tippy } = await import("tippy.js");
    tippy('[data-tippy-content]');
  });
</script>
```

Now, to import the relevant css, you would think to simply add `@import 'tippy.js/dist/tippy.css';` to the top of your style block.

However, this will result in endless `Unused CSS selector` errors. The way around this is to set the style block to global like so:

```
<style global>
  @import 'tippy.js/dist/tippy.css';
  ...
</style>
```

Of course, this now has the caveat that all styles within the block are now global, and you can have only one style block per component.

Seeing as this css needs to be applied globally to avoid the compiler errors and being stripped, I think it makes the most sense to simply place the import in `global.css` and allow the external `postcss-cli` to take care of things:

```
/* /static/global.css */
@import 'tippy.js/dist/tippy.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
```

This way, the svelte compiler doesn't need to worry about these css imports on each save, and from our setup, we have the functionality of postcss within our components (though we lose the hot reload functionality).

## Step 8: Run & build

A simple `npm run dev` and you are ready to work. To build for production, `npm run build`.

I'm completely new to svelte, so can't help but feel like this is being hacky – if anyone knows of a better way to handle things, please let me know.

---

Versions used in this writeup:
```
"postcss-cli": "^7.1.1",
"postcss-import": "^12.0.1",
"postcss-load-config": "^2.1.0",
"rollup-plugin-svelte": "^5.2.2",
"sapper": "^0.27.0",
"svelte": "^3.0.0",
"svelte-preprocess": "^3.9.7",
"tailwindcss": "^1.4.6",
```

# Going Further
I'd recommend [Snowpack with Svelte, Typescript and Tailwind CSS is a very pleasant surprise](https://codechips.me/snowpack-svelte-typescript-tailwindcss/) and actually many other articles on [Ilia Mikhailov's blog](https://codechips.me/) where he's been writing about svelte a fair bit lately.