インストール手順（Viteプロジェクトの場合）

npm install -D tailwindcss @tailwindcss/vite

vite.config.ts に追加:

import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

CSSファイルに追加:

@import "tailwindcss";

よく使うクラス早見表

用途	クラス例
余白（外側）	m-4 mt-2 mx-auto
余白（内側）	p-4 px-6 py-2
フレックス	flex items-center justify-between gap-4
テキスト	text-lg font-bold text-gray-600
背景色	bg-blue-500 bg-white
角丸・影	rounded-lg shadow-md
レスポンシブ	sm:flex md:text-xl lg:w-1/2
ホバー	hover:bg-blue-600 hover:text-white

よくある詰まりポイント

Q: クラスを書いてもスタイルが当たらない → Tailwindの設定で content に対象ファイルのパスが含まれているか確認してください。.astro や .tsx ファイルも含める必要があります。

Q: 独自のカラーやサイズを使いたい → tailwind.config.js の theme.extend に追加します。例：colors: { brand: '#4f46e5' } とすれば bg-brand text-brand が使えます。

Q: 既存のCSSと共存できる？ → できます。Tailwindのクラスと通常のCSSを混在させても問題ありません。ただしクラスが競合する場合は優先度に注意が必要です。