静的サイトにTailwind CSS導入のメモ
通常の静的サイトにTailwind CSSを導入する。
# 以下コマンドでインストールnpm install -D tailwindcssnpx tailwindcss init
tailwind.config.js
を編集する。
/** @type {import('tailwindcss').Config} */module.exports = { content: ['./www/**/*.{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
をアップする。