remix 框架中安装

安装和配置 Remix。

创建项目

首先，使用 create-remix 创建一个新的 Remix 项目：

pnpm npmyarn bun

 复制代码
pnpm create remix@latest my-app

运行 CLI

运行 shadcn-ui 的初始化命令来设置你的项目：

pnpm npmyarn bun

 复制代码
pnpm dlx shadcn@latest init

配置 components.json

系统会询问你几个问题来配置 components.json：

 复制代码
你想使用什么样的样式？ › New York
你希望使用什么颜色作为基础颜色？ › Zinc
你是否要使用 CSS 变量来管理颜色？ › no / yes

应用结构

注意： 该应用结构仅为建议。你可以根据需要将文件放置在任何位置。

• 将 UI 组件放在 app/components/ui 文件夹中。
• 你的自定义组件可以放在 app/components 文件夹中。
• app/lib 文件夹包含所有工具函数。我们有一个 utils.ts 文件，里面定义了 cn 辅助函数。
• app/tailwind.css 文件包含全局 CSS。

安装 Tailwind CSS

pnpm npmyarn bun

 复制代码
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 npmyarn bun

 复制代码
pnpm dlx shadcn@latest add button

上面的命令会将 Button 组件添加到你的项目中。然后，你可以像这样导入它：

 复制代码
import { Button } from "~/components/ui/button"
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}