export default {
// ...
theme: {
fontFamily: {
['source-code-pro']: 'var(--font-source-code-pro)',
},
},
// ...
}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>