tailwind CLI
前提 nodeJS
とnpm
がインストールされていること。
1- Tailwind CSS をインストールする
npm install -D tailwindcss npx tailwindcss init
npmの初期化
npm init -y
2- テンプレートのパスを構成する
tailwind.config.js
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }
3- Tailwind ディレクティブを CSS に追加します
src/input.css
@tailwind base; @tailwind components; @tailwind utilities;
4- Tailwind CLI ビルド プロセスを開始する
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
5- HTML で Tailwind の使用を開始する
src/index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html>
スクリプト登録とエラーの削除
- ビルドプロセスをスクリプトに登録
package.json
これでnpm run build
でビルドされるようになる。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch" },
ミニファイ化
build.css
がプロジェクトディレクトリ直下に作られる。
デプロイはミニファイファイルにて。
npx tailwindcss -o build.css --minify