Vite + TypeScript + React + Tailwindcss + shadcn/ui のプロジェクトを作る

1. npmが入っていることを確認します。本記事の環境では10.7.0がインストールされていました。

❯ npm --version
10.7.0

2. npm create vite@latest に react-tsを指定することでTypeScript + Reactにします。

❯ npm create vite@latest my-react-app -- --template react-ts

> npx
> create-vite my-react-app --template react-ts

Scaffolding project in /***/my-react-app...

Done. Now run:

  cd my-react-app
  npm install
  npm run dev

3. 言われた通りに cd して npm install

❯ cd my-react-app/
❯ npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead

added 209 packages, and audited 210 packages in 10s

41 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

本記事の執筆時点でeslint周りの依存がいくつかdeprecatedしてそうですが、一旦進めます

4. tailwindcss入れる & initスクリプト実行
   参照: https://tailwindcss.com/docs/installation

インストール

❯ npm install -D tailwindcss postcss autoprefixer

初期化

❯ npx tailwindcss init -p

5. tailwindcss.config.js の編集
   contentに対してルートのindex.htmlとsrcフォルダ以下のjs, ts, jsx, tsx`ファイルを対象にする設定を追記します

tailwindcss.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

6. `./src/index.cssファイルを編集してtailwindcssの設定を追加します。元から書いてある内容は、tailwindcssを使っていくのであれば不要になりますので削除します。

index.css

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

7. ここまででtailwindcssは使えるようになったはずなのでshadcn/uiの設定をします。まず、tsconfig.json を編集します。元からある内容にcompilerOptionsを追加して下記のようにします。
   参照元: https://ui.shadcn.com/docs/installation/vite

tsconfig.json

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

8. tsconfig.app.json を編集して、元からあるcompilerOptionsにbaseUrlとpathsを追加します。

tsconfig.app.json

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

9. npmで @types/nodeのインストールをしてpathモジュールの型を使えるようにして vite.config.ts の編集をして @/ が　./srcを参照するようにします。

❯ npm i -D @types/node

vite.config.ts

import path from "node:path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

10. shadcn/uiのインストールをします。いろいろ聞かれるので、下記のように設定します。

❯ npx shadcn-ui@latest init

✔ Would you like to use TypeScript (recommended)? … no / yes # TypeScriptを使っているのでyes
✔ Which style would you like to use? › Default # New Yorkはややpaddingが小さいスタイルみたいです。今回はDefaultにします。
✔ Which color would you like to use as base color? › Slate # 好みに応じて。tailwindcssで定義されている色です
✔ Where is your global CSS file? … src/index.css # src/index.cssを指定する必要があります
✔ Would you like to use CSS variables for colors? … no / yes # ライブラリで定義されている色をそのまま使いたいのでnoを指定します
✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) … # デフォルトのままでいいので空欄のままで良いです
✔ Where is your tailwind.config.js located? … tailwind.config.js # デフォルトのままでいいのでそのままEnter押せばいいです
✔ Configure the import alias for components: … @/components # これもデフォルト
✔ Configure the import alias for utils: … @/lib/utils # これも
✔ Are you using React Server Components? … no / yes # 使わないのでnoにします
✔ Write configuration to components.json. Proceed? … yes # yesで完了

11. 準備ができたので Button コンポーネントを入れてみます。

❯ npx shadcn-ui@latest add button

./src/components/ui/button.tsxができているはずです。

12. 使ってみる

./src/App.tsxの中身を下記に丸ごと書き換えます。また、App.cssは使わないので消します。

App.tsx

import { Button } from '@/components/ui/button'
import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <Button onClick={() => setCount(prev => prev + 1)}>Clicked {count} times</Button>
    </div>
  )
}

export default App

npm run devでviteの開発用サーバーを立ち上げます。
うまくいけば http://localhost:5173/ でアクセスすることができます。