Svelte + Tailwind + Parcel = Awesome!
Tags: svelte, tailwindcss, parcel
Published: 2020-01-05 19:51:02

I must admit that Rollup.js, that default Svelte projects use, never grew on me for some reason so I decided to give [Parcel](https://parceljs.org/) a try. Let's see how to setup a new Svelte project using it. While on it we will also include some other useful tools and plugins on the way.

## Basic Basics

Let's start by creating a simple new project with Yarn.

```bash
$ mkdir -p app/src && cd app
$ yarn init -y
```

Add Parcel, Svelte and required plugins.

```bash
$ yarn add -D parcel-bundler svelte parcel-plugin-svelte

```

We are almost ready to go, but before that we need to add some stuff to `package.json` and some actual source files. Start by adding the following properties to your `package.json`.

```json
  "scripts": {
    "start": "parcel src/index.html --port 3000",
    "build": "rm -rf dist && parcel build src/index.html --no-source-maps"
  },
  "browserslist": [
    "last 1 chrome versions"
  ]

```

Our server will listen on port 3000 and when building production bundle we will skip source map generation.

Now, let's add some actual source files.

### src/index.html


```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My App</title>
  </head>

  <body>
    <script defer src="./main.js"></script>
    <noscript>You need to enable JavaScript to run this app.</noscript>
  </body>
</html>
```

### src/main.js

```js
import App from './App.svelte';

const app = new App({
  target: document.body
});

export default app;

```

### src/App.svelte

```html
<script>
  let name = "friend";
</script>

<h1>Hello {name}!</h1>

```

We are now ready to start our app.

```bash
$ yarn start
yarn run v1.21.1
$ parcel src/index.html --port 3000
Server running at http://localhost:3000
✨  Built in 923ms.
```

Wow! How awesome is that? And really fast too! Try changing some text in `App.svelte` and see how fast everything recompiles.

We can also build a production bundle.

```bash

$ yarn build
yarn run v1.21.1
$ rm -rf dist && parcel build src/index.html --no-source-maps
✨  Built in 1.22s.

dist/main.a3795f1f.js    22.92 KB    895ms
dist/index.html             347 B    279ms
Done in 1.76s.

```
Just look at how fast the build is! Amazing!

## Intermediate Basics

Let's install [Tailwind](https://tailwindcss.com/) - a functional CSS framework and make it play nice with our current setup.

```bash
$ yarn add -D tailwindcss autoprefixer @fullhuman/postcss-purgecss
```

We have to add some additional files for Tailwind to work.

Create Tailwind config file.

```bash
$ yarn tailwind init

```
Create base styles file - `src/global.pcss` with the following content.

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

```
Create a PostCSS config file - `postcss.config.js`.

```js
const plugins =
  process.env.NODE_ENV === 'production'
    ? ['tailwindcss', 'autoprefixer', '@fullhuman/postcss-purgecss']
    : ['tailwindcss'];

module.exports = { plugins };

```
The config purges unused CSS and adds browser prefixes only in production builds. Why? Because during development you want to have a full Tailwind CSS file so you can tinker with various classes in your browser's dev console.

Finally, let's add a PurgeCSS config so that PostCSS will know what unused CSS to purge during the production builds. Create a `purgecss.config.js` file with the following content.

```js
module.exports = {
  content: [
    './src/index.html',
    './src/**/*.svelte'
  ],
  whitelistPatterns: [/svelte-/],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
};

```
Here we are telling it to ignore `svelte-` classes when purging. These are classes that Svelte generates whey you write scoped styles in you Svelte components.

We could have wired up our configuration only in `postcss.config.js`, but I think it's nicer to have them in two different files for clear separation of concerns.

Finally, include the following line in the head tag in `index.html`.

```html
<link rel="stylesheet" href="./global.pcss" />

```

Add the following classes to the H1 tag in `App.svelte` to see that everything works as expected.

```html
<h1 class="text-teal-700 text-5xl">Hello {name}!</h1>

```

Boom! If you now start the app you should see a styled heading. NOTE: If for some reason it doesn't work, delete Parcel's `.cache` folder and restart the app.

So there you go. New fresh and slick Svelte setup. You can stop here and go build your next great thing or you can continue reading and maybe learn something new.

## Bonus Basics

[Inter](https://rsms.me/inter/) font is pretty sweet if you are building UIs. Here is how to include it in our new setup with [tailwindcss-font-inter](https://github.com/semencov/tailwindcss-font-inter) plugin.

```bash
$ yarn add -D tailwindcss-font-inter

```

Replace `tailwind.config.js` with following content.

```js
module.exports = {
  theme: {
    interFontFeatures: {
      default: ['calt', 'liga', 'kern'],
      numeric: ['tnum', 'salt', 'ss02']
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '6rem',
      '8xl': '8rem',
      '9xl': '9rem',
      '10xl': '10rem'
    },
    extend: {}
  },
  variants: {},
  plugins: [
    require('tailwindcss-font-inter')({
      importFontFace: true,
      disableUnusedFeatures: true
    })
  ]
};

```
Now add the following class to the body tag in `index.html`.

```html
<body class="font-inter">

```
Your app should now use the Inter font. There are many configuration options for how the font is rendered. Let that be a home assignment.

## Extra Bonus Basics

Linting and code formatting is important. I personally use Vim with coc.vim's [Svelte](https://github.com/coc-extensions/coc-svelte) extension when writing code. It's actually working mighty fine I must say! However, in order for that to work you have to install some additional plugins and add more configs.

```bash
$  yarn add -D prettier prettier-plugin-svelte eslint eslint-plugin-svelte3

```

Add `.prettierrc.json`

```json
{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "plugins": ["prettier-plugin-svelte"],
  "svelteSortOrder": "styles-scripts-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": true
}
```
And `.eslintrc.json`

```json
{
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "plugins": ["svelte3"],
  "extends": ["eslint:recommended"],
  "overrides": [
    {
      "files": ["**/*.svelte"],
      "processor": "svelte3/svelte3"
    }
  ],
  "rules": {
    "prettier/prettier": "error",
    "svelte3/lint-template": 2
  }
}
```

Voila! Linting and code formatting should now work.

## Conclusion

As you see it's not hard to use Svelte with Parcel. The setup feels very fresh and snappy. Everything with Parcel works almost out-of-the-box. I really like it. 

If you want to learn and understand how things are wired together you can repeat all the steps above to understand what's happening, but if you are lazy (like me) and just want to bang out some code, you can use my [boilerplate](https://github.com/codechips/svelte-tailwind-parcel-starter) and be done with it.

```bash
$ npx degit codechips/svelte-tailwind-parcel-starter facebook-killer

```
Thanks for reading and happy coding!