Tailwind CSS 集成 | TanStack Start React Docs

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

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

Tailwind CSS 版本 4（最新）

Tailwind CSS 的最新版本是 4。它有一些与 Tailwind CSS 版本 3 有很大不同的配置更改。在 TanStack Start 项目中设置 Tailwind CSS 版本 4 更容易且推荐，因为 TanStack Start 使用 Vite 作为其构建工具。

安装 Tailwind CSS

安装 Tailwind CSS 及其 Vite 插件。

shell

npm install tailwindcss @tailwindcss/vite

npm install tailwindcss @tailwindcss/vite

配置 Vite 插件

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

// 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'

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

// 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'

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

在您的 CSS 文件中导入 Tailwind

您需要创建一个 CSS 文件来配置 Tailwind CSS，而不是版本 4 中的配置文件。您可以通过创建 src/styles/app.css 文件或将其命名为您想要的任何名称来完成此操作。

css

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

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

在您的 __root.tsx 文件中导入 CSS 文件

在您的 __root.tsx 文件中使用 ?url 查询导入 CSS 文件，并确保在文件顶部添加三斜杠指令。

tsx

// 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,
})

// 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。

tsx

// 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>
}

// 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 及其对等依赖项。

shell

npm install -D tailwindcss@3 postcss autoprefixer

npm install -D tailwindcss@3 postcss autoprefixer

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

shell

npx tailwindcss init -p

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.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 文件中。

css

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

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

Note

跳转到在您的 __root.tsx 文件中导入 CSS 文件查看如何在您的 __root.tsx 文件中导入 CSS 文件。