next/fontのフォントをTailwind CSSで定義する
Next.js 13 + Tailwind CSSでGoogle Fontsを使おう - Qiita
Next.js 13 + Tailwind CSSでGoogle Fontsを使う方法を簡単にまとめます。 Google Fontsのインポート方法とその使い方 【基礎】とりあえずフォントを適用してみる Next.jsでGoogle Fontsを使うには、next/fo...
qiita.com
tailwind.config.ts
export default {
// ...
theme: {
fontFamily: {
['source-code-pro']: 'var(--font-source-code-pro)',
},
},
// ...
}app/layout.tsx
const sourceCodePro = Source_Code_Pro({
subsets: ['latin'],
weight: ['400'],
variable: '--font-source-code-pro',
})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang='ja' className={`${sourceCodePro.variable}`}>
<body>
<p className="font-source-code-pro font-bold">Hello world.</p>
</body>
</html>
)
}Tailwind CSSを使っている場合は以上のようにした方が良い。次のような className で指定する場合だとVS CodeのTailwind CSS IntelliSenseで補完が効かなくなったりして不便。
<p className={`${sourceCodePro.className} font-bold`}>Hello world.</p>
