Your Personal Sysadmin

Use Jekyll with Tailwind and PostCSS

This is a reminder for future me.

add PostCSS

group :jekyll_plugins do
  gem "jekyll-postcss"

edit _config.yml

  - jekyll-postcss

  cache: false

NB Disabling cache is needed for Tailwind CSS’s JIT engine.

create a postcss.config.js

module.exports = {
  plugins: [
    ...(process.env.JEKYLL_ENV == 'production'
      ? [require('cssnano')({ preset: 'default' })]
      : [])

NB Autoprefixer and cssnano packages are optional, but they are recommended for production builds.

install packages

yarn add postcss@latest tailwindcss@latest autoprefixer@latest cssnano@latest -D

create a tailwind.config.js

module.exports = {
  content: [
  theme: {
    theme: {
      extend: {},
  plugins: []

NB If you add new directories for your posts, pages, or partials, you will need to update the content array

install tailwind typography for better default display

yarn add@tailwindcss/typography

Hey! I'll happily receive your comments via email

Andreas Wagner
Freelance System Administrator from Tallinn, Estonia.