Astro で Tailwind CSS をインストール - Tailwind CSS

採用情報デザインエンジニア + スタッフソフトウェアエンジニア

はじめに
Astro で Tailwind CSS をインストール

プロジェクトを作成する
まだ Astro プロジェクトをセットアップしていない場合は、新しいプロジェクトを作成することから始めます。最も一般的な方法は、 create astro.
ターミナル
```
npm create astro@latest my-projectcd my-project
```
Tailwind CSS をインストールする
astro add コマンドを実行して、tailwindcss と @astro/tailwind の両方をインストールし、tailwind.config.cjs ファイルを生成します。
ターミナル
```
npx astro add tailwind
```
ビルドプロセスを開始する
npm run dev でビルドプロセスを実行します。
ターミナル
```
npm run dev
```
プロジェクトで Tailwind を使い始める
Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定します。
index.astro
```
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
```