Remix

在 Remix 中安装并配置 shadcn/ui。

注意： 本指南面向 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。

安装 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完成