Simplest way to set up Svelte with Tailwind CSS
Tags: svelte, css, javascript, tailwindcss
Published: 2021-01-19 02:43:51

I am not here to convince you to use utility-first CSS frameworks like Tailwind, there are [plenty of good resources](https://www.swyx.io/why-tailwind/) around this topic already. Besides, you are here for a reason.

I am writing this post to provide you the simplest way to set your Svelte project up and running with Tailwind. Here we go!

#### Initializing your project

Start by creating a new Svelte project:

```sh
npx degit sveltejs/template svelte-tailwind && cd svelte-tailwind
```

Install Svelte's dependecies:

```sh
npm install
```

#### Setting up Tailwind CSS

Install Tailwind and its dependencies:

```sh
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

Generate your `tailwind.config.js` and `postcss.config.js` configuration files:

```sh
npx tailwindcss init -p
```

#### Configure Tailwind to remove unused styles in production

In your `tailwind.config.js` file, configure the purge option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds:

```js
// tailwind.config.js
module.exports = {
  purge: {
    enabled: !process.env.ROLLUP_WATCH,
    content: ['./public/index.html', './src/**/*.svelte'],
    options: {
      defaultExtractor: content => [
        ...(content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []),
        ...(content.match(/(?<=class:)[^=>\/\s]*/g) || []),
      ],
    },
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

There is a lot going on here, let me try to explain. We want to enable PurgeCSS only when `rollup` is running in production mode. We are going to parse our `public/index.html` and all the `.svelte` files under `src` and extract all the CSS class names used in our files and components. For this to work with Svelte's [class directive](https://svelte.dev/tutorial/classes), we have to use our custom `defaultExtractor`, matching the syntax used to apply classes conditionally.

#### Include Tailwind in your global CSS

Use the `@tailwind` directive to include Tailwind's `base`, `components`, and `utilities` styles in your `App.svelte` component (we will use [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess#global-style) to parse `global` styles):

```vue
<!-- App.svelte -->
...
<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>
```

Delete the `public/global.css` file and remove `<link rel='stylesheet' href='/global.css'>` from `public/index.html` not to interfere with the Tailwind styles.

#### Configure PostCSS with Svelte preprocessor

Install the Svelte preprocessor dependencies:

```sh
npm install -D svelte-preprocess postcss-load-config
```

Modify your `rollup.config.js` to include the `postcss` plugin in your Svelte preprocessors:

```js
// rollup.config.js
...
import sveltePreprocess from "svelte-preprocess";
...
export default {
  ...
  plugins: [
    svelte({
      ...
      preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: true,
      }),
    }),
...
```

#### Time to try out our work!

Copy any of the preview layouts from [Tailwind UI](https://tailwindui.com/preview) to your source, run `npm run dev` and visit `http://localhost:5000`:

![Preview Dashboard](https://dev-to-uploads.s3.amazonaws.com/i/ik0pvc96d29amsyxhvzo.png)

#### Not what you are looking for?

If you are looking for ways to configure Tailwind CSS with other frameworks, check out the [official installation guide](https://tailwindcss.com/docs/installation).