Docs
Remix

Remix

安装和配置 Remix。

创建项目

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

npx create-remix@latest my-app

运行 CLI

运行 shadcn-ui init 命令来设置您的项目：

npx shadcn-ui@latest init

配置 components.json

系统将询问您一些问题以配置 components.json：

是否要使用 TypeScript（推荐）？no / yes
您想使用哪种样式？ › 默认
您想使用哪种颜色作为基本颜色？ › 石板灰
您的全局 CSS 文件在哪里？ › app/tailwind.css
您想将 CSS 变量用于颜色吗？ › no / yes
您的 tailwind.config.js 位于哪里？ › tailwind.config.js
配置组件的导入别名： › ~/components
配置 Utils 的导入别名： › ~/lib/utils
您是否正在使用 React Server Components？ › no

应用程序结构

  • 将 UI 组件放在 app/components/ui 文件夹中。
  • 您可以将自己的组件放在 app/components 文件夹中。
  • app/lib 文件夹包含所有实用程序函数。我们有一个 utils.ts，其中我们定义了 cn 帮助器。
  • app/tailwind.css 文件包含全局 CSS。

安装 Tailwind CSS

npm 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"
 
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]

到此为止

您现在可以开始向您的项目添加组件了。

npx shadcn-ui@latest add button

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

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