Remix

创建项目

¥Create project

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

¥Start by creating a new Remix project using create-remix:

pnpm create remix@latest my-app

运行 CLI

¥Run the CLI

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

¥Run the shadcn-ui init command to setup your project:

pnpm dlx shadcn@latest init

配置 components.json

¥Configure components.json

你将被问到几个问题来配置 components.json：

¥You will be asked a few questions to configure components.json:

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

应用结构

¥App structure

• 将 UI 组件放在 app/components/ui 文件夹中。

  ¥Place the UI components in the app/components/ui folder.

• 你自己的组件可以放在 app/components 文件夹中。

  ¥Your own components can be placed in the app/components folder.

• app/lib 文件夹包含所有实用函数。我们有一个 utils.ts，我们在其中定义 cn 助手。

  ¥The app/lib folder contains all the utility functions. We have a utils.ts where we define the cn helper.

• app/tailwind.css 文件包含全局 CSS。

  ¥The app/tailwind.css file contains the global CSS.

安装 Tailwind CSS

¥Install Tailwind CSS

pnpm add -D tailwindcss@latest autoprefixer@latest

然后我们创建一个 postcss.config.js 文件：

¥Then we create a postcss.config.js file:

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

最后，我们将以下内容添加到我们的 remix.config.js 文件中：

¥And finally we add the following to our remix.config.js file:

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

将 tailwind.css 添加到你的应用

¥Add tailwind.css to your app

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

¥In your app/root.tsx file, import the tailwind.css file:

import styles from "./tailwind.css?url"
 
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]

就是这样

¥That's it

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

¥You can now start adding components to your project.

pnpm dlx shadcn@latest add button

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

¥The command above will add the Button component to your project. You can then import it like this:

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