tailwindcssとpurgecssで小さめcssの作成

初Qiita:tada:

tailwindcssは、むっちゃカスタマイズしやすいcssフレームワークです。（雑ですいません..）
1からコンポーネントのデザインをコードにするときに書きやすくて個人的に大好きです。
ただ、[公式](https://tailwindcss.com/docs/controlling-file-size)のページにあるように、ファイルサイズがまぁまぁ大きい。
なので、purgeCSSでその問題を軽減して、楽しくフロントを書きたいねというもの。

Nuxt.jsだったら、module版のtailwindcssを導入することでpurgeCSSも自動で追加されるみたいですけど、
なるべく小さい構成でページを作りたかったので、雑にメモを残しますね。

今回はminifyもさせます。

## 環境
macOS Mojave 10.14.6
NodeJS v12.4.0
npm 6.10.2

## パッケージの用意
とりあえず必要な物をいれます。

```zsh
$ npm i -g tailwindcss
$ npm i -g purgecss
$ npm i -g clean-css-cli
```

バージョン確認

```zsh
$ tailwind

   tailwindcss 1.0.6

   Usage:
      tailwind <command> [options]

   Commands:
      help [command]            More information about the command.
      init [file]               Creates Tailwind config file. Default: tailwind.config.js
      build <file> [options]    Compiles Tailwind CSS file.

$ purgecss -v
1.3.0

$ cleancss -v
4.3.0
```

## 設定の作成

各種設定ファイルを作っていきます。
設定内容は場合に応じて書き換えをお願いします。

今回はtailwindの変換前のファイルを`css/tailwind-base.css`に、変換後のファイルを`css/tailwind.css`に配置する設定にしています。
この設定では、実際に本番で利用するcssファイルは最終的に`css/style.css`に出力されます。

```json:package.json
{
  "name": "PROJECT_NAME",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tailwind build css/tailwind-base.css -c tailwind.config.js -o css/tailwind.css",
    "purge": "purgecss --config purgecss.config.js | PYTHONIOENCODING=utf-8 python -c 'import sys, json; print json.load(sys.stdin)[0][\"css\"]' | cleancss > css/style.css"
  },
  "author": "",
  "license": "UNLICENSED"
}
```

```javascript:tailwind.config.js
module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}
```

```javascript:purgecss.config.js
module.exports = {
  content: ['**/*.html'],
  css: ['css/tailwind.css'],
  extractors: [
    {
      extractor: class TailwindExtractor {
        static extract(content) {
          return content.match(/[A-Za-z0-9-_:\/]+/g) || []
        }
      },
      extensions: ['html', 'css']
    }
  ]
}
```

## tailwindのcss生成

ひとまずベースになるcssファイルを作ります。

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

`tailwind.config.js`の内容をcssに反映させます。

```zsh
$ npm run build

> test@1.0.0 build /Users/keyakko/git/test
> tailwind build css/tailwind-base.css -c tailwind.config.js -o css/tailwind.css


   tailwindcss 1.0.6

   🚀 Building... css/tailwind-base.css

   ✅ Finished in 1.05 s
   📦 Size: 480.89KB
   💾 Saved to css/tailwind.css

```

設定が反映されたコードが`css/tailwind.css`に出力されます。

```zsh
$ ls css
tailwind-base.css  tailwind.css
```

## ページ作り
いい感じにつくります。
開発は先ほど生成した`css/tailwind.css`を読み込むとやりやすいです。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="css/tailwind.css">
</head>
<body class="bg-gray-200">
  <div class="container mx-auto">
    <div class="bg-white shadow-xl mt-12 px-12 py-16 rounded">
      <p class="text-gray-900 tracking-wider">HOGEHOGE</p>
    </div>
  </div>
</body>
</html>
```

pythonとかで適当にwebサーバを建てて確認すると、こんな感じで表示されます。
![スクリーンショット 0001-08-06 22.05.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478491/37e8989f-3121-1a0b-c71b-c1818df3b116.png)

## cssを削る
tailwindcssは書きやすいけどでかい。
とりあえず、設定を何も書かない状態でのファイルサイズと行数を確認します。

```zsh
$ ls -lh css/tailwind.css
-rw-r--r-- 1 keyakko 481K Aug  6 21:47 css/tailwind.css

$ wc -l css/tailwind.css
35256 css/tailwind.css
```
481kB、約35000行ですね。


削ってみましょう。

```zsh
$ npm run purge

> test@1.0.0 purge /Users/keyakko/git/test
> purgecss --config purgecss.config.js | PYTHONIOENCODING=utf-8 python -c 'import sys, json; print json.load(sys.stdin)[0]["css"]' | cleancss > css/style.css
```

`css/style.css`に出力されました。

```zsh
$ ls -lh css/style.css
-rw-r--r-- 1 keyakko 2.7K Aug  6 22:23 css/style.css
```
2.7kB

minifyをした後はこんな感じになってます。
<img width="1440" alt="スクリーンショット 0001-08-06 22.29.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478491/16528899-7c05-00d4-79a3-319f0764f075.png">
そこまでhtmlのファイルが大きくないので、cssも削られまくってます。

## おわりに
cssファイルをあまり書かずにhtmlにクラスを足しまくったらどうしてもコードがながーくながーくなる...
何が最適なのかぜんぜんわからないので探り探りでやっていくしか...