Defining typography on your Tailwind CSS project

This blog post shows how to add custom typography to your Tailwind CSS project, with example code.

Tailwind CSS is a popular utility-first CSS framework that offers a wide range of pre-defined classes to make web development faster and more efficient. While Tailwind provides an extensive set of built-in styles, it’s also easy to customize your project with your own fonts and styles. In this blog post, we’ll go through the steps to apply custom fonts and styles on a Tailwind CSS project using the tailwind.config.js file.

Choose Your Fonts

The first step to applying custom fonts on a Tailwind CSS project is to choose the fonts you want to use. There are many websites where you can download free fonts or use a CDN such as: You can also use paid fonts from websites like:

• Font Share
• Google Fonts
• Colletivo
• Type Cooper
• The league of movable type
• Velvetyne

or paid fonts from:

• Linotype
• Atypo
• Pangram Pangram
• Typeheist Once you have chosen your fonts, you need to add them to your project. You can do this by downloading the font files and placing them in a folder within your project’s directory.

Define Custom Font Family

After downloading the font files or using the CDN, you need to define a custom font family in the tailwind.config.js file. Open the file and add the following code to the theme section.first-letter: Here is an example of Lexington Themes talwind.config.js file

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
  theme: {
    fontFamily: {
        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
        mono: ["JetBrains Mono", ...defaultTheme.fontFamily.mono],
      },
  },
};

In this code, “Inter var” and “JetBrains Mono” is the name of the font family you want to use, “Inter var” and “JetBrains Mono” is the name of the font you downloaded or used the CDN, and defaultTheme.fontFamily is the fallback font in case the custom font doesn’t load.

Define Custom Styles

Once you have defined the custom font family, you can define custom styles that use it. You can create a class for each style or add them to existing Tailwind CSS classes. For example, you can add custom styles to the h1 class as follows:

module.exports = {
  theme: {
     fontSize: {
      xs: [
        "0.75rem",
        {
          lineHeight: "1rem",
        },
      ],
      sm: [
        "0.875rem",
        {
          lineHeight: "1.5rem",
        },
      ],
      base: [
        "1rem",
        {
          lineHeight: "1.75rem",
        },
      ],
      lg: [
        "1.125rem",
        {
          lineHeight: "2rem",
        },
      ],
      xl: [
        "1.25rem",
        {
          lineHeight: "2rem",
        },
      ],
      "2xl": [
        "1.5rem",
        {
          lineHeight: "2rem",
        },
      ],
      "3xl": [
        "2rem",
        {
          lineHeight: "2.5rem",
        },
      ],
      "4xl": [
        "2.5rem",
        {
          lineHeight: "3.5rem",
        },
      ],
      "5xl": [
        "3rem",
        {
          lineHeight: "3.5rem",
        },
      ],
      "6xl": [
        "3.75rem",
        {
          lineHeight: "1",
        },
      ],
      "7xl": [
        "4.5rem",
        {
          lineHeight: "1.1",
        },
      ],
      "8xl": [
        "6rem",
        {
          lineHeight: "1",
        },
      ],
      "9xl": [
        "8rem",
        {
          lineHeight: "1",
        },
      ],
    },
    extend: {
      fontFamily: {
        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
          mono: ["JetBrains Mono", ...defaultTheme.fontFamily.mono],
      },
    },
  },
};

In this code, we added custom styles to outsite the theme section to be able ot override Tailwind’s classes. We added a custom font weight and line-height.

Apply Custom Styles

To apply your custom styles to your HTML, use the class attribute and the classes you created or extended in the tailwind.config.js file. For example, to apply the custom styles to an h1 element, add the class attribute as follows:

<h1 class="font-sans">Hello World</h1>
<p class="font-mono">Hello World, again</p>

In this code, you do not need to add the font-sans class because is the default class that Tailwind css uses, but you will have to use font-mono to define the mono font within your HTMl. But no inside <pre> or <code> because the font is already mono

Conclusion

In conclusion, customizing fonts and styles in a Tailwind CSS project using the tailwind.config.js file is straightforward. You can choose your fonts, define a custom font family, define custom styles, and apply them to your HTML elements using the classes you created or extended. With these steps, you can create unique and personalized designs that stand out from the rest.