Open6
React Router v7 / Tailwind v4 / React 19 / shadcn/uiの組み合わせ
筧剛彰 / Takaaki Kakei背景
- React Router v7 / Tailwind v4 / React 19 / shadcn/uiの組み合わせを試したい
- 調査時点のReact Router v7は、Tailwind v4 and React 19が入る
- 調査時点のshadcn/ui
- React Router v7用のガイド未整備
- Tailwind v4 and React 19の利用はcanary扱い
筧剛彰 / Takaaki Kakeinpx create-react-router@latest . --package-manager pnpm
筧剛彰 / Takaaki Kakeicanary用のコマンドが存在する
pnpm dlx shadcn@canary init
筧剛彰 / Takaaki Kakeiapp.cssに余分なセミコロンが発生したら削除する
筧剛彰 / Takaaki Kakeiコンポーネント追加にも、canary用のコマンドが存在する
pnpm dlx shadcn@canary add button
筧剛彰 / Takaaki Kakeiimport { Button } from "~/components/ui/button";
import { Welcome } from "../welcome/welcome";
import type { Route } from "./+types/home";
export function meta({}: Route.MetaArgs) {
return [
{ title: "New React Router App" },
{ name: "description", content: "Welcome to React Router!" },
];
}
export default function Home() {
return (
<div>
<Welcome />
<Button>Click me</Button>
</div>
);
}
OK
