【Node.js】tailwindcssでログインページを作成する方法

# はじめに
今回は[前回の記事](https://qiita.com/Ryo9597/items/8a8e21c51bc2abb49594)の続きです。
今回はNode.js+EJS+tailwindcssでログインページを作成します。

## 今回のファイル構成
```
nodejs-tailwindcss/
  │
  ├ controllers/
  │　└ pageIndex.js
  │
  ├ puclic/
  │　└ styles/
  │　    └ style.css
  │　    └ tailwind.css
  │
  ├ views/
  │　└ index.ejs
  │
  ├ index.js
  ├ package.json
  ├ postcss.config.js
  ├ tailwind.config.js
```
それでは実際にコードを書いていきましょう！

## 最初に、index.jsを作成しよう
```javascript:index.js
//モジュールを読み込む
const express = require('express');
const ejs = require('ejs')

//コントローラーを読み込む
const pageIndexController = require('./controllers/pageIndex');

//読み込んだexpressモジュールを実体化してインスタンスにする
const app = express();

//テンプレートエンジンとしてejsを用いる
app.set('view engine', 'ejs');

//publicフォルダを使えるようにする
app.use('/public', express.static(__dirname + '/public'));

//ルーティング処理
app.get('/', pageIndexController);

//サーバーを立ち上げる
app.listen(3000, () => {
    console.log('http://localhost:3000');
});

```

以下の記載で、publicフォルダ内のCSSが読み込めるので、
こちらの記述がない場合はCSSを使えません！
なのでこちらの記述は忘れないでくださいね。
[こちらの記事](https://expressjs.com/ja/starter/static-files.html)を参考にしてください！

```javascript
//publicフォルダを使えるようにする
app.use('/public', express.static(__dirname + '/public'));
```

次にルーティング処理を記述する、`pageIndex.js`を作成しましょう。

## 次に、pageIndex.jsを作成しよう
```javascript:pageIndex.js
module.exports = (req, res) => {
    res.render('index');
};
```

これだけしか記載しないので、わざわざファイルを分けるメリットは少ないですが、
運用していく中でファイルを分けておいた方が保守がしやすいので分けるようにしましょう。

## 最後にindex.ejsを作成しよう
```html:index.ejs
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>nodejs-tailwindcss</title>
        <link rel="stylesheet" href="../public/styles/style.css" />
    </head>

    <body>
        <div class="flex flex-col h-screen">
            <div class="bg-gray-100 flex-auto">
                <div class="flex justify-center mt-20">
                    <div class="w-9/12 border bg-white">
                        <div class="my-16 text-center">
                            <h2 class="text-4xl font-bold">ログイン</h2>
                            <form action="/form/login" method="POST" class="mt-12">
                                <div class="mb-3">
                                    <input
                                        type="email"
                                        placeholder="you@gmail.com"
                                        name="email"
                                        class="text-xl w-7/12 p-3 border rounded"
                                    />
                                </div>
                                <div class="mb-5">
                                    <input
                                        type="password"
                                        placeholder="パスワード"
                                        name="password"
                                        class="text-xl w-7/12 p-3 border rounded"
                                    />
                                </div>
                                <div class="mb-5">
                                    <label class="inline-flex items-center">
                                        <input type="checkbox" class="form-checkbox" />
                                        <span class="ml-2 text-sm">ログインデータを保存する</span>
                                    </label>
                                </div>
                                <button
                                    type="submit"
                                    class="mb-3 text-xl w-4/12 bg-blue-800 text-white py-2 rounded hover:opacity-75"
                                >
                                    ログイン
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
```

クラスの記載が多いのでコード自体はめちゃくちゃ長いですが、
書いている内容はシンプルです！

正直たくさんコードを書かなければ覚えられないので、
**[公式サイト](https://tailwindcss.com/)**で大まかに理解した後は、
**[チートシート](https://nerdcave.com/tailwind-cheat-sheet)**を使うのがおすすめです。

私もまだまだ覚えられていないので、
チートシートを手元においてコーディングしています！！