Angular 12 にシュッと tailwindcss を導入する

ここ最近、仕事で [tailwindcss](https://tailwindcss.com/) を使うようになりました。ただしインストールや設定もろもろ CSS に明るい同僚がセットアップしてくれたものので、私自身は与えられた環境でぬくぬくと CSS を書いているだけでした。数ヶ月経過したところでようやく「インストールとか設定まわりの知識があったほうが幸せになれるんじゃないか」という事に気づいたので、調べた事をまとめて記事にしました。

tailwindcss のインストールから設定のカスタマイズまで書き起こしたらかなり長くなってしまったので、3 部構成でお伝えします。ナメた感じに見えるタイトルは、長い上に文章が堅苦しくならないよう気をつけていこうという自分への戒めでございます。

記事執筆の環境は下記の通りです。

- @angular/cli v12.2
- node v16.8 (npm v7.21)
- tailwindcss v2.2

それでは tailwindcss のインストールからスタートしてみましょう！

## インストールする

いつもどおり Angular のプロジェクトを作ります。説明のためにスタイルシートのフォーマットは SCSS を選択しておいてください。

```sh
npx -p @angular/cli ng new {PROJECT_NAME}

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS
```

tailwindcss をインストールします。

```sh
npm i -D tailwindcss
```

tailwindcss の設定ファイルを作ります。

```sh
npx tailwindcss init

> Created Tailwind CSS config file: tailwind.config.js
```

このような設定ファイルが生成されます。今はまだ何も書き込まなくて OK です。

```js
// tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

`styles.scss` で tailwindcss のクラスを読み込みます。

```scss
// styles.scss

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```

これで tailwindcss のインストールはシュッと完了しました！ 😊

## CSS を書いてみる

おなじみの Angular スタートアップ画面に tailwindcss で CSS を書いてみましょう。

```sh
npm start -- --open
```

ブラウザの要素の選択を使って、カードのコンテナを選びます。

![](https://user-images.githubusercontent.com/15980747/134786677-a2a88f0c-cf25-4a09-947f-dd69f64f349b.png)

開発者ツールで `bg-` などタイプすると大量のサジェストが現れます。ここから `bg-gray-400` を選んでみます。

![](https://user-images.githubusercontent.com/15980747/134786727-1f0a4d60-e292-453e-b3d7-373e1a75782f.png)

続けて `p-10` `rounded-2xl` を設定するとコンテナの見た目がこのように変わります。

![](https://user-images.githubusercontent.com/15980747/134786680-a7660a71-7687-49b9-aa89-52bb39136fb5.png)


今度は `hover:bg-blue-400` を追加してみましょう。

![](https://user-images.githubusercontent.com/15980747/134787063-2bbcb821-8b46-490b-9dbd-fe6116d71342.png)

カードのコンテナにマウスカーソルを合わせると背景色が青に変わります。

![](https://user-images.githubusercontent.com/15980747/134787067-cbfd2973-8694-4a48-825f-66568c4ceace.png)

CSS のクラス指定を `app.component.html` にコピペすれば、そのままプロダクションコードとして使えます。

```html
<div class="card-container
  bg-gray-400
  p-10 
  rounded-2xl
  hover:bg-blue-400
">
```

アメージング😳！！CSS クラスがシュッと使えるようになりました！ 😊

### ちょっと探検：これらのクラスは何なのか

`bg-gray-400` `p-10` `rounded-2xl` は CSS を下記のように書き足すのと同等です。

```html
<!-- src/app/app.component.html -->

<!-- 429 行目 -->
<!-- いつもなら、card-wrapper-gray のようなクラスを書き足す -->
<div class="card-container card-wrapper-gray">
  <a
    class="card"
    target="_blank"
    ...
```

```scss
// src/app/app.component.scss

// クラスにスタイルを当てるためせっせと CSS を書く
.card-wrapper-gray {
  padding: 2.5rem;
  background: #9CA3AF;
  border-radius: 1rem;
}
```

tailwindcss は膨大な CSS クラス群を持っているため、生の CSS/SCSS を書き足す手間がグッと省けます。背景色、パディング、角丸...などなど、ユーティリティを任意に組み合わせてスタイルをあてがうので tailwindcss のクラス群は「ユーティリティクラス」と呼びます。

`bg-gray-{数値}` は tailwindcss のカラーパレットと連動した背景色です。このクラスを使う事で、自然とアプリ全体が統一された色合いになります。

![](https://user-images.githubusercontent.com/15980747/134789477-e48f6173-d55c-4fa3-8af4-0e32eebde931.png)
https://tailwindcss.com/docs/customizing-colors

`p-{数値}` は tailwindcss に定義されたパディングのクラス群です。このクラスを使う事で、単位のばらつきを抑え一定間隔の刻みで統一する事ができます。

![](https://user-images.githubusercontent.com/15980747/134789654-7d8ae6a6-b15f-4234-a884-a0537b27b415.png)
https://tailwindcss.com/docs/padding


## ビルドする

では次に Angular アプリをビルドしてみましょう。`src` 配下がビルド対象ですよという事を tailwindcss に伝えるために、設定ファイルの `purge` の部分を下記のように書き換えます。

```js
// tailwind.config.js

module.exports = {
  purge: {
    content: ['./src/**/*.{html,ts}'],
  },
  ...
}
```

いつも通りビルドを実行します。

```sh
npm run build
```

`styles.{hash}.css` のファイルサイズは約 2.8 MB になりました。巨大ですね。

![](https://user-images.githubusercontent.com/15980747/134787415-12ea9a00-5a98-4221-b35c-ff1bea2b357b.png)

なぜ巨大になるかと言うと、デフォルトの状態では膨大なユーティリティクラスが全部吐き出されるからです。

![](https://user-images.githubusercontent.com/15980747/134787193-004151f5-e24d-4df2-b2f4-0282a2f83df6.png)

tailwindcss の「パージ」機能を使うと、未使用のユーティリティクラスをビルドから除外する事ができます。設定方法は Node の環境変数 `NODE_ENV` をプロダクションにセットするだけです。

```js
// package.json

  "scripts": {
    "build": "NODE_ENV=production ng build",
```

`package.json` を汚したくない場合はこのような方法でもパージできます。

```js
// tailwind.config.js

module.exports = {
  // purge の部分をこのように書き換える
  purge: {
    content: ['./src/**/*.{html,ts}'],
    enabled: process.env.TAILWIND_MODE === 'build',
  },
```

再びビルドしてみると `styles.{hash}.css` のファイルサイズは約 3.6 KB になりました。パージ前の **2.8 MB** がパージ後に **3.6 KB** です。単位がひとつ下がってます。

```sh
npm run build
```

![](https://user-images.githubusercontent.com/15980747/134787425-699c8024-d7d7-473e-a36d-50f3a2724990.png)

これで Angular の budget のしきい値を超える事なく、シュッとビルドできるようになりました！ 😊

次の記事では設定ファイルの内容を紹介します。
[Angular 12 にシュッと導入した tailwindcss の設定ファイルをチャッと理解する](https://qiita.com/ringtail003/items/44b13d2bc777a68381d0)

## 参考：tailwindcss のビルドコマンド

下記のコマンドを叩くと Angular のビルドを介さずに CSS のみビルドする事ができます。非常に高速なので CSS のビルド結果だけを見たい時に便利です。

```sh
./node_modules/.bin/tailwindcss --output ./dist/hoge.css
```

## 参考：VSCode のエクステンション

VSCode を使っている場合は下記のエクステンションをインストールしておくと便利です。

[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) tailwindcss の CSS クラスをサジェストします。
![](https://user-images.githubusercontent.com/15980747/134789783-70f6458f-2ed3-41e7-9378-8914346ec79b.png)

[Headwind](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind) ショートカットキーで CSS クラスを並べ替えます。
![](https://user-images.githubusercontent.com/15980747/134789785-45957c7f-0776-471b-9d52-aa67b58fccb3.png)

シュッと tailwind の CSS クラスが書けるようになりますね！ 😊