SolidStart - shadcn-solid 日本語

ドキュメント

SolidStart

SolidStart のインストールと設定

CLI

プロジェクトの作成

create-solid を使って新しい SolidStart プロジェクトを作成し、Tailwind または UnoCSS を選択することから始めます。

pnpm create solid@latest

パスエイリアス

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

tsconfig.json

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

app.config.ts

import { defineConfig } from "@solidjs/start/config";
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
 
export default defineConfig({
  vite: {
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src")
      }
    }
  }
});

CLI を実行

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

npx 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/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.cjs
│
◇  Configure the import alias for components:
│  @/components
│
◇  Configure the import alias for utils:
│  @/lib/utils

以上です

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

npx shadcn-solid@latest add button

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

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}