Svelte & Tailwind Css, minimal install
Tags: svelte, tailwindcss, tech
Published: 2020-09-13 21:04:47

#Purpose
Trying to get a base line install of tailwind css and svelte working together with a minimal amount of steps. If I've made any mistakes or false assumptions, please reach out! if I've missed any steps let me know and I'll fix it up, my goal here is to help the community use a tool that I really enjoy (TailwindCss) but I'm still learning myself, so please bear with me!

##Process
1.) clone project from base & install dependencies: 
(you can replace svelte-tailwind-app with your own project name)
```
npx degit sveltejs/template svelte-tailwind-app
cd svelte-tailwind-app
npm install
```
2.) Install tailwind
`npm install tailwindcss --save-dev`
3.) Create Tailwind Config File
`npx tailwindcss init`
this creates tailwind.config.js in project root with some defaults.
4.) install svelte-preprocess: `npm install --save-dev svelte-preprocess`
5.) Add imports for tailwind and svelte-preprocess to `rollup.config.js` file:
```diff
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import tailwind from 'tailwindcss';
```
6.) Add plugins to bottom of svelte section, adding it just under the css object:
```js
preprocess: sveltePreprocess({
				postcss: {
					plugins: [
						tailwind('./tailwind.config.js')
					]
				},
			}),
```
7.) Create a new component under `src`: `TailwindCss.svelte` and put this:
```html
<style global lang="postcss">
    @tailwind base;
    @tailwind components;
    @tailwind utilities;  
</style>
``` 
(*footnote* wondering why no 'ignore purgecss directives'? see below)
and import and add this to your App.svelte:
```diff
<script>
+import TailwindCss from './TailwindCss.svelte'
</script>
+<TailwindCss/>
//...rest of App.svelte
```
8.) If you want to test it, run `npm run dev` and then edit 'App.svelte' to add a new class to the `<h1>` tag:
```diff
-<h1>Hello {name}!</h1>
+<h1 class="bg-green-500">Hello {name}!</h1>
``` you should see the background color change to green in your browser.
9.) The problem being that Tailwind carries around a large amount of classes to give you such a great experience, we don't want to ship that on production sites. if you look in the inspect area and network tab you can see that `bundle.css` is up to 1.7 MB, that's a bit much for a background, so lets add some purgecss
10.) since about tailwind v1.4.0 you don't need to set it up manually, you can follow [directions here to edit your tailwind.config.js](https://tailwindcss.com/docs/controlling-file-size#removing-unused-css) 
```diff
+const production = !process.env.ROLLUP_WATCH;
-purge: [],
+purge: {
+content: [
+"./src/**/*.svelte",
+"./public/**/*.html"
+],
+css: ["./public/**/*.css"],
+enabled: production // disable purge in dev
+}
```
you'll notice that if you run `npm run dev` you don't see any change in `bundle.css` but running `npm run build` then `npm run start` you can see the bundle.css size drop (for me it's down to 3.4kB, previously I had a typo here)

I HIGHLY recommend the [vs-code plugin for tailwind css intellisense it helps me a ton](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

Optional: if you don't want sirv to 'clear the console' during `npm run dev` you can edit the rollup.config.js and add --no-clear to the params passed in like this:
```diff
-server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev', '--no-clear'], {
```
if you don't want sirv to 'clear the console' during `npm run start` edit your package.json:
```diff
-"start": "sirv public"
+"start": "sirv public --no-clear"
```
if you wanted to change the port for sirv, this is where you'd put the `--host 6000` or other port number

##Acknowledgements: 
I couldn't have gotten nearly this good without the great articles by others: 
[How to Set Up Svelte with Tailwind CSS](https://dev.to/swyx/how-to-set-up-svelte-with-tailwind-css-4fg5) by [Shawn swyx Wang](https://dev.to/swyx)
[Using Svelte with Tailwindcss - A better approach](https://dev.to/sarioglu/using-svelte-with-tailwindcss-a-better-approach-47ph) by [sarioglu](https://dev.to/sarioglu)

###Footnotes
*. I didn't put in the purgecss ignore directives because we know exactly where our index.html is - it's in public, not hidden in node_modules  - towards the bottom of the docs on [Setting up purgecss manually](https://tailwindcss.com/docs/controlling-file-size#setting-up-purge-css-manually):
```
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;
```
>This will ensure you don't accidentally purge important base styles when working with frameworks like Next.js, Nuxt, vue-cli, create-react-app, and others that hide their base HTML template somewhere in your node_modules directory.

*. I didn't put the `@tailwind base;` and other at rules into the `<style>` section of the App.svelte because it appeared to really slow down my builds - I'm far from an expert in rollup, so it could be just me.