TanStack 框架中安装

安装和配置 TanStack Start。

注意： 本指南适用于 TanStack Start 和 Tailwind v4。如果您使用的是 Tailwind v3，请考虑使用 Basic Starter 模板。TanStack Start 与 shadcn 的 canary 版本兼容。

TanStack Start + Tailwind v4

创建项目

首先，通过遵循 TanStack Start 网站上的 从零构建项目 指南来创建一个新的 TanStack Start 项目。

添加 Tailwind

安装 tailwindcss 及其依赖项。

pnpmnpmyarnbun

pnpm add tailwindcss @tailwindcss/postcss postcss

创建 postcss.config.ts

在项目根目录下创建一个 postcss.config.ts 文件。

postcss.config.ts

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

创建 app/styles/app.css

在 app/styles 目录下创建一个 app.css 文件，并导入 tailwindcss。

app/styles/app.css

@import "tailwindcss" source("../");

导入 app.css

app/routes/__root.tsx

import type { ReactNode } from "react"
import { Outlet, createRootRoute } from "@tanstack/react-router"
import { Meta, Scripts } from "@tanstack/start"
import appCss from "@/styles/app.css?url"
export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        title: "TanStack Start Starter",
      },
    ],
    links: [
      {
        rel: "stylesheet",
        href: appCss,
      },
    ],
  }),
  component: RootComponent,
})

编辑 tsconfig.json 文件

向 tsconfig.json 文件中添加以下代码来解析路径。

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./app/*"]
    }
  }
}

运行 CLI

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

pnpmnpmyarnbun

pnpm dlx shadcn@canary init -d

这将会在项目根目录创建一个 components.json 文件，并在 app/styles/app.css 中配置 CSS 变量。

就这样

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

pnpmnpmyarnbun

pnpm dlx shadcn@canary add button

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

app/routes/index.tsx

import { Button } from "@/components/ui/button"
function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Basic Starter

Basic Starter 模板已经配置了 Tailwind v3。

运行 CLI

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

pnpmnpmyarnbun

pnpm dlx shadcn@canary init -d

这将会在项目根目录创建一个 components.json 文件，并在 app/styles/app.css 中配置 CSS 变量。

就这样

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

pnpmnpmyarnbun

pnpm dlx shadcn@canary add button

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

app/routes/index.tsx

import { Button } from "@/components/ui/button"
function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}