AngularでTailwind CSSを使用する

Tailwind CSSは、HTMLを離れることなくモダンなウェブサイトを構築するために使用できる、ユーティリティファーストのCSSフレームワークです。このガイドでは、AngularプロジェクトでTailwind CSSをセットアップする方法を説明します。

`ng add`を使用した自動セットアップ

Angular CLIは、ng addコマンドを使用してTailwind CSSをプロジェクトに統合する合理的な方法を提供します。このコマンドは、必要なパッケージを自動的にインストールし、Tailwind CSSを設定し、プロジェクトのビルド設定を更新します。

まず、ターミナルでAngularプロジェクトのルートディレクトリに移動し、次のコマンドを実行します:

ng add tailwindcss

このコマンドは以下のアクションを実行します:

ng add tailwindcssを実行した後、コンポーネントのテンプレートでTailwindのユーティリティクラスをすぐに使い始めることができます。

Tailwind CSSを手動でセットアップする場合は、次の手順に従ってください:

まず、まだAngularプロジェクトをセットアップしていない場合は、新しいプロジェクトを作成します。

ng new my-projectcd my-project

次に、Angularプロジェクトのルートディレクトリでターミナルを開き、次のコマンドを実行してTailwind CSSとそのpeer dependencyをインストールします:

次に、プロジェクトのファイルルートに.postcssrc.jsonファイルを追加します。 PostCSSの設定に@tailwindcss/postcssプラグインを追加します。

{  "plugins": {    "@tailwindcss/postcss": {}  }}

Tailwind CSSをインポートする@importを./src/styles.cssに追加します。

@import "tailwindcss";

SCSSを使用している場合は、@useを./src/styles.scssに追加します。

@use "tailwindcss";

これで、コンポーネントのテンプレートでTailwindのユーティリティクラスを使用して、アプリケーションのスタイルを設定できるようになります。ng serveでビルドプロセスを実行すると、スタイルが適用された見出しが表示されるはずです。

たとえば、次の内容をapp.htmlファイルに追加できます:

<h1 class="text-3xl font-bold underline">  Hello world!</h1>