如何在 Next.js 项目的 tailwind css 中使用谷歌字体

Question

我在 Next.js 中有一个项目，但不知道如何将 Google Font 与 Tailwind CSS 结合使用。

Answer 1

首先，您必须在styles文件夹中的globals.css中添加导入的字体 Url，对于 React.js它将是src文件夹中的index.css。

例如

@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap");

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

然后扩展tailwind.config.js文件中的modules.exports

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        play: ["Play", "sans-serif"],
      },
    },
  },
  plugins: [],
};

最后，您可以在任何地方使用此字体，例如

<h2 className="font-play text-5xl font-bold uppercase">
  Hello World!
</h2>

Answer 2

根据文档，您需要执行此操作才能使其与 TailWind 和 Next13 一起使用

首先导入next/font/google到您的_app.ts. 并创建一个字体变量。

import Layout from '@/components/layout/Layout'
import '@/styles/globals.css'
import type { AppProps } from 'next/app
import { Kalam } from 'next/font/google';

const kalam = Kalam({ 
  subsets: ['latin'],
  weight:["400"],
  variable: '--font-kalam',
});

export default function App({ Component, pageProps }: AppProps) {
  return (

    <main className={`${kalam.variable}`}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </main>
  )
}

然后tailwind.config.js扩展你的字体系列。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        kalam: ['var(--font-kalam)'],
      },
    },
    container: {
      // you can configure the container to be centered
      center: true,
      // or have default horizontal padding
      padding: '1rem',

      // default breakpoints but with 40px removed
      screens: {
        sm: '500px',
        md: '628px',
        lg: '884px',
        xl: '1140px',
        '2xl': '1296px',
      },
    },
  },
  plugins: [],
}

要在代码中使用它，只需添加font-kalam为您的类即可。

请参阅此处的文档。