【Node.js】Tailwind CSS の最も簡単な始め方

# 完成イメージ

|    |
| :-: |
|  ![スクリーンショット 2024-06-16 20.46.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/c3c72f39-424b-aebd-4461-935e49bf8e5f.png) |
| Node.js のサーバーから<br>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 フレームワーク<br>CSSプロパティを書かずとも、クラス名でstyleを変更・管理することができる                     |
|   ( ejs )    | HTMLにJavaScriptコードを埋め込めるようになる<br>（JavaScriptコードを埋め込まなければただのHTML）<br>今回は参考記事の都合で使用するが、使わなくてもいい |


# 手順1【Node.jsの設定】

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

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

まずは Node.js をインストールします。
[この記事](https://prog-8.com/docs/nodejs-env)を参考にします。

https://prog-8.com/docs/nodejs-env

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

次に、[この記事](https://prog-8.com/docs/nodejs-new-application)を参考に、静的ページの表示をします。

https://prog-8.com/docs/nodejs-new-application

:::note info
具体的には、以下の操作を行います。
- アプリのフォルダ作成
- `npm init`で`package.json`を生成
- `express` のインストール
:::

:::note warn
以下の項目は必須ではありません。
- `ejs` のインストール
  今回は参考記事に合わせるため、**記事上は`ejs`を使用します**。
- `nodemon` のインストール
  必須ではありません。**記事上は使用せず**進めます。
:::
## 手順1完了！

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

https://github.com/Kohki-Takatama/daisyui_playground/tree/setup_node

# 手順2【Tailwind CSSの導入】

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

```zsh
% npm install -D tailwindcss
```

:::note info
コマンドの簡単な説明
- `npm` (**n**ode **p**ackage **m**aneger) を使い、`install`を行う
- `-D`：開発環境でのみ使用するものである

<details><summary>参考記事</summary>

[ローカルインストール時に -D オプションをつけるべきケース](https://qiita.com/sugurutakahashi12345/items/3cc49926faeaf25d3051#:~:text=%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AB,%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82)

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

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

</details>
:::

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

```zsh
% npx tailwindcss init
```

:::note info
コマンドの簡単な説明
- `npx` (node package executer) でパッケージを実行する
- 実行するパッケージは `tailwindcss`
- `init` (初期化) を行う
:::

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

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

| before| after|
| :-: | :-: |
| ![スクリーンショット 2024-06-16 9.30.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/5b881b6e-b749-e6c1-a36c-d219200eda6d.png)|![スクリーンショット 2024-06-16 9.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/a5385937-450e-3442-e159-e85f659eba75.png)|

以下の3つを作成します。
- `src`フォルダ
- `src`フォルダ下の`styles.css`
- `views`フォルダ下の`styles.css`

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

| before| after|
| :-: | :-: |
| ![スクリーンショット 2024-06-16 17.02.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/7c2287b0-3044-4565-3790-6253cf3204a6.png)|![スクリーンショット 2024-06-16 17.02.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/8230fb76-5829-4063-0a95-7f33b04e411b.png)|

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

```css:src/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

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

| before| after|
| :-: | :-: |
| ![スクリーンショット 2024-06-16 14.14.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/039f589e-27cb-5179-913b-56096a3d4630.png)|![スクリーンショット 2024-06-16 14.14.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/c8cce3ba-2f94-50f4-5dcc-ff4c4e4e2838.png)|

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

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

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

:::note warn

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

[Content Configuration - Tailwind CSS](https://tailwindcss.com/docs/content-configuration#:~:text=be%20more%20specific%3A-,Be%20specific%20with%20your%20content%20patterns,-tailwind.config.js)
:::

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

> 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.

https://tailwindcss.com/docs/content-configuration

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

| before| after|
| :-: | :-: |
| ![スクリーンショット 2024-06-16 20.27.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/151bc374-a1c0-a1b9-a0cb-582d7cc6f66c.png)|![スクリーンショット 2024-06-16 20.27.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/2900afdf-b64f-efeb-5f78-b3823b3e6a32.png)|


```diff_html: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>
```

:::note info
```html
<link rel="stylesheet" href="views/styles.css" />
```
この部分で、CSSファイルを呼び出しています
:::

:::note info
```html
<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'));`という一行を追加します。

```diff_javascript: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);
```

:::note info
htmlからCSS（スタイルシート）を呼び出す際、以下のhtmlの記述によって、`https://mydomain.com/views/styles.css`にアクセスします。
```html
<link rel="stylesheet" href="views/styles.css" />
```
しかし、`/views/styles.css`というアクセスに対するルーティングは設定していません。よって404 not found になります。

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

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

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

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

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

## 手順2完了！
[localhost:3000](localhost:3000)にアクセスし、以下の表示ができていればOKです！

![スクリーンショット 2024-06-16 20.46.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/c3c72f39-424b-aebd-4461-935e49bf8e5f.png)
できていない方は、特に手順1-2の「ローカルホストの立ち上げ方」ができているかを確認してください。

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

https://github.com/Kohki-Takatama/daisyui_playground/tree/setup_tailwind

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

# さらに良くなるポイント

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


# 記事を書いた経緯

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

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

<font color="red">やってみての感想、ストック、いいねも大歓迎です！</font>