How to go about adding Tailwind CSS to a static site?
This article will show how to get started easily, how to set up your tooling in a more complex way and what to look out for.
Note: for a more complete guide on getting started with Tailwind CSS, check out the Tailwind CSS For Non-Designers article.
Starting Simple
This approach works independently from where you want to add Tailwind CSS. It will work in a static site generator, and in a backend framework like Django. At least to get started.
However, be warned! While it is simple, you will miss out on a lot of conveniences - like automatic reloading, cache invalidation or small asset sizes.
Let’s look at a truly static site - just a folder, with a single index.html in it. I’m serious. Here’s how the file content looks:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
</head>
<body>
</body>
</html>
Now, how do we add Tailwind CSS to that?
Hello Tailwind
The installation instructions of the Tailwind CSS site are great! You should definitely check them out.
However, their ordering is not quite what I would choose for non-frontend people. I would start with the easiest way to get started - with the CDN version of Tailwind CSS.
Seriously, check out the docs. They are great!
Now, what are the issues with this approach?
- You are adding a big file, with all Tailwind CSS classes.
- You are limited to fist-party plugins.
How could we do better? Well, Tailwind CSS relies on looking what classes you actually use in your code, and to prune away everything else. You can add Tailwind CSS as part of a toolchain around PostCSS (and autoprefixer for convenience), but you don’t need to.
If you are using a framework, there is probably a plugin which takes care of a more convenient setup for you.
Let’s take a look at setting up am as-few-tools-as-possible workflow. And point out what still will be missing.
Prerequisites
First, you’ll need an up to date version of Node. Node 18 is the currently most recent LTS version. You can check with
$ node -v
Having installed npx globally helps with following the official instructions. This is a tool which runs node package executables, or fetches them if they are missing. Here is how to get it:
$ npm install -g npx
Now, it’s time to install node packages. Once again, take a look at the official docs for this. Here is the command for the Tailwind CLI:
npm install -D tailwindcss
This needs to happen in the same directory where our project root is. So next to our index.html file for example.
You’ll need to create a tailwind.config.js and a .css file, for example main.css. The .css file usually contains the following:
@tailwind base;
@tailwind components;
@tailwind utilities;
The content of the tailwind.config.js for our setup would look something like this:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html"],
theme: {
extend: {},
},
plugins: [],
}
Building
We will be missing a bunch of stuff doing things this way. There will be no automatic reload during development, you might have an issue with browser caching, as it might not load your changed .css file because it has the same name.
But! Here is how you can execute tailwind:
npx tailwindcss -i ./main.css -o ./tailslim.css --watch
This will watch the main.css as input, generate a slimmed down file containing only needed classes as output.css. It will also keep updating the file whenever changes happen. The output will be quite short. Short enough not to get in the way at least.
Expanding The HTML
Now, we need to add a link to the compiled file to the HTML:
<link href="./tailslim.css" rel="stylesheet">
This will only work if we open the file as-is, and not via a web browser. But hey, this is what we are here for, right?
Now the setup should work, and it is time to try and style a part of the page with Tailwind CSS.
The main page of Tailwind CSS has a few examples on it. You can read more about getting started with styling a site over here.
Not The Whole Story
That’s been two more-or-less simple ways to add Tailwind CSS to a static file. Once again, both setups are lacking in many ways.
We’d want a live reload development server for convenience. The resulting .css file should be named something distinct, instead of compiled.css, to make sure that we don’t run into caching issues when deploying the site.
But it’s a way to start! Starting simple has helped me get up to speed on Tailwind CSS eventually. Now, having it in my toolbox is the only way I want to design websites. The site you are reading right now has been redesigned using it, and I enjoyed the process quite a lot.
I hope this writeup was useful to you!