Angular で Tailwind CSS をインストール

Angular プロジェクトでの Tailwind CSS のセットアップ。

まだ Angular プロジェクトをセットアップしていない場合は、まず新しい Angular プロジェクトを作成してください。最も一般的な方法は、以下を使用することです。 Angular CLI.

ターミナル

ng new my-project --style css
cd my-project

@tailwindcss/postcss とそのピア依存関係を npm 経由でインストールします。

ターミナル

npm install tailwindcss @tailwindcss/postcss postcss --force

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

.postcssrc.json

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

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

styles.css

@import "tailwindcss";

ng serve でビルドプロセスを実行します。

ターミナル

ng serve

Tailwind のユーティリティクラスを使用してコンテンツをスタイルします。

app.component.html

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