こんにちは。鈴木商店の若林 (@itigoore01) です。
Angular v11.2 から TailwindCSS が簡単に使えるようになりました！
鈴木商店では、昨年末ぐらいから始まったそれほど大きくはないプロジェクトにTailwindCSSを使用してみているのですが、TailwindCSS自体はめちゃくちゃ良いなという感じです。
ただ、そのころは@angular-builders/custom-webpackやngx-build-plusを使用するなりしないといけなかったので、それからすると今回のアップデートで使い始めるまでがかなり楽になりました！
※とはいえv11.2未満でも@ngneat/tailwindという便利ライブラリがあるので、実は導入はそこまで難しくもないです。
現時点ではざっと見た感じ公式のドキュメントにも載っていないですが、Angular公式もちゃんとツイートしている通り使えます。
Angular v11.2 is out now, and includes native @TailwindCSS support!
To enable TailwindCSS, ng update then:
1. Install withnpm install -D tailwindcss/yarn add -D tailwindcss
2. Create a TailwindCSS configuration file in the workspace or project roothttps://t.co/wJP3UBuj45— Angular (@angular) February 11, 2021
上記のツイートにセットアップ方法自体は書いてあるっちゃ書いてあるのですが、プロダクションビルド時に少しハマりポイントがあるので記事にしました。
なお、ここではTailwindCSS自体の使い方などは説明しません。
質問がありましたら、僕のツイッターアカウントに質問頂ければ、わかりそうならお答えします！
TailwindCSSのセットアップ方法 (Angular >= v11.2)
Angular v11.2以上のセットアップ方法です。
TailwindCSSをインストール
まずはTailwindCSSをインストールします。
|
1 2 |
npm i -D tailwindcss@latest |
tailwind.config.jsを設定
インストールが完了したら、TailwindCSSの設定ファイルを生成します。
手で作ってもいいですが、コマンド一発で作成することもできます。
|
1 2 |
npx tailwindcss init |
するとtailwind.config.jsが生成されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// tailwind.config.js module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } |
このままだと、使用していないTailwindCSSのクラスを除外する purge 機能が使えないので、tailwind.config.jsを変更しましょう。
|
1 2 3 4 5 6 7 |
// tailwind.config.js module.exports = { - purge: [], + purge: ['./src/**/*.{html,ts}'], + // もしマルチプロジェクトなプロジェクト構成になっている場合はパスを適宜変更します + // purge: ['./projects/**/*.html'] |
styles.css を修正する
styles.cssに下記の内容を追加します。
|
1 2 3 4 5 |
// styles.css @tailwind base; @tailwind components; @tailwind utilities; |
scssを利用している場合は、下記の内容を追加します。
|
1 2 3 4 5 |
// styles.scss @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; |
動作確認
ここまででTailwindCSSを使えるようになっているはずなので、一旦動作確認をしてみましょう。
classをつけていき、その他諸々やっていけば……
ちゃんとTailwindCSSが効いていることが確認できました。
※上記のソースコードはこちらです。
本番ビルド時にpurgeされるようにする
ここからちょいハマりポイントです。
tailwind.config.jsで purge の設定をしましたが、今のままでは ng build --prodをしても、未使用CSSをパージしてくれず、ビルド後のファイルサイズがめちゃくちゃデカくなってしまいます。
さっきの「にゃんこ一覧」では、ほとんどのTailwindCSSのクラスは使用していないのですが、ビルドすると 2.72MBになってしまいました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$ ng build --prod ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Size styles.691427712b3704554715.css | styles | 2.72 MB main.4ed729624b22de243efc.js | main | 189.82 kB polyfills.d15628b9ba7248669cd9.js | polyfills | 35.73 kB runtime.7b63b9fd40098a2e8207.js | runtime | 1.45 kB | Initial Total | 2.95 MB Build at: 2021-02-15T13:45:23.648Z - Hash: cb0dde13774994258513 - Time: 21773ms Warning: initial exceeded maximum budget. Budget 500.00 kB was not met by 2.46 MB with a total of 2.95 MB. Error: initial exceeded maximum budget. Budget 1.00 MB was not met by 1.95 MB with a total of 2.95 MB. |
これは TailwindCSS がデフォルトでは NODE_ENV=production となっている場合にパージが走るようになっており、Angularも特にprodビルドならパージさせる、みたいなことはしていないため、結局未使用CSSがパージされずファイルサイズが大きくなってしまったのでした。
なので、ng build --prodを次のように実行したり、
|
1 2 |
NODE_ENV=production ng build --prod |
package.jsonに書いちゃうのも手です。
|
1 2 3 4 |
"scripts": { + "build:prod": "NODE_ENV=production ng build --prod" } |
NODE_ENV=productionを設定した状態でビルドをすると、ちゃんとファイルサイズが小さくなっていることを確認できました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$ npm run build:prod ✔ Browser application bundle generation complete. ✔ Copying assets complete. ✔ Index html generation complete. Initial Chunk Files | Names | Size main.4ed729624b22de243efc.js | main | 189.82 kB polyfills.d15628b9ba7248669cd9.js | polyfills | 35.73 kB styles.f8649602a7cc01d21d04.css | styles | 4.56 kB runtime.7b63b9fd40098a2e8207.js | runtime | 1.45 kB | Initial Total | 231.56 kB |
ちなみに、angular-cliにもissueが上がっているので、もしかしたらどこかのバージョンからは、この手順が必要なくなるかもしれません。
おまけ
VS Code拡張機能であるTailwind CSS IntelliSenseはあると便利、というか必須のプラグインです。
もし入れていない人は入れてみましょう。
まとめ
以前に比べてかなり簡単にTailwindCSSを使えるようになっていました！
TailwindCSSはAngular MaterialやBootstrapのようなUIコンポーネントライブラリとは違いますが、それらとの併用も可能で、なによりとても便利です。
これを機会にぜひ使ってみてください！
