Astro で Tailwind CSS をインストール

Astro プロジェクトでの Tailwind CSS の設定。

プロジェクトを作成する

まだ Astro プロジェクトを設定していない場合は、新しい Astro プロジェクトを作成することから始めます。最も一般的な方法は、以下を使用することです。 create astro.

ターミナル

npm create astro@latest my-project
cd my-project

Tailwind CSS をインストール

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

ターミナル

npm install tailwindcss @tailwindcss/vite

Vite プラグインを設定

Astro 設定ファイルで、`@tailwindcss/vite` プラグインを Vite プラグインに追加します。

astro.config.mjs

// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

Tailwind CSS をインポート

`./src/styles/global.css` ファイルを作成し、Tailwind CSS の `@import` を追加します。

global.css

@import "tailwindcss";

ビルドプロセスを開始する

`npm run dev` でビルドプロセスを実行します。

ターミナル

npm run dev

プロジェクトで Tailwind の使用を開始する

新しく作成した CSS ファイルをインポートすることを忘れずに、Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。

index.astro

---
import "../styles/global.css";
---
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>