Use Jekyll and Tailwind Css

This seems like a pretty straightforward task, right? Well, it turns out it’s not as easy as it seems. I went through my fair share of frustrations trying to make Jekyll and Tailwind behave well together until I stumbled upon Marcin Doliwa’s and Steven Westmoreland’s blogposts on the subject. Here is a quick summary of what I found:

1. Create new jekyll site

Start with a blank Jekyll site by running jekyll new mysite --blank on the terminal and cd into that directory.

2. Install Postcss and Tailwind

Use the following command to install PostCSS, Tailwind and Tailwind Typography plugins:

$ npm install tailwindcss @tailwindcss/typography cssnano postcss postcss-import autoprefixer --save-dev

3. Setup Postcss and Gemfile

Create a Gemfile by running bundle init, and add jekylland jekyll-postcss to it:

# Gemfile

source "https://rubygems.org"

gem "jekyll", "~> 4.2.2"
gem 'jekyll-postcss'

Run bundle installon the terminal.

Add jekyll-postcss plugin to _config.yml file:

# _config.yml

url: "" # the base hostname & protocol for your site, e.g. http://example.com
baseurl: "" # the subpath of your site, e.g. /blog
title: "" # the name of your site, e.g. ACME Corp.

plugins:
  - jekyll-postcss

and create postcss.config.js file:

// postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    ...(process.env.JEKYLL_ENV == "production"
      ? [require('cssnano')({ preset: 'default' })]
      : [])
  ]
}

3. Setup Tailwind CSS config file

Run npx tailwindcss init to create empty Tailwind config file and add the following configuration.

// tailwind.config.js
module.exports = {
  content: [
    './_includes/**/*.html',
    './_layouts/**/*.html',
    './_posts/*.md',
    './*.html',
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

4. Import Tailwind stylesheets to your CSS file.

Edit assets/css/main.scss file to make it look like this:

---
---

@import "tailwindcss/base";
@import "tailwindcss/components";

@import "tailwindcss/utilities";

Disclaimer: For some reason the jekyll postcss parser isn’t working for me when i try to add tailwind color classes (like bg-blue-200 ortext-red-500). I noticed the problem arises when I use sass (or scss) as the main file. So instead I opted for deleting the assets/css/main.scss file and using an assets/css/main.css file instead.

Run bundle exec jekyll serve

Jekyll is using Tailwind CSS now.

5. Make live reloading of css work for you

Because of the way Jekyll works it can be cumbersome to relaunch the server everytime we add new tailwind classes to our html. Luckily for us there’s a very simple workaround. Simply add a postcss directive to the _config.yml file:

# _config.yml
....
postcss:
  cache: false

This way Jekyll rebuilds the css file for us everytime we make changes to our html files.

6. Deployment

When building for production, always set JEKYLL_ENV=production and NODE_ENV=production on the command line. When these variables are set to production, unused Tailwind styles are purged and the output is processed with cssnano.

$ JEKYLL_ENV=production NODE_ENV=production bundle exec jekyll build

Hope this was helpful! Let me know if it works for you.