概要
Angular 17 に 「Tailwind CSS」 を入れる手順の備忘録
「Nx コマンド（モノレポ管理ツール）」を使用するとより簡単に入るが、今回は使わない。
前提
- Angular アプリケーションは構築済みであること
- バージョン
- Node: v20.10.0
- npm: v10.2.3
- Angular: v17.0.7
- Angular CLI: v17.0.7
- Node: v20.10.0
Anguar 17 の環境構築がまだの方はこちら👇
Tailwind CSS とは
「Tailwind CSS（テールウィンド・シーエスエス）」とは、オープンソースの CSS フレームワークです。
※ ちなみに、Tailwind ＝「追い風」「順調」 の意味
"Utility First（ユーティリティファースト）" をコンセプトに設計された CSS のフレームワークで、レスポンシブ対応やオシャレなデザインのスタイル定義がより柔軟に簡単にできる技術です。
主な特徴は、Bootstrap などの他の CSS フレームワークとは異なり、ボタンやテーブルなどの要素に対して、事前定義されたクラスが無い点です。
つまり、Bootstrap の様に、導入時点でボタンやテーブルに、勝手にオシャレなスタイルが当てられることはなく、導入後にちゃんと自分でスタイル定義を書かなければいけません。
button, table, input という単位よりは、text, color, background-color などのもっと細かいパラメータ単位でのスタイル表現が用意されているというイメージです。
例えば、Bootstrap と同じボタンを実装する場合、以下の様に書きます。
ボタン（Bootstrap）
<button class="btn btn-primary" type="button">Primary</button>
ボタン（Tailwind CSS）
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Primary </button>
Tailwind CSS の方がクラス記載が多くなり可読性は下がります。一応、@layer と @apply でまとめることができますが、それでも各場所が HTML ファイルから別の場所に変わるだけなので、CSS ファイルを見るとやっぱり Bootstrap 等に比べて見づらくはなります。
つまり、カスタマイズ性よりもコード量などを重視するなら Bootstrap などの方が便利で、カスタマイズ性を重視するなら Tailwind CSS の方が便利という印象です。
手順
まず、導入したいアプリのプロジェクトディレクトリに移動します。
そこで、Tailwind CSS 関連の node モジュールをインストールします。
npm install -D tailwindcss postcss autoprefixer
初期化して設定ファイルを自動生成させます。
npx tailwindcss init
tailwind.config.js というファイルが出来上がるので、中身を以下の通りに追記します。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
+ "./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
ちなみに、.ts ファイルにしても動作します（tsconfig.json がちゃんと動作すれば）。お好みでどうそ。
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/**/*.{html,ts}',
],
theme: {
extend: {},
},
plugins: [],
}
export default config
もし、Angular のエントリーポイントのソースファイルが入っているディレクトリ名が「src」以外の場合は、その名前に置き換えてください。
既存のグローバルなスタイル設定ファイルに、以下の様に追記する。
（styles.css または styles.scss など）
/* You can add global styles to this file, and also import other style files */
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
グローバルのスタイルシート設定ファイル名が「styles.css（.scss, .sass）」以外の場合は、その名前に置き換えてください。
「@tailwind」に警告が出る可能性がありますが、無視してそのまま進めても大丈夫です（対応方法は一応ありますが、あまり効果的でなかったので今回は割愛します）。
以上で導入は完了🙌✨
サンプルを試用して確認
公式の「Components」のページに行くとたくさんサンプルコードが見れますので、こちらで好きなものを選び、自分のソースコードに貼り付けて表示確認してみましょう。
（鍵マークが付いていないものは無料で見れます）
下記のように、サンプルの右上にあるコピーアイコンを押すと、ソースコードのコピーができます。そのまま貼り付けたら利用可能です。
サンプルの通りに画面に表示されたら成功です！
（実際に貼り付けて表示させた画面がこちら👇）
あとは、好きにスタイルをカスタマイズしましょう！！