コピペで簡単！爆速でtailwindcssをNode.jsに導入する方法について

# はじめに
皆さんはどのCSSフレームワークを使われていますか？

有名どころは、Twitter社が作った[BootStrap](https://getbootstrap.com/2.3.2/)でしょうか。

Bootstrapの大きな欠点は、どこかで見たようなサイトに仕上がり、
デザインにオリジナリティが出すことが難しくなります。

そんな中でおすすめしたいのが、今回取り上げる**[Tailwind](https://tailwindcss.com/)**です。

この記事では、Node.jsでtailwindcssを導入する方法をご紹介いたします。

## 今回使用するモジュール
今回使用したモジュールは以下の通りです。
今回採用したテンプレートエンジンは**ejs**となります。
また、ルーティング処理等はすべて**express**を用いています。

```json:package.json
"autoprefixer": "^10.0.1",
"ejs": "^3.1.5",
"express": "^4.17.1",
"postcss": "^8.1.6",
"postcss-cli": "^8.2.0",
"tailwindcss": "^1.9.6"
```

## [STEP1]プロジェクトを作成し、そのディレクトリに移動しましょう
```:ターミナル
mkdir nodejs-tailwindcss
cd nodejs-tailwindcss
```

`mkdir`でファイルを作成します。
`cd`でディレクトリを移動します。

## [STEP2]初期化処理を行う
```:ターミナル
npm init
```
このコードを実行して以下のファイルが作成できればOKです。

```json:package.json
{
    "name": "nodejs-tailwindcss",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    },
    "author": "",
    "license": "ISC",
}
```

## [STEP3]JavaScriptのファイルを作成する
```:ターミナル
touch index.js
```

簡単ですね。
ただindex.jsファイルを作成するだけです。

## [STEP4]必要なモジュールをインストールする
```:ターミナル
npm install express ejs --save
```
この後、tailwindcssなどのモジュールもインストールしますが、
わかりやすさに重きをおくため、先にexpressとejsをインストールします。

こちらを実行することで、package.jsonが以下のようになればOKです。

```json:package.json
{
    "name": "nodejs-tailwindcss",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "ejs": "^3.1.5",
        "express": "^4.17.1",
    }
}
```

## [STEP5]expressでルーティング処理等を記述する
STEP3で作成したindex.jsに以下のコードを記述します。

```javascript:index.js
//モジュールを読み込む
const express = require('express');
const ejs = require('ejs');

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

//テンプレートエンジンとしてejsを用いる（今回はejsを使いません）
app.set('view engine', 'ejs');

//ルーティング処理
app.get('/', (req, res) => {
    res.send("expressを導入しました");
});

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

```

## [STEP6]tailwindcssなど必要なモジュールをインストールする
ようやく本題の`tailwindcss`をここでインストールします。
ついでに`postcss`, `autoprefixer`もインストールします。

この2つは解説します。
`PostCSS`とは、**Node.js製の「CSSツールを作るためのフレームワーク」**です。
`Autoprefixer`は**ベンダープリフィックスを自動で付与するPostCSS製のツール**です。

tailwindcssはPostCSSのプラグインであるため、
最新のCSSをブラウザが理解できるものに変換するツールが必要となります。

ということで、**コマンドラインからPostCSSを扱える**, `postcss-cli`を合わせた４つをインストールしましょう。

```:ターミナル
npm install tailwindcss postcss autoprefixer postcss-cli --save
```

## [STEP7]tailwindcssを使うために必要なファイルを作成する
これが最後のステップです。
何個かファイルを作成しないといけないのでまずはやるべきことを下記に記載します。

- `tailwind.config.js`の作成
- `postcss.config.js`の作成とファイルへの記述
- CSSを格納するフォルダ・ファイルを作成
- `package.json`にCSSをビルドする記述を追加

### tailwind.config.jsの作成
```:ターミナル
npx tailwindcss init
```

このファイルは特にいじる必要はありません。
カスタマイズをする時にでも記載しましょう。
詳しくは[こちら](https://tailwindcss.com/docs/configuration)をご確認ください。

### postcss.config.jsの作成とファイルへの記述
```:ターミナル
touch postcss.config.js
```

こちらを実行すると、postcss.config.jsが作成されます。
こちらのファイルに以下の記述を追加してください。

```javascript:postcss.config.js
module.exports = {
    plugins: [require('tailwindcss'), require('autoprefixer')],
};
```

### CSSを格納するフォルダ・ファイルを作成
```:ターミナル
mkdir public
mkdir public/styles
touch public/styles/tailwind.css
touch public/styles/style.css
```

上から順に、
①`public`フォルダを作成
②publicフォルダ内に`styles`フォルダを作成
③stylesフォルダ内に`style.css`ファイルを作成
④stylesフォルダ内に`tailwind.css`ファイルを作成

④のtailwind.css内には以下の記述を追加してください。

```css:tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### `package.json`にCSSをビルドする記述を追加
`scripts`に新たに記載を追加します。

```json:package.json
{
    "scripts": {
        "css": "postcss public/styles/tailwind.css -o public/styles/style.css"
    },
}
```

以下がpackage.jsonファイルの全体像です。

```json:package.json
{
    "name": "nodejs-tailwindcss",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "css": "postcss public/styles/tailwind.css -o public/styles/style.css"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "autoprefixer": "^10.0.1",
        "ejs": "^3.1.5",
        "express": "^4.17.1",
        "postcss": "^8.1.6",
        "postcss-cli": "^8.2.0",
        "tailwindcss": "^1.9.6"
    }
}
```

それでは最後にビルドをしましょう!

```:ターミナル
npm run css
```

これでtailwind.cssの導入が完了です。

`public/styles/style.css`にCSSが追加されています。

**[次回tailwind.cssを使ってログインページの作成を行います！](https://qiita.com/Ryo9597/items/83473a0d64eb92edb467)**