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

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.
baseurl: "" # the subpath of your site, e.g. /blog
title: "" # the name of your site, e.g. ACME Corp.

  - jekyll-postcss

and create postcss.config.js file.

// postcss.config.js

module.exports = {
  plugins: [

3. Setup Tailwind CSS config file

Run npx tailwindcss init to create empty Tailwind config file.


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.