SSR な Astro + Tailwind の環境構築

npm 環境は前提

1. 素の Astro を構築
$ npm create astro@latest
2. Tailwind をインストール
$ npx astro add tailwind
3. Prettier をインストール
$ npm install --save-dev prettier prettier-plugin-astro
/** @type {import("prettier").Config} */ module.exports = { plugins: ["prettier-plugin-astro"], overrides: [ { files: "*.astro", options: { parser: "astro", }, }, ], };
prettier.config.cjs
{ ... "scripts": { ... "format": "prettier --ignore-path .gitignore --write './**/*.{ts,astro}'", } ... }
package.json
4. esLint をインストール
$ npm install --save-dev eslint eslint-plugin-astro @typescript-eslint/parser
module.exports = { extends: [ "eslint:recommended", 'plugin:@typescript-eslint/recommended', 'plugin:astro/recommended', ], parserOptions: { ecmaVersion: "latest", sourceType: "module", project: "./tsconfig.json", }, globals: { astroHTML: true, }, overrides: [ { files: ["*.ts"], parser: "@typescript-eslint/parser", }, { files: ['*.astro'], parser: 'astro-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser', extraFileExtensions: ['.astro'], }, }, ], };
.eslintrc.cjs
{ ... "scripts": { ... "lint": "eslint --fix 'src/**/*.{ts,astro}'", } ... }
package.json
5. SSR を有効にする
$ npx astro add node
import { defineConfig } from "astro/config"; import node from "@astrojs/node"; import tailwind from "@astrojs/tailwind"; // https://astro.build/config export default defineConfig({ integrations: [tailwind()], output: "server", adapter: node({ mode: "standalone", }), });
astro.config.mjs

参考