Remix

创建项目

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

运行命令行界面

运行 shadcn-ui 初始化命令以设置您的项目

配置 components.json

系统会询问您几个问题来配置 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

应用结构

注意：此应用结构仅供参考。您可以将文件放置在您想要的任何位置。

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

就是这样

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

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

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