Reactjs 在每页上应用字体NextJS

发布于11月08日

我有一个nextjs应用程序，我在app/layout.tsx上应用了谷歌字体:

问题:这种字体只适用于/，而不适用于其他页面. layout.tsx是不是适用于所有的子元素？

import "styles/global.css";
import {Metadata} from "next";
import {Gabarito} from "next/font/google";

const gabarito = Gabarito({
    weight: ["500", "600", "700", "900"],
    style: ["normal"],
    display: "swap",
    subsets: ["latin"],
});

export default function RootLayout({children}: {children: React.ReactNode}) {
    return (
        <html lang='fr' className={gabarito.className}>
            <body>{children}</body>
        </html>
    );
}

export const metadata: Metadata = {
    title: "...",
    description: "...",
};

推荐答案

Problem :个

此字体仅适用于/，不适用于其他页面.Layout.tsx是否适用于所有 children

Possible Causes :个

Tailwind CSS配置不正确.
缺少此行中的'./pages/**/*.{js,ts,jsx,tsx,mdx}' tailwind.config.js内容密钥.

Solution :个

根据官方文件，

转到您的tailwind.config.js添加更新content密钥(&A)

content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],

同样在你的app/globals.css岁时，别忘了加上:

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js :个

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [

    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {

    },
  },
  plugins: [],
}

100