Tailwind CSS 集成

那么，你想要在你的 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 文件中导入 CSS 文件，并使用 ?url 查询，并确保在文件顶部添加三斜线指令。

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;

注意

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

Tailwind CSS 第 4 版（最新）

安装 Tailwind CSS

配置 Vite 插件

在 CSS 文件中导入 Tailwind

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

在你的项目中的任何地方使用 Tailwind CSS

Tailwind CSS 第 3 版（旧版）

安装 Tailwind CSS

配置你的模板路径

将 Tailwind 指令添加到你的 CSS 文件中

订阅 Bytes

订阅 Bytes