Remix

为 Remix 安装和配置 shadcn/ui。

注意： 本指南针对 Remix。React Router 的相关内容，请参阅 React Router 指南。

创建项目

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


pnpm dlx create-remix@latest my-app

运行 CLI

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


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 文件：

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

最后，在 remix.config.js 文件中添加以下内容：

remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ...
  tailwind: true,
  postcss: true,
  ...
};

将 `tailwind.css` 添加到你的应用

在你的 app/root.tsx 文件中，导入 tailwind.css 文件：

app/root.tsx

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 组件添加到你的项目中。然后你可以这样导入它：

app/routes/index.tsx

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

React Router Astro

创建项目运行 CLI 配置 components.json 应用结构安装 Tailwind CSS 将 tailwind.css 添加到你的应用就这些了