Docs
アストロ

アストロ

アストロのインストールと構成

プロジェクトの作成

新しいアストロプロジェクトを作成することから始めます。

npm create astro@latest

アストロプロジェクトの構成

プロジェクトの構成に関するいくつかの質問が尋ねられます。

- 新規プロジェクトをどこに作成する必要がありますか?
./your-app-name
- 新規プロジェクトをどのように開始しますか?
スターターテンプレート（または空）を選択してください
- 依存関係をインストールしますか?
はい
- TypeScriptを書く予定はありますか?
はい
- TypeScriptはどれほど厳密にする必要がありますか?
厳密
- 新しいgitリポジトリを初期化しますか（オプション）?
はい/いいえ

プロジェクトにReactを追加する

アストロCLIを使用してReactをインストールします。

npx astro add react

プロジェクトにTailwind CSSを追加する

アストロCLIを使用してTailwind CSSをインストールします。

npx astro add tailwind

tsconfig.jsonファイルの編集

次のコードをtsconfig.jsonファイルに追加してパスを解決します。

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

CLIの実行

shadcn-ui initコマンドを実行してプロジェクトをセットアップします。

npx shadcn-ui@latest init

components.jsonの構成

components.jsonを構成するために、いくつかの質問が尋ねられます。

TypeScriptを使用しますか（推奨）? いいえ/はい
どのスタイルを使用しますか? › デフォルト
ベースカラーとして使用する色を入力してください。 › スレート
グローバルCSSファイルはどこにありますか? › › ./src/styles/globals.css
カラーのCSS変数を使用しますか? › いいえ/はい
tailwind.config.jsはどこにありますか? › tailwind.config.mjs
コンポーネントのインポートエイリアスを構成します。 › @/components
ユーティリティのインポートエイリアスを構成します。 › @/lib/utils
React Server Componentsを使用していますか? › いいえ

globals.cssファイルのインポート

src/pages/index.astroファイルにglobals.cssファイルをインポートします。

---
import '@/styles/globals.css'
---

アストロtailwind構成の更新

Tailwindの基本スタイルを2回適用することを防ぐために、astro.config.mjsのtailwindプラグインのapplyBaseStyles構成オプションをfalseに設定して、アストロに基本スタイルを適用しないようにする必要があります。

export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
  ],
})

tailwind.config.mjsの更新

npx shadcn-ui@latest initを実行すると、コンテンツのtailwind構成が上書きされます。これを修正するには、module.exportsをexport defaultに変更し、contentセクションを次のコードに置き換えてtailwind.config.mjsファイルに追加します。

export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
}

これだけです

コンポーネントをプロジェクトに追加し始められます。

npx shadcn-ui@latest add button

上記のコマンドは、Buttonコンポーネントをプロジェクトに追加します。その後、次のようにインポートできます。

---
import { Button } from "@/components/ui/button"
---
 
<html lang="en">
	<head>
		<title>アストロ</title>
	</head>
	<body>
		<Button>こんにちは世界</Button>
	</body>
</html>