【 Astro / TailWind CSS 】静的サイトジェネラーター SSG 始めます！

PHPやrubyなどはだいぶ古くなってしまったようで、通常のサイト作成はSSGが主流になっているようですね！？

ということで Astro x TailWind CSSでサイト生成してみます。

macに環境設定 Astro + TailWind
Astro テンプレート生成
TailWind CSSインストールと設定
参考？2025最新？

macに環境設定 Astro + TailWind

homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

node.js

brew install node

% node -v
v24.3.0
% npm -v
11.4.2

という状態で。

Astro テンプレート生成

開発用フォルダ内で astroからテンプレート生成
Use minimal (empty) templateを使用しました

% npm create astro@latest .

> npx
> "create-astro" .


(node:29070) [DEP0190] DeprecationWarning: Passing args to a child process with shell option true can lead to security vulnerabilities, as the arguments are not escaped, only concatenated.
(Use `node --trace-deprecation ...` to show where the warning was created)
 astro   Launch sequence initiated.

      ◼  dir Using . as project directory

  tmpl   How would you like to start your new project?
         Use minimal (empty) template

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         No
      ◼  Sounds good! You can always run git init manually.

 ██████  Project initializing...
         ■ Template copied
         ▶ Dependencies installing with npm...
✔  Project initialized!
         ■ Template copied
         ■ Dependencies installed

  next   Liftoff confirmed. Explore your project!
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! �
╰─────╯

% tree -L 3
.
├── astro.config.mjs
├── node_modules
│   ├── zod-to-ts
│   └── zwitch
├── package-lock.json
├── package.json
├── public
│   └── favicon.svg
├── README.md
├── src
│   └── pages
└── tsconfig.json

moduleがたくさん入っていました。

TailWind CSSインストールと設定

% npx astro add tailwind
✔ Resolving packages...

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

 ╭──────────────────────────────────────────────────────╮
 │ npm i @tailwindcss/vite@^4.1.11 tailwindcss@^4.1.11  │
 ╰──────────────────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...

  Astro will scaffold ./src/styles/global.css.

✔ Continue? … yes

  Astro will make the following changes to your config file:

 ╭ 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()]                  │
 │   }                                           │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes
  
   success  Added the following integration to your project:
  - tailwind
  
   action required  You must import your Tailwind stylesheet, e.g. in a shared layout:

 ╭ src/layouts/Layout.astro ─────────╮
 │ ---                               │
 │ import './src/styles/global.css'  │
 │ ---                               │
 ╰───────────────────────────────────╯

参考？2025最新？

領域	昔（〜2022頃）	今（2024〜2025）
Tailwind 導入方法	`@tailwind base;` 等を手動で記述	`@import "tailwindcss"` だけでOK（プリセット内蔵）
CSSビルド	PostCSSやPurgeCSSを個別に設定	ViteやAstroが自動で最適化（JIT & Tree-shaking）
Astro	ニッチな静的ジェネレータ	Viteベースのモダン主力、企業導入も拡大中
React中心構成	Next.js + CSS Modules 主流	Next.js + Tailwind + shadcn/ui が新標準に
画像最適化	手動圧縮・CDN対応	`astro:assets` や `next/image` で自動最適化
CMS	WordPress or NetlifyCMS	Headless CMS（Contentful / Sanity / Storyblok）主流化
UI設計	Bootstrapテーマベース	Tailwind + コンポーネント思想（UI atomic設計）