组件
注意：本指南适用于 Remix。对于 React Router，请参阅React Router指南。
创建项目
首先，使用create-remix创建一个新的 Remix 项目
pnpm dlx create-remix@latest my-app
运行 CLI
运行shadcn init 命令来设置你的项目
pnpm dlx shadcn@latest init
配置 components.json
你将被问到几个问题以配置components.json
Which color would you like to use as base color? › Neutral应用结构
注意：此应用结构仅供参考。你可以将文件放置在任何你想要的位置。
- 将 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>
)
}