Astro - shadcn-solid

ドキュメント

Astro

Astroをインストールして設定します。

CLI

プロジェクトの作成

create-astro を使って新しいAstroプロジェクトを作成することから始めます。

pnpm create astro@latest

Astroプロジェクトの設定

プロジェクトを設定するために、いくつかの質問が表示されます。

- Where should we create your new project?
./your-app-name
- How would you like to start your new project?
Choose a starter template (or Empty)
- Install dependencies?
Yes
- Do you plan to write TypeScript?
Yes
- How strict should TypeScript be?
Strict
- Initialize a new git repository? (optional)
Yes/No

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

Astro CLIを使ってSolidをインストールします。

pnpx astro add solid

プロジェクトにTailwind CSSまたはUnoCSSを追加する

Tailwind CSS

Tailwind CSSをインストールするには、Astro CLIを使用します。

pnpx astro add tailwind

UnoCSS

UnoCSSを希望する場合は、UnoCSSをインストールします。

pnpm install -D unocss

次に、プロジェクトのルートに uno.config.ts を作成します。

uno.config.ts

import { defineConfig } from 'unocss'
 
export default defineConfig({
  // ...UnoCSS options
})

最後に、Astroの設定ファイルにUnoCSSインテグレーションを追加します。

astro.config.mjs

import { defineConfig } from 'astro/config'
import solidJs from "@astrojs/solid-js"
import UnoCSS from 'unocss/astro'
 
// https://astro.build/config
export default defineConfig({
  integrations: [
    solidJs(),
    UnoCSS(),
  ],
})

パスエイリアス

コンポーネントをインポートしやすくするために、@ エイリアスを使用します。以下のように設定できます。

tsconfig.json

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

CLIを実行する

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

pnpx shadcn-solid@latest init

components.jsonを設定する

components.json を設定するためにいくつかの質問が表示されます。

◆  Which CSS framework would you like to use?
│  ● TailwindCSS
│  ○ UnoCSS
│
◇  Which color would you like to use as base color?
│  Slate
│
◇  Where is your global CSS file?
│  src/styles/app.css
│
◇  Would you like to use CSS variables for colors?
│  Yes
│
◇  Are you using a custom tailwind prefix eg. tw-? (Leave blank if not)
│
│
◇  Where is your tailwind.config.cjs located?
│  tailwind.config.mjs
│
◇  Configure the import alias for components:
│  @/components
│
◇  Configure the import alias for utils:
│  @/lib/utils

globals.cssファイルをインポートする

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

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

AstroのTailwind設定を更新する

Tailwindのベーススタイルが二重に提供されるのを防ぐために、Astroにベーススタイルを適用しないように指示する必要があります。これは、既に独自のglobals.cssファイルに含めているためです。これを行うには、astro.config.mjs内のtailwindプラグインの設定オプションapplyBaseStylesをfalseに設定します。

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

tailwind.config.mjsを更新する

npx shadcn-ui@latest initを実行すると、contentに関するtailwindの設定が上書きされます。これを修正するには、tailwind.config.mjsファイルでmodule.exportsをexport defaultに変更し、contentセクションを以下のコードに置き換えます。

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

以上です

これでプロジェクトにコンポーネントを追加できるようになりました。

npx shadcn-solid@latest add button

これで、Astroでshadcnコンポーネントを以下のようにインポートできます。

---
import { Button } from "@/components/ui/button"
---
 
<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button client:only="solid-js">Hello World</Button>
	</body>
</html>