Next.js+Tailwind에 Google 글꼴 추가

완성 코드

@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');

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

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      // フォントを追加
      fontFamily: {
        reggae: ['Reggae One'],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

import React from 'react'

const About = () => {
  return (
    <>
      <div className="font-reggae">
        About Page.
      </div>
    </>
  )
}

export default About

해설

@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');

module.exports = {
  theme: {
    extend: {
      // フォントを追加
      fontFamily: {
        reggae: ['Reggae One'],
      },
  // ...

<div className="font-reggae">
  About Page.
</div>

참고