如何在TailwindCSS 4中集成npm包Geist作为全局默认字体？

我是Web开发新手，用Vite + React TS + TailwindCSS搭建了项目，想把Geist设为全局默认字体。查了很多文档和帖子，没找到适配TailwindCSS 4的集成方法，怀疑是自己操作有误。

以下是我的关键项目文件：

vite.config.ts #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ],
})

tailwind.config.ts #

import defaultTheme from 'tailwindcss/defaultTheme'
import type { Config } from 'tailwindcss'
import { GeistSans } from 'geist/font/sans'

export default {
  darkMode: 'class',
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)', ...defaultTheme.fontFamily.sans],
      },
    }
}
} satisfies Config;

src/App.tsx #

function App() {

  return (
    <>
      <button className="font-sans border-purple-500 border-2 text-purple-600 bg-white hover:border-transparent hover:text-white hover:bg-purple-600 rounded-full py-2 px-4">Save changes</button>
    </>
 );
}

export default App

src/index.css #

@import "tailwindcss";

@layer base {
  html {
    @apply font-sans;
  }
}

src/main.tsx #

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { GeistSans } from 'geist/font/sans'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <App />
  </StrictMode>
);

浏览器加载的HTML源码 #

<!doctype html>
<html lang="en">
  <head>
    <script type="module">import { injectIntoGlobalHook } from "/@react-refresh"
injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;</script>

    <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx?t=1746957806657"></script>
  </body>
</html>

请问我哪里操作有误？该如何修复？

解决方法 #

问题核心 #

你没有正确将Geist字体的样式规则注入到全局环境中，导致Tailwind配置里的var(--font-geist-sans)变量无定义，字体无法生效。此外，Tailwind配置中的字体写法也需要调整以适配Geist的导入方式。

修复步骤 #

1. 调整Tailwind配置文件

修改tailwind.config.ts，直接使用GeistSans提供的字体族名称，替代变量写法：

import defaultTheme from 'tailwindcss/defaultTheme'
import type { Config } from 'tailwindcss'
import { GeistSans } from 'geist/font/sans'

export default {
  darkMode: 'class',
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        // 将Geist Sans设为默认无衬线字体的首选
        sans: [GeistSans.fontFamily, ...defaultTheme.fontFamily.sans],
      },
    }
  }
} satisfies Config;

2. 在main.tsx中注入Geist字体样式

Geist字体通过JS模块导出，需要主动将其样式规则注入到页面头部。更新src/main.tsx：

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { GeistSans } from 'geist/font/sans'
import './index.css'
import App from './App.tsx'

// 注入Geist字体的样式到HTML头部
const styleElement = document.createElement('style')
styleElement.textContent = GeistSans.style
document.head.appendChild(styleElement)

createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <App />
  </StrictMode>
);

3. 验证修复结果

重启Vite开发服务器后，打开浏览器开发者工具：

• 检查html标签的font-family属性，应显示Geist Sans, system-ui, -apple-system, ...
• 页面中的按钮字体应已切换为Geist风格

备选方案：保留CSS变量写法 #

如果你偏好使用CSS变量，可以在src/index.css中手动定义变量，同时保持Tailwind配置不变：

@import "tailwindcss";

:root {
  --font-geist-sans: 'Geist Sans', sans-serif;
}

@layer base {
  html {
    @apply font-sans;
  }
}

注意仍需执行步骤2，在main.tsx中注入Geist的样式规则。

内容的提问来源于stack exchange，提问作者SidKumarSingh