使用 TanStack Start 安装 Tailwind CSS

在 TanStack Start 项目中设置 Tailwind CSS。

创建项目

如果你还没有设置 TanStack Start 项目，可以先创建一个新的项目。最常见的方法是使用创建 Start 应用。

Terminal

npx create-start-app@latest my-projectcd my-project

安装 Tailwind CSS

通过 npm 安装 @tailwindcss/vite 及其同伴依赖。

Terminal

npm install tailwindcss @tailwindcss/vite

配置 Vite 插件

将 @tailwindcss/vite 插件添加到你的 Vite 配置中。

vite.config.ts

import { tanstackStart } from '@tanstack/react-start/plugin/vite';import { defineConfig } from 'vite';import tsConfigPaths from 'vite-tsconfig-paths';import tailwindcss from '@tailwindcss/vite'export default defineConfig({  plugins: [    tailwindcss()    tanstackStart(),    tsConfigPaths(),  ]});

导入 Tailwind CSS

在 ./src/styles.css 中添加一个 @import 来导入 Tailwind CSS。

src/styles.css

@import "tailwindcss";

在根路由中导入 CSS 文件

在你的 __root.tsx 文件中使用 ?url 查询导入 CSS 文件。

src/routes/__root.tsx

// other imports...import appCss from '../styles.css?url'export const Route = createRootRoute({  head: () => ({    meta: [      // your meta tags and site config    ],    links: [{ rel: 'stylesheet', href: appCss }],    // other head config  }),  component: RootComponent,})

开始在你的项目中使用 Tailwind

开始使用 Tailwind 的工具类来为你的内容添加样式。

src/routes/index.tsx

import { createFileRoute } from '@tanstack/react-router'export const Route = createFileRoute('/')({  component: App,})function App() {  return (    <h1 class="text-3xl font-bold underline">      Hello World!    </h1>  )}