Astro のインストールと使用

Astroは、ブログ、マーケティングサイト、eコマースサイトのようなコンテンツ駆動型のウェブサイトを構築するのに最適なウェブフレームワークです。Astroは、新しいフロントエンドアーキテクチャを開拓したことで知られており、他のフレームワークと比較してJavaScriptのオーバーヘッドと複雑さを減らします。もし、読み込みが速く、SEOに優れたウェブサイトが必要なら、Astroが最適です。

現在プロジェクトで使用しているプラグインは以下の通りです。 Tailwind CSS UnoCSS Sass

インストール

公式インストールガイド https://docs.astro.build/en/install-and-setup/

shell

        # pnpm
pnpm create astro@latest
# npm
npm create astro@latest
# yarn
yarn create astro

依存関係の追加

bash

        pnpm astro add tailwind
pnpm add unocss
pnpm add sass

package.json

        "dependencies": {
    "@astrojs/check": "^0.9.3",
    "@astrojs/tailwind": "^5.1.0",
    "astro": "^4.15.6",
    "sass": "^1.78.0",
    "tailwindcss": "^3.4.11",
    "typescript": "^5.6.2",
    "unocss": "^0.62.3"
  }

.astro.config.mjsの設定

.astro.config.mjs

        // @ts-check
import { defineConfig } from 'astro/config';

import tailwind from '@astrojs/tailwind';
import UnoCSS from 'unocss/astro';

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

tailwindcssの設定

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: [],
}

unoの設定

UnoCSS 設定ドキュメント

uno.config.ts

        import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

プロジェクト構造

bash

        |—— .astro
|—— public
|—— src
|   |—— components
|   |—— layouts
|   |—— pages
|   |   |—— index.astro
|   |—— env.d.ts
|—— .gitignore
|—— .astro.config.mjs
|—— package.json
|—— pnpm-lock.yaml
|—— README.md
|—— tailwind.config.mjs
|—— uno.config.ts