Restyling with Tailwind CSS

I’ve revamped the styling on the blog, completely replacing the old (and rather dated) theme with Tailwind CSS. That also meant changing the build process to accomodate Tailwind.

I’ve been wanting to update the blog for some time, and it’s finally complete. There’s a few little details that need to be fixed, but it looks good enough to publish at this point.

The old blog was styled with an old Jekyll theme which was serviceable enough but looked dated when compared to the main site, which I had redone with Tailwind CSS. Now the blog matches with some clean Tailwind of its own. Perhaps it’s a little too stark at this point. Brutalilst, you might say. But I can spice it up at my leisure.

How to integrate Tailwind CSS and Jekyll

The blog is a complete system on its own, which is why it kept its own styling when I updated the main site. The blog is a static website built by Jekyll. I liked Tailwind when I used it to update the main site, so I wanted to use it again on the blog. When I researched how to integrate Tailwind and Jekyll, most of the solutions pointed to PostCSS. That’s a Node wrapper around a process to automate buiding CSS. You need the jekyll-postcss gem to integrate PostCSS into Jekyll, and for that you need to install npm.

npm is the Node Package Manger. It’s how most JavaSceipt-written pacakges are managed, but it’s had quite a few security issues recently. And it’s huge and unwieldly. And I thought, why do I want to infect my whole blog system, which is designed to be as simple as possible, with npm? So I wanted to do better.

I felt it should be possible to run Tailwind without adding a dependency to npm. As it turns out, you can do that.

Tailwind Standalone

First, we need to get rid of npm in Tailwind. Tailwind is JavaScript, and normally installed through npm, but they have a special standalone package you can use without having to go through npm. It’s pretty easy to install. It’s just one file you can download anywhere.

Jekyll Integration

Next, I needed a plugin that would call Tailwind to render my CSS every time I rebuilt the site. That wasn’t too hard either. I’ve posted the code here on my GitHub. To use it, put that code in your _plugins directory.

Next, create tailwind.config.js in your blog root directory that should look something like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}",
    "./_includes/**/*.{html,js}",
    "./_layouts/**/*.{html,js}",
    "./_posts/**/*.md",
    "./_drafts/*.md",
    "./public/js/*.js",
    "./_plugins/*.rb"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    ],
}

Depending on your blog layout, you might want to adjust your content specification. These are all the directories where Tailwind will look for you using its utility classes to build the css file.

Next, I created a jekyll plugin to call Tailwind whenever it generates the blog. It’s pretty simple, one short file which I have here as a gist: Jekyll Tailind Plugin. Place that file in your _plugins directory.

To configure it, all you need to do is tell it where you downloaded the Tailwind binary that you downloaded. In your _config, add a section like so:

tailwind:
  script: /usr/local/bin/tailwindcss

Of course you should substitute in the actual path of where your tailwindcss binary is.

That should do it! You can now use Tailwind to style your Jekyll blog, and you don’t need npm, yarn, or PostCSS. Of course, now you have the real hard work ahead of you: having to strip out all of your old css styling and replacing it with Tailwind utility classes. Have fun!