この章では、デフォルトで用意された機能をカスタマイズした手順を紹介します。

CSSをイチから書くのが面倒なので、Tailwindcssを導入しました。

セットアップ

npm install tailwindcss --save-dev

Tailwindcssの設定ファイルを作成します。

./node_modules/.bin/tailwind init

HonKitの記事は .md または .html で書くので、これらのファイルを読み込んでビルドするよう設定します。

module.exports = {
  content: [
    "./docs/**/*.{md,html}",
  ],
  ...
}

tailwindcssのエントリポイントのCSSファイルを作成します。

touch tailwind.css

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

ビルトインサーバーの立ち上げとビルドをnpm scriptsに追加しておきます。

"scripts": {
  "tailwind": "tailwindcss",
  "tailwind:build": "npm run tailwind -- --input=./tailwind.css --output=./dist.css",
  "tailwind:serve": "npm run tailwind:build -- --watch",
  ...

読み込み

HonKitの設定ファイル book.json でTailwindcssのビルドファイルを読み込むようにします。

touch book.json

{
  ...
  "styles": {
    "website": "./dist.css"
  }
}

Configuration | HonKit
https://honkit.netlify.app/config.html

CSSを使う

設定が完了すれば、いつもどおりTailwindcssのCSSクラスが使えるようになります。

<div class="bg-gray-200 p-8 rounded-lg">テスト</div>