References

I referred to the following articles, but they are a bit outdated.

Starting a blank Jekyll site with Tailwind CSS in 2022

Steps

1. Install jekyll-postcss

jekyll-postcss is a Jekyll plugin that allows you to use PostCSS with Jekyll.

echo "gem 'jekyll-postcss'" >> Gemfile
bundle

_config.yml

plugins:
  - jekyll-postcss

postcss:
  cache: false

2. Install PostCSS, TailwindCSS, Autoprefixer, and CSSNano

PostCSS is a tool for transforming styles with JS plugins.

npm install --save-dev postcss@latest tailwindcss@latest autoprefixer@latest cssnano@latest

3. Create postcss.config.js and tailwind.config.js

postcss.config.js

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

tailwind.config.js

module.exports = {
  content: [
    "./_drafts/**/*.html",
    "./_includes/**/*.html",
    "./_layouts/**/*.html",
    "./_posts/*.md",
    "./*.md",
    "./*.html",
  ],
  theme: {
    theme: {
      extend: {},
    },
  },
  plugins: [],
};

4. Add TailwindCSS to your CSS

add the following to assets/main.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Start Jekyll

bundle exec jekyll serve --livereload

`–livereload’ option makes the browser reload automatically when you change the source code.