Svelte & Tailwind Css, minimal install

Paul.42 — Sun, 13 Sep 2020 21:04:47 +0000

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:

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:

preprocess: sveltePreprocess({
                postcss: {
                    plugins: [
                        tailwind('./tailwind.config.js')
                    ]
                },
            }),

7.) Create a new component under src: TailwindCss.svelte and put this:

<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:

<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:

-<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

+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

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:

-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:

-"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 by Shawn swyx Wang
Using Svelte with Tailwindcss - A better approach by 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:

/* 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.

DEV Community: Paul.42

Svelte & Tailwind Css, minimal install

Purpose

Process

Acknowledgements:

Footnotes