ここではNodejsを使用して、tailwindcssとposthtmlを使用する流れとコマンドについて解説をしていきます。
コマンドやコードはコピーが出来るようになっているので、コピーして使用してくださいね。
※コマンドプロンプトはcmdと略して書いていきます。
Nodejsのインストール
今回Nodejsを使用するため、以下のコマンドで自分のPCにNodejsが入っているかを確認してください。
node -vこちらでバージョン「v24.13.0」のようにバージョンが出ていればインストールされています。
もし入っていない場合には、Nodejsの公式ページからダウンロードしてください。
Nodejs：ダウンロードページ
windowsならwindowsのインストーラーをダウンロードして、実行すればインストールが出来ます。
インストールが完了したら、
node -vこちらでバージョンが出るかも確認して下さい。
また念のためnpmが使えるかも一緒に確認してください。
npm -vこちらもバージョンが出ればインストール済みになっています。
tailwindcssの導入手順
1.プロジェクトファイル（今回のメインとなるフォルダ）を作成してください。
cmdで作成する場合
mkdir 作成したいフォルダ名2.package.jsonを作成
cmdでプロジェクトフォルダに移動
cd 作成したフォルダ名package.jsonを作成コマンドを入力。
npm init -yパス名に日本語が使用されていると以下のエラーが出てしまうので、アルファベットのみで作成して下さい。
npm error Invalid name:
3.開発用にtailwind cssをインストール
npm install -D tailwindcss4.CLIをインストール
npm install -D @tailwindcss/cli5.tailwindの設定ファイルを作成して内容を入力
プロジェクトフォルダの直下にtailwind.config.jsファイルを作成。
作成したファイルに以下を入力する。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./*.html",
"./sections/**/*.html"
],
theme: {
extend: {},
},
plugins: [],
}
6.tailwind用のCSSファイル（src/input.css）を作成
プロジェクトフォルダの直下にsrcフォルダを作成。
その後にinput.cssファイルを作成する。
7.input.cssに内容を入力
@import "tailwindcss";
@source "./index.html";
@source "./sections/**/*.html";
8.作成されるCSSファイルを配置するdistフォルダを作成
プロジェクト直下にdistフォルダを作成する。
mkdir dist9.tailwind.min.cssが作られるか確認
以下のコマンドを入力して、distフォルダにtailwind.min.cssが出力されるかを確認する。
npx tailwindcss -i ./src/input.css -o ./dist/tailwind.min.cssposthtmlの導入手順
1.posthtmlパッケージのインストール
npm i -D posthtml posthtml-cli posthtml-include2.設定ファイルの作成
プロジェクト直下にposthtml.config.jsファイルを作成。
3.posthtml.config.jsに内容を入力
設定内容が以下になるので、入力して下さい。
const include = require("posthtml-include");
module.exports = {
plugins: [
include({
root: "./",
encoding: "utf8"
}),
],
};
4.テスト用のindex.dev.htmlファイルの作成
プロジェクト直下にindex.dev.htmlファイルを作成する。
- header.html
- bodyMain.html
- footer.html
こちらの3つのファイルをincludeするのに、index.dev.htmlファイルに以下のコードを入力。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./dist/tailwind.min.css">
<title>NodeJS Code</title>
</head>
<body>
<include src="sections/header.html"></include>
<include src="sections/bodyMain.html"></include>
<include src="sections/footer.html"></include>
</body>
</html>
5.sectionsフォルダを作成して各ファイルを作成
プロジェクト直下にsectionsフォルダを作成。
mkdir sections今回テストとして読みこむ3つのhtmlファイルをsectionsフォルダ内に作成してください。
<header class="p-4 border-b">
<div class="max-w-5xl mx-auto font-bold">ヘッダーエリア</div>
</header>
<main class="p-4 border-b">
<div class="max-w-5xl mx-auto font-bold">ボディエリア</div>
</main>
<footer class="max-w-5xl mx-auto p-8">
<div class="text-3xl font-bold">フッターエリア</div>
</footer>
6.index.htmlが作成できるか確認する
index.dev.htmlからindex.htmlがコマンドで作成されるのを確認してください。
npx posthtml index.dev.html -o index.html7.ブラウザ上で表示されるかを確認する
tailwind.min.cssがないとデザインが崩れるので、以下のコマンドでcssファイルを作成。
npx tailwindcss -i ./src/input.css -o ./dist/tailwind.min.cssエクスプローラ―でプロジェクトフォルダ内のindex.htmlファイルをダブルクリックもしくは、
右クリック→プログラムから開く→インストールされているブラウザ（chromeなど）
こちらで開くことでファイルを確認することが出来ます。
コマンドの簡易・自動化
package.jsonファイルのscriptsで『npm run コマンド』で自分で実行したいコマンドを規定することが出来ます。
またwatchを作ることで、ファイルを更新するたびにcssが作成されるように設定も出来ます。
package.jsonファイルのscriptsに以下を入力。
"build:css": "tailwindcss -i ./src/input.css -o ./dist/tailwind.min.css",
"watch:css": "tailwindcss -i ./src/input.css -o ./dist/tailwind.min.css --watch",
"build:html": "posthtml index.dev.html -o index.html"
※testに関しては消してしまっても大丈夫です。
ここまでの設定をしてもらえれば、Nodejsを使用してtailwindとposthtmlを使うことが出来るようになっています。
ブログなどをwordpressで書いたことがある人でも、自分でhtmlを編集したりするのは、また違った面白さがあるので、ぜひやってみてくださいね。