Next has released @next/font solution to integrate with google fonts as well as local fonts. Check out https://nextjs.org/docs/pages/building-your-application/optimizing/fonts for the latest implementation There isn't an official guide on applying custom fonts with TailwindCSS in NextJS site. It took a while for me to experiment but turns out it's quite easy to do it yourself. So following the def
One of the drawback of adopting Tailwind is spotting invalid classnames and combining styles according props. Cn function propose by ByteGrad help merging classnames and accept arguments. https://www.youtube.com/watch?v=re2JFITR7TI