完成イメージ



Node.js のサーバーから Tailwind CSS クラスを使用した静的ファイルを表示できる

この記事について

備忘録です。なるべく簡潔に書こうと思います。

環境

サービス名称	バージョン	種別等
VSCode	1.90.0	エディタ
macOS	14.5	OS
Node.js	20.13.1	JavaScript実行環境
npm	10.5.2	パッケージ管理

登場技術


Node.js	JavaScriptの実行環境（プログラミングを解釈し動かすもの）
Tailwind CSS	CSS フレームワーク CSSプロパティを書かずとも、クラス名でstyleを変更・管理することができる
( ejs )	HTMLにJavaScriptコードを埋め込めるようになる（JavaScriptコードを埋め込まなければただのHTML）今回は参考記事の都合で使用するが、使わなくてもいい

手順1【Node.jsの設定】

天下のProgateさんを参考に、Node.js 関連の設定をします。

1-1. Node.js のインストール

まずは Node.js をインストールします。
この記事を参考にします。

1-2. Node.js で EJS (HTML) の表示

次に、この記事を参考に、静的ページの表示をします。

具体的には、以下の操作を行います。

アプリのフォルダ作成
npm initでpackage.jsonを生成
express のインストール

以下の項目は必須ではありません。

ejs のインストール
今回は参考記事に合わせるため、記事上はejsを使用します。
nodemon のインストール
必須ではありません。記事上は使用せず進めます。

手順1完了！

Node.jsをインストールし、ページの表示ができました。
現時点で不安な方は、以下のGithubと見比べてみてください。

手順2【Tailwind CSSの導入】

2-1. tailwindcssのインストール

% npm install -D tailwindcss

コマンドの簡単な説明

npm (node package maneger) を使い、installを行う
-D：開発環境でのみ使用するものである

参考記事

ローカルインストール時に -D オプションをつけるべきケース

一般的に、開発環境でしか使用しないパッケージについては npm install -D <package> として、そうではないパッケージについては npm install <package> とします。

パッケージ名の引数をとらない npm install には --production とオプションをつけることで、npm install -D <package> でインストールしたパッケージを除いて node_modules にインストールすることができます。

2-2. tailwindの設定ファイルを作成

% npx tailwindcss init

コマンドの簡単な説明

npx (node package executer) でパッケージを実行する
実行するパッケージは tailwindcss
init (初期化) を行う

この操作により、tailwind.config.jsが作成されていればOKです。

2-3. ファイルとフォルダを追加

before	after

以下の3つを作成します。

srcフォルダ
srcフォルダ下のstyles.css
viewsフォルダ下のstyles.css

2-4. 追加したファイル・フォルダを編集

before	after

srcフォルダ下のstyles.cssに以下のコードを追加します。

src/styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

2-5. tailwindの設定ファイルを編集

2-2で作成した tailwind.config.js を編集します。

before	after

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
- content: [],
+ content: ['./src/*.{html,js,ejs}', './views/*.{html,js,ejs}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

コマンドの簡単な説明
Tailwind CSSは、パフォーマンスが重くならないよう「未使用のCSSを削除する」機能があります。

この content の項目では、どのファイルを監視するかを指定します。
プロジェクトで実際に使用しているすべてのhtml, jsファイルが含まれるよう記述します。

今回は比較的広めのファイルにマッチさせていますが、公式では「なるべく具体的に、狭く」することが推奨されています。

Content Configuration - Tailwind CSS

余談ですが、使用されているクラスを検出する方法は非常にシンプルなようです。
構文の解析や実行をせず、正規表現で「可能性のあるもの」にマッチしているとのこと。

we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name.

2-６. ejsファイルを編集する

before	after

hello.ejs

- <h1>Hello World</h1>
+ <link rel="stylesheet" href="views/styles.css" />

+ <div class="pt-6 space-y-4 bg-slate-100 rounded-xl p-8 dark:bg-slate-800 m-6">
+   <p class="text-lg">“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p>
+ </div>

<link rel="stylesheet" href="views/styles.css" />

この部分で、CSSファイルを呼び出しています

<div class="pt-6 space-y-4 bg-slate-100 rounded-xl p-8 dark:bg-slate-800 m-6">
  <p class="text-lg">“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p>
</div>

Tailwindのサンプルです。実際に使うコードに置き換えてもらってOKです。

2-７. app.jsの更新

app.use('/views', express.static('views'));という一行を追加します。

app.js

const express = require('express');

const app = express();

+ app.use('/views', express.static('views'));

app.get('/', (req, res) => {
  res.render('hello.ejs');
});

app.listen(3000);

htmlからCSS（スタイルシート）を呼び出す際、以下のhtmlの記述によって、https://mydomain.com/views/styles.cssにアクセスします。

<link rel="stylesheet" href="views/styles.css" />

しかし、/views/styles.cssというアクセスに対するルーティングは設定していません。よって404 not found になります。

そこで、/viewsを含むHTMLリクエストに対しては、viewsフォルダを参照し、静的ファイルを返すように設定しました。

2-8. スタイルシートをコンパイルする

いよいよ最後です！以下のコマンドを実行します。

% npx tailwindcss -i ./src/styles.css -o ./views/styles.css --watch

コマンドの簡単な説明

npx (node package executer) でパッケージを実行する
実行するパッケージは tailwindcss
./src/styles.cssを入力（input, -i）とし、./views/styles.cssを出力（output, -o）とする
(入力ファイルの内容を、出力ファイルに書き込む)
入力側のファイル変更を監視（--watch）し、変更があれば出力ファイルも変更する

手順2完了！

localhost:3000にアクセスし、以下の表示ができていればOKです！

できていない方は、特に手順1-2の「ローカルホストの立ち上げ方」ができているかを確認してください。

以下のリポジトリとの比較もしてみてください。

コメントも受け付けてます。

さらに良くなるポイント

今回は、参考記事の関係でviewsというフォルダ名を使用しましたが、 publicの方が好ましいと思います。
途中途中にも書きましたが、.ejsを使っているのは参考記事上の都合です。.htmlでも全く問題はありません。
hello.ejsという命名は、Hello Worldと記載していた頃の名残です。適切に変更すると良いと思います。

記事を書いた経緯

Node.js・Tailwindどちらも、触るたびに忘れてるので備忘録を書きました。

ささっと書いて終わる予定が、思ったよりも時間がかかり・・・
ヌケモレがある可能性があります。マサカリ、受け付けてます_(´ཀ`」 ∠)_

やってみての感想、ストック、いいねも大歓迎です！