Jekyll with Tailwind 4

Recently, I’ve been looking at static site generators. If you’re reading this article, there’s a good chance you already know what they are. Otherwise, you can read this article by Cloudflare. While this website uses WordPress (a CMS) instead of a static site generator, my other main websites are served as static files. These include my personal website, my Minecraft server’s website, and another website I made for an organization called the Young Reformers.

While I used other static site generators for those, Astro for the personal and Young Reformers websites, and Next.js in SSG mode with no extra code for GearShift¹, Jekyll is undeniably a very important static site generator. It is the foundation for classic GitHub Pages (RIP), as well as an important tool powering several different websites across the World Wide Web.

Jekyll has become a classic tool in a web developer’s workflow, especially when building a simple site. However, a new tool has come on the scene to ease in design: Tailwind CSS. For those unfamiliar with Tailwind, you can read more about it here.

Combining an older tool and a newer tool that are installed with different package managers can be quite complex in this case. There’s a lot of extra configuration required, especially compared to installing it in a tool like Astro, where you can install Tailwind with one command.

To ease installation of Tailwind, I’ve created a simple template that you can get here on my GitLab server or here on GitHub. You can also apply the Tailwind-specific things to an existing site, especially since Tailwind integrates seamlessly with existing CSS (though sometimes you need to turn off Preflight).

I’ll admit, I tried to set this up from scratch just yesterday and failed, so to make this template, I used the initial commit from a school project I used the same setup in, upgraded it to Tailwind 4, and added some fixes that were added in later commits.

Even though I didn’t fully setup this template from scratch, I still remember the steps to set it up.

1. Initialize an NPM project in the directory with NPM, Yarn or PNPM (the template uses PNPM)
2. Install postcss, postcss-cli, tailwindcss, and @tailwind/postcss.
3. Install jekyll-postcss-v2 with Bundler.
4. Set up the postcss.config.js file.
5. Add @import “tailwindcss”; to a CSS file.

Tailwind should be properly set up after you follow these steps.

¹I realize now that using Next.js was overkill for this situation, and I might just rewrite the site in Astro or another SSG