Simple Tailwind CSS 4 Setup for Jekyll

Tailwind CSS 4 changed how configuration works. The JavaScript config file has been replaced by CSS-based configuration using @theme directives and uses the tailwind CLI to shake down the generated tailwind classes and minify. Here’s how to set it up with Jekyll.

The Setup

Changes to four files, plus one more step if you want plugins.

Gemfile

gem "jekyll-tailwind", group: [:jekyll_plugins]

Run bundle install to fetch the gem. The jekyll-tailwind gem handles everything. No separate build pipeline, no PostCSS config, no watching for changes. It hooks into Jekyll’s build process.

Under the hood, it uses tailwindcss-ruby—the same gem that powers Tailwind in Rails.

_config.yml

plugins:
  - jekyll-tailwind

tailwind:
  input: assets/css/app.css
  minify: true

Point it at your CSS file and enable minification for production builds.

Tailwind Plugins (optional)

If you want Tailwind plugins like Typography or Forms, install them with npm:

npm install @tailwindcss/typography @tailwindcss/forms

This requires Node.js on your system. If you’re only using core Tailwind utilities, skip this step.

For blogs, @tailwindcss/typography is particularly useful. It provides prose classes that style your markdown content with sensible defaults for headings, paragraphs, lists, code blocks, and blockquotes:

<article class="prose prose-lg">
  <p>...</p>
</article>

assets/css/app.css

@import "tailwindcss";
/* @plugin "@tailwindcss/typography"; */
/* @plugin "@tailwindcss/forms"; */

@theme {
  --font-serif: "Georgia", serif;
  --breakpoint-sm: 400px;
  --breakpoint-md: 600px;
  --breakpoint-lg: 800px;
}

This is where Tailwind 4’s changes shine. The @theme block replaces tailwind.config.js. Custom fonts, breakpoints, colors, spacing—all defined in CSS.

Plugins use the @plugin directive instead of being listed in a JavaScript config.

_layouts/default.html

Include the stylesheet in your layout’s <head>:

<link href="/assets/css/app.css" rel="stylesheet">

Why This Works

The jekyll-tailwind gem runs Tailwind’s CLI during Jekyll’s build. When you run bundle exec jekyll serve, it:

Processes your input CSS file
Scans your templates for Tailwind classes
Generates optimized CSS
Outputs to _site/assets/css/app.css

Hot reload works. Change a class in a template, save, and the CSS rebuilds.

Why Not?

If you need complex PostCSS plugins beyond what Tailwind provides, you might want a separate build pipeline. But for most Jekyll sites, this setup handles everything.