Adding Tailwind CSS to a Static Site
I wanted to start using Tailwind CSS the other day, but kind of bumped into an invisible barrier while trying to do so.
This article is my first small step towards figuring out how to start using Tailwind CSS for real-world projects in the future.
My web framework of choice is Django, and I’ll probably use it for most things that I build. But static site generators are also something I really like. They are really cool to get a new site off the ground!
To keep things simple, my first Tailwind CSS getting-started project will be a plain HTML-only static site. Really just a folder, with a single index.html in it.
I’m serious. Here’s how it 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?
The installation instructions of the Tailwind CSS site look the most promising.
We could simply include a CDN version of Tailwind CSS, as described at the bottom of the instruction page - but that’s too straightforward for my getting-to-know-the-process goal. I’d prefer to try and build something closer to a realistic dev workflow to get a taste of it.
Alright, so what tools are needed? They recommend to use it with PostCSS (and autoprefixer while we’re at it). Apparently, Node 12.13.0 or higher is required.
$ node -v v15.5.0
Phew, I’m good! So, let’s install those npm packages.
npm install tailwindcss@latest postcss@latest autoprefixer@latest
This needs to happen in the same directory where our project root is, as npm installs stuff locally by default.
After creating a postcss.config.js file, and copying the suggested content from the instructions, it’s time to create the css file, styles.css:
@tailwind base; @tailwind components; @tailwind utilities;
As we are not using a js framework, and don’t care about production-relevant tweaks (like making sure unused stuff is not bundled in), a quick:
postcss styles.css -o compiled.css
will do the trick of generating a compiled css file… Or so I thought. Turns out, we’re missing one more package:
npm install postcss-cli
And making sure my shell looks for node-installed binarires by adding:
postcss styles.css -o compiled.css
This time it worked.
Expanding The HTML
Now, we need to add a link to the compiled file to the HTML:
<link href="./compiled.css" rel="stylesheet">
And it’s 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, but I went to the free samples of Tailwind UI to make sure I don’t stumble over non-complete snippets at this stage.
I picked this one, an application shell. It worked fine!
Not The Whole Story
Looking at the “Network” tab in my browser, the current
compiled.css file is almost 4 MB large. This is to be expected, as we bundled everything together, and the compiled file is not minified.
For a real project, you’d want to cut out all the unneded parts, as part of a more elaborate dev/production setup.
It also would get really tedious to create a new compiled.css on every change. We’d want a live reload development server for that, keeping track of changes and reloading the site for maximum convenience.
And of course, the resulting bundle would have to be named something distinct, instead of compiled.css, to make sure that we don’t run into caching issues when deploying the site.
But I think, I’ll want to figure these things out for a less simplistic project. Maybe when using Hugo or Zola with a Tailwind-y theme, or when building a fresh Django project with Tailwind CSS for that extra sparkle.
I hope this writeup was useful to you! Writing this certainly helped me figure out how to get started myself :)