複雑な設定は@ngneat/tailwindに任せよう
tailwindcssの公式にある方法でAngularにtailwindをインストールしようとすると、設定が複雑すぎて難易度が高いです。今回は複雑な設定もほぼ行ってくれるモジュール@ngneat/tailwindを使って、実際にAngularで使えるようになったので、それについて書いていきたいと思います。
npm: @ngneat/tailwind
@angular/materialを使う場合は先にインストール
Angular Materialを利用する方は@ngneat/tailwindより先に@angular/materialをインストールする必要があります。順序が逆になると、衝突が起こり@angular/materialのインストールに失敗します。
> ng add @angular/material
@ngneat/tailwindをインストール
次のコマンドで@ngneat/tailwindをインストールします。
> ng add @ngneat/tailwind
ただし、angular cliのバージョンが11.1.0未満の場合は@ngneat/tailwindのバージョンを5.2.5に指定する必要があるようです。
> ng add @ngneat/tailwind@5.2.5
すると次のようなメッセージが出てくるので、必要に応じて回答していきます。
? Would you like to enable dark mode? (Use arrow keys)
> none
class
media
特になければ自分はnoneにしています。
? Would you like to use tailwind directives & functions in component styles? (might increase build time) (y/N)
特になければ自分はNにしています。
? What @tailwindcss plugins do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) aspect-ratio
( ) forms
( ) line-clamp
( ) typography
ここでチェックを付けた場合、tailwind.config.jsに選択したプラグインが追加されます。とりあえず自分はすべてチェックしています。
...
plugins: [
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/forms'),
require('@tailwindcss/line-clamp'),
require('@tailwindcss/typography')
],
...
インストールが完了すると、tailwind.config.jsとwebpack.config.jsが新規作成されます。
これで問題がなければさっそくtailwindcssをAngular上で使えるようになっているはずです。
VSCodeにおすすめの拡張機能
htmlにてタグのclassを記述する際に、tailwindで利用できるクラスの候補を表示してくれます。併せて入れておくと便利です。（画像は上のサイトより引用）
使ってみる
検証用にAngularアプリケーションを新規作成し、@angular/materialと@ngneat/tailwindインストールしました。
次のテンプレートapp.component.htmlを例に、tailwindのクラスを追加してみたいと思います。
ちなみに、記述できるtailwindのクラスは公式のドキュメントが見やすいです。cssを読める方は比較的すぐに使えると思います。
まずスタイル無しの状態がこちらです。
<div>
<div>
<div>
<p>
Is it OK?
</p>
</div>
<div>
<div>
<button>
OK
</button>
</div>
<div>
<button>
Cancel
</button>
</div>
</div>
</div>
</div>
実行結果はこんな感じです。
そしてtailwindでスタイルを追加したものがこちらです。
<div class="h-screen w-screen pt-6 bg-gray-50">
<div class="w-48 h-48 mx-auto flex flex-col justify-evenly bg-white shadow overflow-hidden sm:rounded-lg">
<div app-text class="mx-auto text-2xl font-medium">
<p class="w-full h-full align-middle text-center">Is it OK?</p>
</div>
<div class="mx-auto flex flex-row content-center justify-center">
<div class="w-16 h-10 mr-4">
<button class="w-full h-full border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-black">
OK
</button>
</div>
<div class="w-16 h-10">
<button class="w-full h-full border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black">
Cancel
</button>
</div>
</div>
</div>
</div>
実行結果はこちらです。
このように、cssにスタイルを記述することなくhtmlのみでスタイルを表現することができるようになりました。
余談
一見、htmlにすべてのスタイルを記述するのは煩雑になって大変に見えますが、これはコンポーネント設計によって解決できると考えています。（コントロールの見た目に関するスタイルは子コンポーネントに担当させ、marginやflexなどのレイアウトに関するスタイルは親コンポーネントに担当させるという使い方で、これによりレイアウトに関するスタイルを都度cssファイルに記述したり、BEM記法のようにclass名を考えたりする必要がなくなり、作業効率が上がると期待しています）
関連記事: 【Angular】最適なコンポーネント設計について考えてみた: Page-Layout-Presenter構造