使用 TanStack Start 安装 Tailwind CSS

在 TanStack Start 项目中设置 Tailwind CSS。

创建项目

如果还没有 TanStack Start 项目，先创建一个。最常见的做法是使用 Create Start App。

Terminal

npx create-start-app@latest my-project
cd 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

src/routes/index.tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: App,
})

function App() {
  return (

    <h1 className="text-3xl font-bold underline">
      Hello World!
    </h1>
  )
}