Astro フレームワークで Tailwind を利用する

2024-07-03

はじめに

Astro プロジェクトへ Tailwind を導入します。

Tailwind インストール

Astro 公式統合機能のセットアップを自動化する astro add コマンドで実施します。

npx astro add tailwind

いくつか質問があるため、 yes を選択します。

✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────────────────────────────╮
 │ npm install @astrojs/tailwind@^5.1.0 tailwindcss@^3.4.4  │
 ╰──────────────────────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...

  Astro will generate a minimal ./tailwind.config.mjs file.

✔ Continue? … yes

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import tailwind from "@astrojs/tailwind";     │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [tailwind()]                  │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes
  
   success  Added the following integration to your project:
  - @astrojs/tailwind

npm run dev で動作を確認すると tailwind が適用され、真っ白なスタイルのないページが表示されます。

変更内容を確認する

tailwind.config.mjs が新規作成されます。

/** @type {import('tailwindcss').Config} */
export default {
 content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 theme: {
  extend: {},
 },
 plugins: [],
}

astro.config.mjs が更新されます。Astro と Tailwind の統合設定が追記されています。

  import { defineConfig } from 'astro/config';
+ import tailwind from "@astrojs/tailwind";

  // https://astro.build/config
- export default defineConfig({});
+ export default defineConfig({
+   integrations: [tailwind()]
+ });

Tailwind を使ってみる

トップページを表示している /pages/index.astro へ以下のコードを追加します。

<div
  class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4"
>
  <div>
   <div class="text-xl font-medium text-black">チャットメッセージ風</div>
   <p class="text-slate-500">こんにちは！ここにメッセージを入力！</p>
  </div>
</div>

メッセージボックス風の表示が確認できました。

Tailwind で記載した css をサイト全体へ反映する

/layouts/Layout.astro ファイルの最下部へ以下の記載を追加します。

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  /* Custom styles */
  body {
    @apply bg-blue-700 text-red-600 min-h-[100svh];
  }
</style>

サイト全体に css が適用されました。

css ファイルを利用する

Tailwind で記述した css ファイルを作成し、サイト全体へ適用します。

astro.config.mjs で applyBaseStyles へ false を設定し、デフォルトで有効になっている Tailwind を無効にします。

備忘録: 自分の場合は、Layout.astro に <style> タグへ記載するとマークダウンファイルからレンダリングした投稿ページ（動的ルーティングで生成）にスタイルが反映されませんでした。しかし、外部ファイルからインポートするとマークダウンから読み込んだページにもスタイルが反映されました。

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind({
    applyBaseStyles: false,
  })]
});

/styles/base.css ファイルを作成します。

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
body {
  @apply bg-blue-100 text-red-900 min-h-[100svh];
}

css ファイルを import します。/layouts/Layout.astro で <style> タグをコメントアウトします。

import "../styles/base.css";
・
・
・
// <style>
//   @tailwind base;
//   @tailwind components;
//   @tailwind utilities;

//   /* Custom styles */
//   body {
//     @apply bg-blue-700 text-red-600 min-h-[100svh];
//   }
// </style>

/styles/base.css がサイト全体へ反映されました。

VS Code 拡張機能の設定

私は VS Code を利用しているため、 Tailwind CSS IntelliSense を設定しています。

以下、紹介されている推奨設定です。

files.associations

files.associations を設定して、常に Tailwind CSS モードで .css ファイルを開くように指示します。デフォルトだと @tailwind にワーニングがでます。

"files.associations": {
  "*.css": "tailwindcss"
}

editor.quickSuggestions

Tailwind のサジェストを有効にします。デフォルトでは、VS Code は JSX 属性値などの文字列コンテンツを編集する際に補完を行いません。

"editor.quickSuggestions": {
  "strings": "on"
}

haihai Blog