Tailwind CSS 集成

想在 TanStack Start 项目中使用 Tailwind CSS？

本指南将帮助你在 TanStack Start 项目中使用 Tailwind CSS。

Tailwind CSS 版本 4（最新）

Tailwind CSS 的最新版本是 4。它的配置方式与 Tailwind CSS 3 有很大不同。在 TanStack Start 项目中用 Vite 或 Rsbuild 设置 Tailwind CSS 4 更简单，也是推荐的做法。

译者注：v4 与 v3 的关键区别

Tailwind v4 不再需要 tailwind.config.js 和 postcss.config.js 这类配置文件，而是改用 CSS 优先（CSS-first）的配置：直接在你的 CSS 文件里用 @import 'tailwindcss' 引入，source('../') 告诉它扫描哪些目录下的类名。类名扫描规则、主题变量等都通过 CSS 原生语法配置。

安装 Tailwind CSS

安装 Tailwind CSS 以及与你构建工具对应的集成。

npm install tailwindcss @tailwindcss/vite

配置 Tailwind CSS

把 Tailwind CSS 添加到你的构建工具配置中。

vite.config.ts

import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import tailwindcss from '@tailwindcss/vite'
import viteReact from '@vitejs/plugin-react'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [tsConfigPaths(), tanstackStart(), viteReact(), tailwindcss()],
})

postcss.config.mjs

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

在你的 CSS 文件中导入 Tailwind

在版本 4 中，你不再使用配置文件，而是创建一个 CSS 文件来配置 Tailwind CSS。可以创建 src/styles/app.css 文件，或任意命名。

/* src/styles/app.css */
@import 'tailwindcss' source('../');

在你的 `__root.tsx` 文件中导入 CSS 文件

在你的 __root.tsx 文件中导入 CSS 文件。

使用 ?url 查询，并确保在文件顶部添加三斜线指令。

// src/routes/__root.tsx
/// <reference types="vite/client" />
// other imports...

import appCss from '../styles/app.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 CSS

现在你可以在项目中的任何地方使用 Tailwind CSS。

// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

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

function Home() {
  return <div className="bg-red-500 text-white p-4">Hello World</div>
}

就这样！现在你可以在项目中的任何地方使用 Tailwind CSS 了 🎉。

Tailwind CSS 版本 3（旧版）

如果你想使用 Tailwind CSS 3，可以参考以下步骤。

安装 Tailwind CSS

安装 Tailwind CSS 及其 peer 依赖。

npm install -D tailwindcss@3 postcss autoprefixer

然后生成 Tailwind 和 PostCSS 配置文件。

npx tailwindcss init -p

配置模板路径

在 tailwind.config.js 文件中，添加所有模板文件的路径。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

把 Tailwind 指令添加到你的 CSS 文件

为 Tailwind 的每一层把 @tailwind 指令添加到你的 src/styles/app.css 文件。

/* src/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

注意

跳到在你的 __root.tsx 文件中导入 CSS 文件，看看如何把 CSS 文件导入到 __root.tsx 中。

Tailwind CSS 集成

On this page