🚀

Astro v5 + Tailwind CSS v4 の最小構成スターターキットを公開しました

に公開
2026/06/07
TypeScript
個人開発
Cloudflare
Tailwind CSS
Astro
idea

Astro で新しいプロジェクトを始めるときの、よく使ういつもの設定をまとめたテンプレートを GitHub で公開しました。

https://github.com/ryotahagihara/astro-tailwind-starter

デモサイト: https://astro-tailwind-starter.rhghr.com/

余計なデザインやサンプルコードは含まず、ここから好きな開発を始められます。

ファイル構成

.astro ファイルは 4 つだけです。

  • Header.astro / Footer.astro: 共通コンポーネント
  • Layout.astro: ベースレイアウト
  • index.astro: トップページ

含まれる設定

Tailwind CSS v4

Tailwind CSS v4 では従来の tailwind.config.js が不要になりました。global.css に設定をしています。

@tailwindcss/typography も導入しているので、prose クラスを付けるだけで、文章に基本スタイルが適用されます。

/* src/styles/global.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

Prettier / ESLint

Astro 用プラグインに加え、以下を設定しています。

  • prettier-plugin-tailwindcss: クラス名の自動ソート
  • eslint-plugin-jsx-a11y: アクセシビリティチェック

TypeScript

パスエイリアス @/ を設定しています。深い階層からのインポートもスッキリ書けます。

// Before
import { Header } from "../../../components/Header";

// After
import { Header } from "@/components/Header";

Cloudflare Workers

wrangler.jsonc を設定済みです。以下のコマンドでデプロイできます。

npm run build && npx wrangler deploy

こんな時に

  • プロトタイピング: UI パターンをすぐに形にして検証したい
  • 技術検証: 新しいライブラリの挙動を試したい
  • デモサイト: 検証結果を URL で共有したい

環境構築に時間をかけず、すぐに開発をスタートできます。

使い方

以下のコマンドで、このテンプレートから新規プロジェクトを作成できます。

npm create astro@latest -- --template ryotahagihara/astro-tailwind-starter

GitHub リポジトリの「Use this template」ボタンからも作成できます。

まとめ

Astro でのいつもの設定をまとめて、テンプレートにしました。選択肢の一つとして、ぜひ試してみてください！

https://github.com/ryotahagihara/astro-tailwind-starter

Discussion