导入字体后，tailwind css 不起作用

Question

我正在开发一个 next.js 项目并使用 tailwind。当我将自定义字体导入 globals.css 时出现奇怪的行为

下面是我导入时的图片，字体是正确的，但缺少我设置给div的背景图片

下面是我删除它后的样子，字体类型恢复默认并且背景图像正常工作

知道这是怎么发生的吗？我什至认为这没有意义

Answer 1

尝试从文档中以“nextjs way”导入字体： https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css

您可以添加到您的layout.jsx（替换为您选择的字体）：

import { Inter, Roboto_Mono } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})
 
const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

在你的 tailwind.config.js 中：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

导入字体后，tailwind css 不起作用

问题描述投票：0回答：1

1个回答

最新问题

导入字体后，tailwind css 不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1