静的サイトにTailwind CSS導入のメモ

通常の静的サイトにTailwind CSSを導入する。

# 以下コマンドでインストール
npm install -D tailwindcss
npx tailwindcss init

tailwind.config.jsを編集する。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], //追加
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind CSSをインストールしたディレクトリ以下、webサイトのrootとなるディレクトリに以下を記述したcssファイルを作成する。

/* style_tw.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

ディレクトリ構成的には以下。

├── /node_modules/
├── package-lock.json
├── package.json
├── tailwind.config.js
└── /www/　←webサイトのrootディレクトリ
    ├── /css/
    │   └── style_tw.css　←これを作成（ファイル名は任意）
    └── index.html

htmlにTailwind CSSのclassを記述し、以下でビルドする。

# cssディレクトリ内にstyle.cssが作成される。
npx tailwindcss -i ./www/css/style_tw.css -o ./www/css/style.css --watch

webサイトへはこのstyle.cssをアップする。