Using TailwindCSS with Sapper, Part 3

If you followed my instructions in step 1 and have your site hosted live on Netlify in part 2, it's time to do some design and styling. And for that I wanted to use TailwindCSS.

You can, of course, use any CSS Framework you want. But after years of using vanilla CSS (before there were CSS Frameworks) and stuff like Bootstrap, I find I much prefer the power, flexibility, and small footprint of a utility-first CSS framework like TailwindCSS.

Baseline assumptions:

1. You know CSS.
2. You know what a utility-first CSS framework is and why you'd want to use it.

So let's get started...

Step 1 - Install TailwindCSS, PostCSS, PurgeCSS, and CSSNano

In addition to TailwindCSS, we'll use:

• PostCSS to manage and process TailwindCSS.
• PurgeCSS to remove unused selectors from your css, resulting in smaller css files.
• CSSnano to ensure the final CSS file is compressed and as small as possible.

In the terminal, making sure you're in the website directory, type (or copy/paste) the following:

1. Install TailwindCSS and PostCSS: npm install tailwindcss postcss-cli --save-dev
2. Install PurgeCSS: npm install @fullhuman/postcss-purgecss
3. Install CSSnano: npm install cssnano --save-dev

Step 2 - Create the TailwindCSS Config File

./node_modules/.bin/tailwind init tailwind.js

Step 3 - Create the PostCSS Config File

touch postcss.config.js

Then open the "postcss.config.js" file and copy/paste the following code into it:

//postcss.config.js
const tailwindcss = require("tailwindcss");
const cssnano = require('cssnano');

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./src/**/*.svelte", "./src/**/*.html", "./src/**/*.md"],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
  plugins: [
    tailwindcss("./tailwind.js"),
        require('cssnano')({
            preset: 'default',
        }),

    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),

  ]
};

Step 4 - Create the "tailwind.css" file in the "static" directory

echo -e "@tailwind base;\n@tailwind components;\n@tailwind utilities;" >> static/tailwind.css

Step 5 - Update the "package.json" file

We have to add a couple scripts for "watching" TailwindCSS during development and for "building" it for deployment.

Open the "package.json" file and add the followign to the "scripts" section...making sure to replace the existing "build" and "export" scripts:

 "watch:tailwind": "postcss static/tailwind.css -o static/main.css -w",
 "build:tailwind": "NODE_ENV=production postcss static/tailwind.css -o static/main.css",
 "build": "npm run build:tailwind && sapper build --legacy",
 "export": "npm run build:tailwind && sapper export --legacy",

Step 6 - Update "template.html" with new TailwindCSS file

Open "src/template.html" and find the "global.css" file reference and change it to "main.css" so your site will use the TailwindCSS managed file instead of the static CSS file that ships with Sapper.

Go ahead and delete the "static/global.css" file because you won't be needing it.

Step 7 - Replace the contents of the "src/index.svelte" file

Open the "src/index.svelte" file and replace the entire contents with the following in order to use TailwindCSS utility classes:

<svelte:head>
    <title>Sapper project template</title>
</svelte:head>

<h1 class="text-center mb-4 font-bold text-4xl">Great success!</h1>

<figure>
    <img class="mx-auto w-1/2" alt='Borat' src='great-success.png'>
    <figcaption class="text-center mt-4">HIGH FIVE!</figcaption>
</figure>

<p class="text-center font-bold">
  Try editing this file (src/routes/index.svelte) to test live reloading.
</p>

Step 8 - Fire up the dev servers

NOTE: You MUST use two (2) different terminal windows for the following.
If you're using VS Code as your editor this is easy:

1. Use "CONTROL + `" to open a terminal.
2. Then "CMD + " to split the terminal into 2 windows.

In the first terminal, watch TailwindCSS with: npm run watch:tailwind

In the second terminal, fire up the Sapper dev server like before with: npm run dev

If everything was done correctly above, you should be able to hit your local dev site at http://localhost:3000 as usual. Changes to make to your .svelte files, including updates to the CSS will reload in your browser when you save your files.

There's still a LOT to do. But for now, you can do the following until I get the next post up:

1. Read up on TailwindCSS and how to use its utility-first classes.
2. Check out TailwindUI by the makers of TailwindCSS for beautifully crafted TailwindCSS components.
3. Read up on both the Svelte docs and Sapper docs.
4. Poke around the /src/routes/index.svelte and /src/routes/about.svelte files, and files in /src/routes/blog/ to get a sense of how Sapper routing works and how you'll be writing and coding your new site/blog.
5. Check out the Roadmap to see what I'm currently working on for this site.
6. Subscribe to my new email newsletter below (if you haven't already) and I'll email you every time I post updates to this site.

Good Luck!