0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Vite + React 19 で Tailwind CSS と shadcn/ui を統合する完全ガイド

Posted at

目次


🌟 はじめに

React 19のリリースに伴い、効率的な開発ツールチェインの需要が高まっています。本記事では Vite を使ったReact 19プロジェクトの構築から、Tailwind CSSshadcn/ui の統合、パスエイリアスの設定までを詳細に解説します。


1. React 19 プロジェクトの作成

pnpmを使用してプロジェクトを初期化します:

pnpm create vite --template=react-ts

プロジェクト名を入力後、ディレクトリに移動します。


2. Tailwind CSS の統合

1️⃣ 依存関係のインストール

npm install tailwindcss @tailwindcss/vite

2️⃣ Viteプラグインの設定

vite.config.ts を修正:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

3️⃣ Tailwindの導入

index.css の先頭に追加:

@import "tailwindcss";

4️⃣ プロジェクトの起動

npm run dev

3. パスエイリアスの設定

1️⃣ TypeScript設定の変更

tsconfig.json

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

tsconfig.app.json

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

2️⃣ 型定義のインストール

pnpm add -D @types/node

3️⃣ Viteのエイリアス解決設定

vite.config.ts を更新:

import path from "path"
import { defineConfig } from "vite"

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

4. shadcn/ui コンポーネントライブラリの統合

1️⃣ 初期設定

pnpm dlx shadcn@canary init

プロンプトに従い以下を選択:

  • Tailwind CSSを使用
  • コンポーネントディレクトリを設定
  • ダークモードを有効化

2️⃣ サンプルコンポーネントの追加

pnpm dlx shadcn@canary add sidebar-07

5. プロジェクト構造

my-project/
├── src/
│   ├── components/  # shadcnコンポーネント
│   ├── App.tsx
│   └── index.css
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json

🚀 ベストプラクティス

  • @/components でカスタムコンポーネントをインポート
  • shadcnコンポーネントライブラリの定期的な更新

参考ドキュメント

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?