文档
Remix
Remix
为 Remix 安装和配置 shadcn/ui。
注意： 以下指南适用于 Tailwind v4。如果您正在使用 Tailwind v3，请使用 shadcn@2.3.0。
注意： 本指南适用于 Remix。对于 React Router，请参阅 React Router 指南。
创建项目
首先使用 create-remix 创建一个新的 Remix 项目
pnpm create remix@latest my-app
运行 CLI
运行 shadcn-ui init 命令来设置您的项目
pnpm dlx shadcn@latest init
配置 components.json
系统将询问您几个问题来配置 components.json
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes应用结构
注意：此应用结构仅为建议。您可以将文件放置在您想要的任何位置。
- 将 UI 组件放置在
app/components/ui文件夹中。 - 您自己的组件可以放置在
app/components文件夹中。 app/lib文件夹包含所有实用程序函数。我们有一个utils.ts，我们在其中定义了cn助手函数。app/tailwind.css文件包含全局 CSS。
安装 Tailwind CSS
pnpm add -D tailwindcss@latest autoprefixer@latest
然后我们创建一个 postcss.config.js 文件
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}最后，我们将以下内容添加到我们的 remix.config.js 文件中
/** @type {import('@remix-run/dev').AppConfig} */
export default {
...
tailwind: true,
postcss: true,
...
};将 tailwind.css 添加到您的应用
在您的 app/root.tsx 文件中，导入 tailwind.css 文件
import styles from "./tailwind.css?url"
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: styles },
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]完成
您现在可以开始将组件添加到您的项目中了。
pnpm dlx shadcn@latest add button
上面的命令会将 Button 组件添加到您的项目中。然后您可以像这样导入它
import { Button } from "~/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}