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

Astro –
https://astro.build/

TailWind CSS –
https://tailwindcss.com/

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

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

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最新？

変化が大きいようですね