Hugo Di FrancescoHow 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
Tailwind CSS 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” .
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.
Cons
The default bundle size is quite large, this can be offset using PurgeCSS or by configuring the build (see Controlling File Size in the Tailwind CSS documentation)
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, the start command use netlify dev ie. Netlify Dev 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”, 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
