🐾

【Next.js v13】@next/fontをTailwindCSSで使う

2022/12/31に公開約1,100字

参考

Next.js 公式
使用するフォントは、パフォーマンスと柔軟性のためにバリアブルフォントがおすすめ

手順

  1. @next/fontをインストールする
    yarn create next-app --experimental-appで作成したプロジェクトであれば不要
yarn add @next/font
  1. pages/_appファイルの設定
    以下はInterフォントの例
// フォントをインポートする
import { Inter } from '@next/font/google'

// サブセットとバリアブル(CSS変数)を定義する
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

export default function MyApp({ Component, pageProps }) {
  return (
   // CSS変数をHTMLドキュメントに追加する
    <main className={`${inter.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}
  1. tailsind.config.jsの設定
// ここの部分と
const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} \*/
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // ここの部分を追加
      fontFamily: {
        sans: ['var(--font-inter)', ...fontFamily.sans],
      },
    },
  },
  plugins: [],
}
  1. yarn buildで適用される

Discussion

ログインするとコメントできます