Marcin Doliwa

How to setup Jekyll with Tailwind CSS?

Let’s start with blank Jekyll website by running jekyll new mysite --blank. Change working directory to mysite.

1. Install required packages

npm install tailwindcss@latest postcss@latest autoprefixer@latest postcss-import@latest

2. Setup PostCSS

Create Gemfile, add jekyll-postcss gem to it and run bundle install

# Gemfile

source "https://rubygems.org"

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

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'),
  ]
}

3. Setup Tailwind CSS config file

Run npx tailwindcss init to create empty Tailwind config file.

//tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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";

Run jekyll serve. Jekyll is using Taiwlind CSS now.