JekyllでTailwind CSSを使いたい。調べると簡単そうに見えていくつか情報はでるものの、実際は少し厄介でした。複数の情報を行き来してようやく動作したため、忘備録を兼ねて、構築方法と落とし穴をこの記事にまとめておきます。htmlでサイト作るの面倒やなあ、WordPressやと管理が面倒。サイトをつくってみたくてもそれがネックだった。Jekyllがあるじゃないか。githubで公開できるし、Rubyだし。これからも制作できるように自分用の記録。さすがに自分のいつもの書き方だと解読から難しいメモになるので、以下内容はほとんどGPTで過程を整理して生成もらったものです。
はじめに：Jekyll公式の手順とその限界
Jekyll公式のセットアップ手順は次のようなものです：
gem install jekyll bundler
jekyll new mysite
cd mysite
bundle exec jekyll serve
これだけでローカルサーバーが立ち上がる。しかし、ここにTailwind CSSを組み合わせようとした瞬間、話はややこしくなる。
なぜTailwind CSSとの統合が難しいのか？
TailwindはPostCSSというビルドツールに依存していますが、Jekyll側はSCSSベースでのスタイルビルドを想定しています。JekyllがPostCSSをうまくハンドリングできない環境があり、Jekyll 4.x系での jekyll-postcss プラグインが古いため、Node.jsの更新などで動かなくなることもあります。
これを回避するために誕生したのが jekyll-postcss-v2 です。
構築手順（2025年版）
1. Jekyllサイトの作成
jekyll new mysite
cd mysite
jekyll new mysite --blank はデフォルトのテンプレートを含めず、完全な空の状態で始めるためのオプションです。デフォルトの影響をうけずに0から自分で Tailwindと生成したい場合に使われたりします。
2. Ruby側の準備
bundle init
Gemfileに以下を追記：
gem "jekyll", "~> 4.4.1"
gem "jekyll-postcss-v2"
その後、インストール：
bundle install
_config.ymlにも以下を追加：
plugins:
- jekyll-postcss-v2
3. Node.js側の準備
npm init -y
npm install -D postcss postcss-cli tailwindcss postcss-import autoprefixer
※この手順で package-lock.json が生成され、依存関係の固定に使われます。他の環境にコピーする際に再インストール不要にするためにも重要です。先述したようにデフォルトではこれがなくても起動できているものの、今回の設定に合わせてやっておく必要があります。
4. Tailwind設定ファイルの作成
npx tailwindcss init
tailwind.config.js：
module.exports = {{
content: [
'./_layouts/**/*.html',
'./_includes/**/*.html',
'./*.html',
],
theme: {{ extend: {{}} }},
plugins: [],
}};
5. PostCSS設定ファイルの作成
postcss.config.js：
module.exports = {{
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}};
6. CSSファイルの用意と読み込み
assets/css/main.css（※自分は .scssではなく.cssを採用）を作成し、以下を記述：
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
そして、HTMLにて head タグ内で output.css を読み込むように記述（例：_layouts/default.html）：
<link rel="stylesheet" href="/assets/css/output.css">
ビルド（CSS生成）コマンド
Tailwind のクラスを含んだoutput.cssを生成するために、以下のコマンドを実行します：
npx tailwindcss -i ./assets/css/main.css -o ./assets/css/output.css --watch
なぜ必要？
- main.cssは「どのTailwindを使いたいか」を書いただけのファイル
- 実際の中身（ユーティリティクラスなど）は npxコマンドで初めて生成される
- output.cssを作らないとHTMLに読み込んでも中身が空なので効果が出ない
JekyllとTailwindを同時に動かすには？
2つのプロセスを同時に起動しておく必要があります：
- （CSSの監視と出力）
npx tailwindcss -i ... --watch - （Jekyllのサーバー）
bundle exec jekyll serve
ターミナルを2つ使って、両方を並行実行しておきましょう。これでHTMLの修正もTailwindのクラス追加もリアルタイム反映されるようになります。
よくあるエラーとその原因
PostCSS not found エラー → npm init -y でpackage.jsonを作っておかないと、PostCSS の仕組みが動作しない。
その上で、環境に応じて以下を実行する必要がある：
npm install -D tailwindcss postcss postcss-cli postcss-import autoprefixer
これを忘れていると、PostCSS の中身が空のままになり、エラーが出る。
gem jekyll-postcss-v2
を使用する。
まとめ
| 手順 | 必要理由 | 備考 |
|---|---|---|
| bundle init | RubyのGemfile作成 | –skip-bundle は jekyll new 時に bundle install をスキップするだけ |
| npm init -y | Node環境で依存管理 | これがないと npm install 時にファイルが作られない |
| npm install … | Tailwind + PostCSS動作用 | CSSをJekyllに組み込むために必要 |
| jekyll-postcss-v2 | 旧 jekyll-postcss の代替 | RubyのGem依存が古くて動かない環境への対応 |
参考サイト
Jekyll公式日本語
https://jekyllrb-ja.github.io/docs/
Use Jekyll and Tailwind Css (自分の場合もscssではなくcssを採用)
https://medium.com/on-web-development/use-jekyll-and-tailwind-css-354ea2320e92
Conversion error: Jekyll::Converters::PostCss encountered an error while converting ‘assets/css/main.css’
https://stackoverflow.com/questions/77084684/conversion-error-jekyllconverterspostcss-encountered-an-error-while-convert
Jekyll + Tailwind2 + Netlify
https://medium.com/@mauddev/jekyll-tailwind-netlify-9496352b49ee
jekyll-postcss-v2
https://github.com/bglw/jekyll-postcss-v2
