前回は 11ty の導入とディレクトリ構成について書いたので、TailwindCSS の導入から。

前回記事: 11ty と TailwindCSS のビルド環境を整える - その１

構成

2019 の Intel Mac
macOS 13.2 (22D49)
node v18.14.0（brew でインストール）
npm 9.3.1（brew でインストール）

TailwindCSS のインストール

公式サイトを参考に進める。
今回は PostCSS も使うので、Using PostCSS に記載の手順がベース。

ルートディレクトリで以下のコマンドを叩いて TailwindCSS と PostCSS を入れる。

npm install --save tailwindcss postcss postcss-cli autoprefixer

公式だと postcss-cli が含まれていないが、これがないと npx postcss とした時にエラーになる。

この状態の package.json。

{
  "name": "11ty-hands-on",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx @11ty/eleventy",
    "dev": "npx @11ty/eleventy --serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@11ty/eleventy": "^2.0.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "postcss-cli": "^10.1.0",
    "tailwindcss": "^3.2.7"
  }
}

導入したパッケージについて

tailwindcss: CSS フレームワーク
postcss: 導入している PostCSS のプラグインに応じて、CSS に対して色々操作してくれるパーサー
postcss-cli: コマンドラインで postcss を使う時に必要になるインタフェース
autoprefixer: PostCSS がパースする際に、-webkit- などのベンダープレフィックスを自動でつけてくれるプラグイン

TailwindCSS の設定

公式の手順にある通り、以下のコマンドで設定ファイルを作成する。

npx tailwindcss init

現在のディレクトリ（ルート）直下に tailwind.config.js が生成されるので、エディタで編集する。

/** @type {import('tailwindcss').Config} */
module.exports = {
-  content: [],
+  content: ['_site/**/*.{html,js}'],
  theme: {},
  plugins: [],
}

content を修正し、11ty の出力先の HTML および JS のファイルを走査するように設定する。対象となるファイルが検査され、必要なスタイルを検出、出力先の CSS ファイルに定義される。

動作するか確認するために、src/assets/css に tailwind.css というファイルを作成し、以下のように記述しビルドしてみる。

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

ビルド。

npx tailwindcss ./src/assets/css/tailwind.css -o ./src/assets/css/out.css

tailwind.css のビルド出力が out.css にされているので確認する。

PostCSS の設定

続いて PostCSS の設定ファイルを生成する。
tailwind.config.js 同様、現在のディレクトリ直下に postcss.config.js を作成し、以下のように記述する。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

plugins に TailwindCSS と Autoprefixer を設定する。
こうすることでパーサーの処理後、plugins に記述された順に実行され、結果を指定された出力先に CSS ファイルとして書き出す。

上記設定では、tailwindcss によって、前項で行った npx tailwindcss と同様にビルドされ、その後 autoprefixer によって必要に応じたベンダープレフィックスが追加される。

先程と同じように実行し、問題ないことを確認する。

npx postcss ./src/assets/css/tailwind.css -o ./src/assets/css/out.css

npm run で 11ty と postcss を同時に実行する

ここまでで、postcss 経由で tailwindcss が実行されることを確認できたので、npm run で 11ty のビルドと合わせて実行するようにする。

package.json の script を以下のように修正する。

"scripts": {
+  "build:css": "npx postcss src/assets/css/tailwind.css -o _site/assets/css/tailwind.css"
-  "build": "npx @11ty/eleventy",
+  "build": "npx @11ty/eleventy && npm run build:css",
  "dev": "npx @11ty/eleventy --serve"
},

CSS のみ更新したい場合は、npm run build:css を実行し、11ty 含めビルドする際は npm run build を実行する。
ビルド結果が _site に出力されるようになったが、このままだと生成された HTML の内容を確認できないので、npm run dev で確認できるようにする。

@11ty/eleventy --serve は、実行するとサーバが立ち上がり、内部でループ処理が行われるため制御が返ってこない。
PostCSS はその名の通りポスト処理なので、11ty のビルド結果に対して動作させる必要がある。

ので、

11ty build => server 実行

という流れを

11ty build => tailwindcss build => server 実行

にするために、@11ty/eleventy-dev-server を使用するよう修正する。

"scripts": {
  "build:css": "npx postcss src/assets/css/tailwind.css -o _site/assets/css/tailwind.css"
  "build": "npx @11ty/eleventy && npm run build:css",
-  "dev": "npx @11ty/eleventy --serve"
+  "dev": "npm run build && npx @11ty/eleventy-dev-server --dir=_site"
},

これで 11ty のビルド、tailwindcss のビルド結果をサーバが読み込んで確認できる環境になったので、ここからはレイアウトファイルなどを作成して実際にコンテンツを作成していく。

11ty と TailwindCSS のビルド環境を整える - その２

SUMMARY

構成

TailwindCSS のインストール

導入したパッケージについて

TailwindCSS の設定

PostCSS の設定

npm run で 11ty と postcss を同時に実行する