shadcn/uiのドキュメントのViteの設定方法は間違いなので、エラーになる

shadcn/uiとは

shadcn/uiはReact + Tailwind CSS環境で利用できるコンポーネントライブラリです。

shadcn/uiを使用すれば視覚的に美しいUIコンポーネントと柔軟性の高いデザインのWebサイトが作成できます。

shadcn/ui

shadcn/uiの読み方

shadcn/uiの読み方は「シャドシーエヌ」です。

日本だけでなく欧米でもこの読み方をしている人が多数で、多くの人は語尾の「ユーアイ」の部分までは読みません。

ドキュメント通りにViteを設定するとエラーになる

shadcn/uiの公式サイトにはViteでのインストールおよび設定方法が記載されています。

Install and configure Vite.

しかし、設定の手順について間違っている箇所があるため、ドキュメント通りにインストールしようとしてもエラーになってインストールできません。

shadcn/uiの正しい設定手順

最初にViteを以下のコマンドでインストールしてください。

npm create vite@latest my-shadcn-ui -- --template react-swc-ts
cd my-shadcn-ui
npm install

インストールしたら、tailwindcss postcss autoprefixer @types/nodeをインストールしてください。

npx tailwindcss init -p を実行するとtailwind.config.jsとpostcss.config.jsが生成されます。

npm i -D tailwindcss postcss autoprefixer @types/node
npx tailwindcss init -p

tailwind.config.jsが生成されたらtailwind.config.js内のcontentにTailwind CSSを適用したいファイルのパスを指定してください。

shadcn/uiはTailwind CSSを使用しているので、適用したいファイルのパスを記載しないと適用されません。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  // Tailwindを適用したいファイルのパス
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

また、index.cssにはTailwind CSSを読み込むための以下のコードを書いてください。

shadcn/uiはTailwind CSSを使用しているので、@tailwindでCSSを読み込まないと使用できません。

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

次に '@' のエイリアスを追加するのですが、公式サイトのドキュメントだと「import react from "@vitejs/plugin-react"」となっているため、SWC (stands for Speedy Web Compiler)を使用している場合はそのままコピーしてはいけません。

vite.config.ts

import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

tsconfig.jsonとtsconfig.app.jsonのcompilerOptionsのbaseUrlとpathsを追加します。

間違えてtsconfig.node.jsonを修正しないように注意してください。

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    // 以降は同じ設定
}

最後にnpx shadcn@latest initを実行して、shadcn/uiで使用するスタイルなどの設定を行います。

3つほど聞かれますが、初回はすべてEnterキーを押してデフォルト設定で問題ありません。

npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.js
✔ Updating src/index.css
✔ Installing dependencies.
✔ Created 1 file:
  - src/lib/utils.ts

Success! Project initialization completed.
You may now add components.

index.cssの@tailwindの読み込みが書かれていないと以下のエラーが発生します。

shadcn/uiのインストール手順で、「Validating Tailwind CSS.」のエラーを発生させてしまうケースが多いので、index.cssに@tailwindを書き忘れないよう注意が必要です。

npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✖ Validating Tailwind CSS.
✔ Validating import alias.

No Tailwind CSS configuration found at /Users/workspace/my-shadcn-ui.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/vite to get started.

Buttonコンポーネントを読み込む

ここまで完了したらshadcn/uiが使える状態になっているので、早速Buttonコンポーネントを読み込んで使用してみましょう。

まず、以下のコマンドでButtonコンポーネントを読み込みます。

npx shadcn@latest add button

あとはApp.tsxを以下のように書き換えれば、Buttonコンポーネントの表示を確認できます。

TSX

import { Button } from "@/components/ui/button"

export default function App() {
  return (
    <div>
      <Button onClick={() => alert('Hello!')}>Click</Button>
    </div>
  )
}