Как заставить оптимизированные шрифты Next.js 13 работать с Tailwind CSS

Несколько недель назад Vercel выпустила Next.js 13, а вместе с ним невероятно полезный инструмент: Оптимизированные шрифты.

Это делает очень простым использование, например, Google Fonts в вашем приложении, с преимуществом самостоятельного размещения файлов. Это означает более быстрое время загрузки, большую конфиденциальность для пользователей и меньше проблем с ручной загрузкой шрифтов.

Вот как использовать функцию «Оптимизированные шрифты» с Tailwind в приложении Next.js 13.

Во-первых, убедитесь, что вы обновились до Next.js 13 (да!)

Изменения в _app.tsx

Теперь перейдите к файлу _app.tsx и импортируйте понравившийся шрифт Google:

import { Lora } from '@next/font/google';

Затем мы создаем экземпляр импортированного шрифта и добавляем к нему некоторые настройки:

const lora = Lora({
  subsets: ['latin'],
});

Теперь шрифт загружен, но как его применить?

К сожалению, Next.js случайным образом переименовывает свойство семейства шрифтов, поэтому мы не можем просто использовать Lora в нашем CSS. И хотя есть возможность автоматически устанавливать имя переменной CSS с помощью Next.js, похоже, это не работает с версией 13.0.2 @next/font. Итак, делаем сами:

По-прежнему в файле _app.tsx добавьте к выходным данным вашей функции следующее:

<style jsx global>
{`
  :root {
    --lora-font: ${lora.style.fontFamily};
  }
`}
</style>

Это вручную определит переменную CSS для нашего шрифта.

Таким образом, это наш готовый к копированию и вставке файл _app.tsx.

import { Lora } from '@next/font/google';
import { AppProps } from 'next/app';
import '@/styles/globals.css';
const lora = Lora({
  subsets: ['latin'],
});
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <style jsx global>
        {`
          :root {
            --lora-font: ${lora.style.fontFamily};
          }
        `}
      </style>
      <Component {...pageProps} />;
    </>
  );
}
export default MyApp;

Настройка файла tailwind.config.js

Наконец, нам нужно перенастроить Tailwind для использования этого шрифта. К счастью, здесь мы также можем использовать нашу переменную CSS.

Просто убедитесь, что ваш файл tailwind.config.js выглядит примерно так:

const { fontFamily } = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        primary: ['var(--lora-font)', ...fontFamily.sans],
        serif: ['var(--lora-font)', ...fontFamily.serif],
      },
    }
  },
  // ...
};

Вот и все!

Я почти уверен, что в ближайшие месяцы этот процесс станет проще, когда функция станет зрелой, поэтому пожалуйста, оставьте комментарий, если вы нашли лучший способ добавить оптимизированные шрифты в Tailwind. Постараюсь сохранить как живой документ :)

Продолжайте кодировать!