# Astro で Tailwind CSS を使う ### Tailwind CSS をインストールします。 Astro プロジェクトで Tailwind CSS を使うには、まず Tailwind CSS をインストールする必要があります。以下のコマンドを使用してインストールします。 ```bash npm i @astrojs/tailwind ``` このコマンドを実行することで、Tailwind CSS の設定ファイル (`tailwind.config.js`) と PostCSS の設定ファイル (`postcss.config.js`) が生成されます。これらの設定ファイルを利用して、プロジェクトで Tailwind を使う準備が整います。 ### astro.config.mjs `astro.config.mjs` ファイルに Tailwind の設定を追加します。 ```js // @ts-check import { defineConfig } from "astro/config"; import tailwind from "@astrojs/tailwind"; export default defineConfig({ integrations: [tailwind()], }); ``` ### tailwind.config.mjs Tailwind CSS の設定ファイルである `tailwind.config.mjs` には、Tailwind の設定内容を記述します。以下の設定例では、Astro プロジェクトに適した Tailwind の設定を示しています。 ```js /** @type {import('tailwindcss').Config} */ export default { content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], theme: { extend: {}, }, theme: { extend: { container: { center: true, padding: { DEFAULT: "24px", sm: "24px", lg: "24px", xl: "24px", }, }, }, screens: { sm: "640px", // => @media (min-width: 640px) { ... } md: "768px", // => @media (min-width: 768px) { ... } lg: "1024px", // => @media (min-width: 1024px) { ... } xl: "1280px", // => @media (min-width: 1280px) { ... } "2xl": "1280px", // => @media (min-width: 1536px) { ... } }, }, plugins: [], }; ``` content: このプロパティは Tailwind がどのファイルでクラスを検索するかを指定します。`./src//*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}` という設定により、Astro の `.astro` ファイルだけでなく、その他のフロントエンド関連ファイル内の Tailwind クラスも処理されるようにしています。 theme: `theme` 内でカスタム設定を追加できます。ここでは、コンテナの設定を拡張しており、デフォルトでコンテナが中央に配置されるようにし、各ブレイクポイントで `24px` のパディングが適用されるように設定しています。 screens: レスポンシブデザイン用のブレイクポイントを設定しています。これにより、プロジェクトで `sm`, `md`, `lg`, `xl`, `2xl` といったカスタムブレイクポイントを使用できます。たとえば、`sm` は `640px` 以上のスクリーンサイズに適用される設定です。 ### Tailwind CSS の使用方法このファイルをページやレイアウトコンポーネントでインポートすることで、Tailwind のスタイルを利用できます。 ```astro --- import "../styles/global.css"; --- Astro with Tailwind CSS

Welcome to Astro with Tailwind CSS

``` このように、Tailwind CSS の設定と使用を組み合わせることで、効率的にスタイルを定義し、プロジェクト全体に統一感のあるデザインを適用できます。Tailwind を使うことで、ユーティリティファーストのアプローチによって迅速にレスポンシブなデザインを構築できるため、開発速度を大幅に向上させることが可能です。