note.sorakakeru.info

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

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

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

tailwind.config.jsを編集する。

Terminal window
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./www/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

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

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

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

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

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

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