Tailwind CSS 1.x impressions, development and production setup for static sites with Tailwind CLI and PurgeCSS CLI
Tags: tailwindcss, css, frontend, jamstack
Published: 2019-08-05 13:18:38

---
title: Tailwind CSS 1.x impressions, development and production setup for static sites with Tailwind CLI and PurgeCSS CLI
published: true
tags: TailwindCSS, CSS, frontend, jamstack
canonical_url: https://codewithhugo.com/tailwind-css-1.x-impressions-development-and-production-setup-for-static-sites-with-tailwind-cli-and-purgecss-cli/
---

> How to set Tailwind CSS up with a static site hosted on Netlify

See the full starter repository at [github.com/HugoDF/netlify-lambda-tailwind-static-starter](https://github.com/HugoDF/netlify-lambda-tailwind-static-starter)

[Tailwind CSS](https://tailwindcss.com/) is “a utility-first CSS framework for rapidly building custom designs”. I’ll be walking through my first impressions of it as well as how to leverage its CLI (and the PurgeCSS CLI) to add it to any project without a build process (eg. Webpack, Gulp).

## First Impressions of Tailwind CSS

### Pros

The integrated CLI tool means you don’t have to set up your own build step. I’ve found that for development, running the full tailwind build (no purging of styles), is beneficial, so much so that I’ve added it as the `prestart` npm script (means it runs before `yarn start` or `npm start`).

Tailwind 1.x leverages PostCSS instead of being SCSS or stylus based. Despite the massive stride forward node-sass has been for frontend tooling, the fact that it _is_ a linked dependency can cause issues when changing Node versions or using different Operating Systems.

It’s a breath of fresh air to _not_ have to set up node-sass, a skill which you forget as soon as you’ve got the build up and running.

Tailwind’s utility-first approach means I barely even write any CSS. I managed to quickly map my CSS knowledge onto the utility classes which makes it great for quickly gettting a prototype up. A great read on how to get over the “why would anyone do this” moment of utility classes, is Adam Wathan’s [CSS Utility Classes and “Separation of Concerns”](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) .

Once the few command line tools necessary for a productive Tailwind 1.x setup are stringed together (namely PurgeCSS) it feels great.

The copy-pastable component library is also great. Unlike Bootstrap, Foundation or even some of the more modern toolkits like Material UI or Bulma, none of the Tailwind CSS components rely on JavaScript. It’s a CSS framework after all. So the components are more of a cookbook/recipe that are meant to be copy-pasted and modified.

Tailwind 1.x pushes a pre-defined colour palette and rationalises what sizes are allowed.No more pixel-slinging, there’s just a scale: `1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 56 64`,you can read more about the Tailwind CSS scale in the [Default spacing scale documentation](https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale).

### Cons

The default bundle size is quite large, this can be offset using [PurgeCSS](https://www.purgecss.com/#cli) or by configuring the build (see [Controlling File Size in the Tailwind CSS documentation](https://tailwindcss.com/docs/controlling-file-size))

PurgeCSS CLI can be a pain to set up, and you have to whitelist liberally to get Tailwind CSS modifier utils. That’s all pretty well documented though.

The repetition involved with using a utility-class based framework like Tailwind CSS is a bit tedious to begin with.

1.x also introduced a bunch of extra places where you need to repeat yourself, all the links need to have a `class="text-blue-500 hover:text-blue-800”`, all the headings have to manually sized. In the long run, this is great since these are the kind of styles that would keep getting overwritten, so why not leave them unstyled from the start.

There’s no more SCSS, no more CSS even, it’s all utility classes and that can get to you.

### Verdict

I’m a fan, it’s nice and orthogonal to all my other stack choices:

- 

I can use it with an SPA setup

- 

I can use it with static (just HTML) demos on Netlify eg. Netlify Pocket Lambda demo

- 

I can use with a server-page setup

With the command-line tool, it’s even language agnostic. I don’t need to add npm/Node to the deployed environment, I can pre-build, use the CDN version or even check it into git.

## Setting up Tailwind CSS v1.x for a static site with Yarn, Tailwind CLI and PurgeCSS CLI

### Getting up and running with Tailwind CLI

```
yarn add --dev tailwindcss
# or
npm install --save-dev tailwindcss
```

Add the following to `package.json`.

```
{
  "scripts": {
    "build:css": "yarn build:tw",
    "build:tw": "tailwind build src/styles.css -o public/styles.css",
  }
}
```

### Brutally prune CSS rules with PurgeCSS CLI

**Important** : This is the naive way of doing CSS purging.It doesn’t take into consideration that we’re using Tailwind CSS.Hence when using this approach, some utilities won’t work.See PurgeCSS configuration for Tailwind for the right way to do it.

```
yarn add --dev purgecss
# or
npm install --save-dev purgecss
```

Add the following to `package.json`.We’re leveraging npm scripts “post”-hook to run PurgeCSS against the output of the Tailwind CLI.

It works since `build:css` is the Tailwind CLI generation command.

We use the `--css` argument to point PurgeCSS to the generated styles and the `--content` argument to point to the HTML that we’re purging against.

The `--out` flag uses the same directory as the initial (pre-PurgeCSS) styles.css, which means we’re overwriting it.

```
{
  "scripts": {
    "postbuild:css": "purgecss --css public/styles.css --content public/index.html --out public"
  }
}
```

### Setting up for development

For development we want to use a full Tailwind CSS build.

In order to do that, we’ll leverage the fact that we tend to run application using the `start` script.

Once again, we’ll leverage npm script hooks, in this case a “pre”-hook, to run a full Tailwind CSS v1.x build.

The `prestart` script simply calls `yarn build:tw`.

Add the following to your scripts:

```
"prestart": "yarn build:tw",
```

Now when you run `yarn start`, before the `start` script is run, a full Tailwind build will be run.In the case of the Netlify starter project at [github.com/HugoDF/netlify-lambda-tailwind-static-starter](https://github.com/HugoDF/netlify-lambda-tailwind-static-starter), the `start` command use `netlify dev` ie. [Netlify Dev](https://dev.to/scottw/netlify-dev-3je3-temp-slug-5267792) which is supposed to run the site just as it would when it gets deployed to Netlify.

### Production PurgeCSS configuration for Tailwind

As mentioned in Brutally prune CSS rules with PurgeCSS CLI, that naive approach doesn’t work.

Here’s how to set PurgeCSS CLI up properly to be Tailwind v1.x aware, it hinges on the using a Tailwind CSS specific extractor (which is just a RegEx).

We’re leveraging the extractors option as [documented under PurgeCSS “Configuration File”](https://www.purgecss.com/configuration#configuration-file), see the following `purgecss.config.js`

```
module.exports = {
  content: ['path/to/content.html'],
  css: ['path/to/styles.css'],
  extractors: [
    {
      extractor: {
        extract: content => content.match(/[A-z0-9-:\/]+/g)
      },
      extensions: ['html']
    }
  ]
};

```

And update the `postbuild:css` script to the following in order to use the `purgecss.config.js` file and still output to `public` directory (thereby overwriting the intiail Tailwind CLI output).

```
"postbuild:css": "purgecss -c purgecss.config.js -o public"

```

## Get started with a production-ready Tailwind CSS for static sites on Netlify

See and use the full starter repository at [github.com/HugoDF/netlify-lambda-tailwind-static-starter](https://github.com/HugoDF/netlify-lambda-tailwind-static-starter)

[<svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewbox="0 0 32 32"><title>unsplash-logo</title>
<path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg>seth schwiet](https://unsplash.com/@schwiet?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge "Download free do whatever you want high-resolution photos from seth schwiet")