Tailwind CSSのインストール方法2 〜Purgeとcssnanoを使って最適化しよう〜

[1.はじめに](#1-はじめに)
[2.Purge機能を使ってみよう](#2-Purge機能を使ってみよう)
[3.cssnano使ってみよう](#3-cssnanoを使ってみよう)
[4.開発環境を構築しよう](#4-開発環境を構築しよう)

#1. はじめに
[前回の投稿](https://qiita.com/YSasago/items/8625892876d45d9d4cf4)でTailwind CSSのインスールはできたので、今回はTailwind CSSを最適化していきます。前回の投稿の続きとなります。前回作成した```dist.css```ですが、まだ最適化されていないので、18万行位あります。そこで、使っているTailwind CSSを最適化していきます。

https://qiita.com/YSasago/items/8625892876d45d9d4cf4

* 最適化前のdist.css
![最適化前のdist.css](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/2c86694d-906f-aa48-b38b-b98e5f5f2dec.png)



#2. Purge機能を使ってみよう
Tailwind CSSを最適化するために、```tailwind.config.js```のpurgeの箇所にTailwind CSSを使用しているファイルの場所を書きます。今回はindex.htmlで使用しているので```["./index.html"]```と書きます。


```javascript:tailwind.config.js
module.exports = {
  purge: ["./index.html"], //←変更した
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

```
package.jsonには、本番環境用はPurgeして小さくしたいので、buildコマンドの箇所に```NODE_ENV=production```を追記します。

```json:package.json
{
  "name": "tailwindcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "NODE_ENV=production postcss styles.css -o dist.css"　←変更した
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.2.7"
  }
}
```

設定は完了したので、もう一度buildしてみます。

```
$ npm run build
```

確認のためにdist.cssを確認すると、633行まで小さくできました。purgeの箇所は正規表現も使えるのでTailwind CSSを使っている場所を書くと良いです。

* 最適化後のdist.css
![最適化後のdist.css](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/bf073415-0ad4-badb-594c-188894c97999.png)

#3. cssnanoを使ってみよう
もっと小さくできるcssnanoを使ってみましょう。まずは下記のコマンドでインスールします。

```
$ npm i -D cssnano
```

```postcss.config.js```に今インストールしたcssnanoを記載します。

```javascript:postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},//どのブラウザでも動くようにしてくれる
    cssnano:{}//　←追加した
  },
}
```

設定は完了したので、もう一度buildしてみます。

```
$ npm run build
```

確認のためにdist.cssを確認すると、圧縮されていることがわかります。

![cssnanoで最適化](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/eea3e6e4-4821-5618-64b8-68632f62b6fd.png)


#4. 開発環境を構築しよう
cssnanoとPurge機能を使うと最適化されますが、開発するときに逐一buildするのが面倒なので、開発はcssnanoとPurge機能を使わないようにコマンドを用意します。今回はdevというコマンドを用意しました。devコマンドでは、NODE_ENV=productionを抜きます。

```json:package.json
{
{
  "name": "tailwindcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "NODE_ENV=production postcss styles.css -o dist.css",
    "dev": "postcss styles.css -o dist.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "cssnano": "^5.0.8",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.2.7"
  }
}

```

次に```postcss.config.js```に環境をcontextで受け取ってcssnanoを使用するか、使用しないかを三項演算子で書きます。

```javascript:postcss.config.js
module.exports = (ctx) => {
  return {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}, //どのブラウザでも動くようにしてくれる
      cssnano: ctx.env === "production" ? {} : false,
    },
  };
};

```

最後にdevコマンドで、ビルドします。

```
$ npm run dev
```

確認のためにdist.cssを確認すると、cssnanoとPurge機能が使われていないことがわかります。
開発は、```$ npm run dev```で、商用環境では、```$ npm run build```を使うと良いです。
Tailwind CSSを小さくできるので軽くなって便利ですね！