@unitools/font-plugin

This document provides a comprehensive guide on configuring font families using a custom Tailwind CSS plugin. This configuration is tailored for Expo and Next.js applications, enabling seamless font usage across both frameworks.

Installation

To install the package, run the following command:

npm

npm i @unitools/font-plugin

Yarn

yarn add @unitools/font-plugin

Usage

Expo

You can use the fonts in your Expo app without plugin configuration. You can use the fonts directly in your code.

module.exports = {
  theme: {
    fontFamily: {
      body: "Inter_800Bold",
    },
    extend: {},
  },
  plugins: [],
};

Next.js

You can use the fonts in your Next.js app with the plugin configuration. You can use the fonts directly in your code.

module.exports = {
  theme: {
    fontFamily: {
      body: "Inter_800Bold",
    },
    extend: {},
  },
  plugins: [require("@unitools/font-plugin/next")],
};

You can use like below in your code,

<Text className="font-body">Hello world!</Text>

Plugin working

We assume that you have loaded fonts using CSS variables that correspond to the font family names because the fontFamily property will be split into font-family and font-weight.

Explanation

In your Tailwind CSS configuration, you might define a font family like this:

module.exports = {
  theme: {
    fontFamily: {
      body: "Inter_800Bold",
    },
    extend: {},
  },
  plugins: [],
};

For this to work correctly in a Next.js application, you need to load the font using a CSS variable that matches the font family name. This means defining a CSS variable in your stylesheet that corresponds to the Inter_500Bold font family. For example:

:root {
  --inter: "Inter", sans-serif;
}

By doing this, the plugin can map the font family to the corresponding CSS variable and correctly generate the necessary CSS classes. The Tailwind CSS plugin will then create a class like:

.font-body {
  font-family: var(--inter);
  font-weight: 800;
}

Refer to the diagram below to understand the plugin’s functionality in detail: