Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Use Tailwind Typography to Add Beautiful Typography

For frontend web developers, you will agree with me that CSS can seem challenging to learn, and write, even though it is easy to learn. Nowadays, CSS has advanced, and there has been the emergence of new CSS frameworks and libraries to simplify and enhance the process of styling web pages, making it more efficient to build responsive layouts and easy-to-style web pages. Frameworks like Bootstrap, Material UI, Foundation, Bulma, Tailwind, etc, serve the purpose of styling web pages and helping to create responsive layouts. Including Tailwind Typography!

In this article, we will explore the Tailwind CSS framework and its Typography plugin. By the end of this article, you will be familiar with Tailwind CSS and what it is used for, you will learn how to install the Tailwind typography plugin and use it to provide a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML.

Let’s dive right in 🚀

Tailwind CSS

Introduction to TailwindCSS

Tailwind is a massive collection of tiny low-level CSS utility classes used to build responsive and good-looking websites. Tailwind CSS offers its users classes that they can combine to construct components, distinguishing it from other CSS frameworks.

For example, in traditional CSS or some other CSS frameworks like Bootstrap, we create “card” classes and style those classes in the CSS file. Tailwind gives a better option by providing utility classes that allow you to compose them together for constructing responsive components.

Over time, web developers and designers have embraced Tailwind CSS for its unique utility-first classes, leading to its significant rise in the web development industry.

However, there is an even more powerful tool to enable you to leverage the full potential of Tailwind. Introducing PureCode.ai 10,000+ custom AI-generated components including TailwindCSS, MUI, and CSS3. Explore the full potential of TailwindCSS typography through PureCode.ai

As developers increasingly adopt Tailwind CSS, the demand for plugins to expand their capabilities and simplify various tasks has grown. This, in turn, has broadened the range of solutions available to streamline web development and design processes.

Plugins in Tailwind

Plugins allow developers to extend the functionality of Tailwind CSS by adding new styles programmatically through JavaScript, rather than using traditional CSS.

A Plugin is an extension/add-on that, when installed and run in a program, adds new features/functions to the host program and does not alter the host program itself. That said, we will be looking at the Tailwind typography plugin.

Most times, we make use of Tailwind CSS in building projects; we add classes directly to each vanilla HTML element. There are situations where we can’t apply direct utilities to vanilla HTML markup.

You can use a collection of prose classes provided by the typography Plugin to add aesthetic appeal to CMS or Markdown files they do not have control over.

Tailwind Typography Plugin

The official Tailwind CSS Typography plugin offers a collection of `prose` classes that can be utilized to enhance the aesthetic appeal of HTML content that is not directly controlled, such as HTML rendered from Markdown or retrieved from a CMS. Until now, trying to style an article, well-formatted document, or blog post with Tailwind has been a tedious task that requires a keen eye for typography and a lot of complex custom CSS.

Tailwind typography

If you prefer to learn through video, I have included a YouTube video below:

Text Styling in Tailwind CSS

To customize the typography styles provided by the Tailwind Typography plugin, you can make use of the `tailwind.config.js` file. Inside this file, there is a specific key for the typography plugin that allows you to provide overrides and customize the styles according to your brand requirements.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      ...
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.700'),
            h2: {
              color: theme('colors.gray.800'),
            },
            h3: {
              color: theme('colors.gray.800'),
            },
            strong: {
              color: theme('colors.gray.800'),
            },
            a: {
              color: theme('colors.green.500'),
              '&:hover': {
                color: theme('colors.green.600')
              },
            },
          },
        },
      })
    }
  },
  variants: {},
  plugins: [
    require('@tailwindcss/typography'),
  ]
}

Styling text with TailwindCSS is relatively straightforward. Start by declaring the styles you want to apply to the text using its utility classes on specific individual elements, such as headers (h1, h2, etc.) or paragraphs (p), or you can apply these styles in a global stylesheet. On the other hand, when styling text received from an external source like CMS or markdown fields, we end up using the Tailwind typography Plugin. For Example

<h1 class="text-xl italic">Tailwind Typography Plugin</h1>

text-xl italic

From the code above, the utility class text-xl makes your h1 tag extra large while the italic gives your text an italic style. You can also increase the font size of your text by applying classes like text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, etc. You can also create bold text.

Tailwind Typography Plugin as a Solution to Code Clutter

The Tailwind Typography Plugin addresses code clutter and helps manage typography in your projects. It can be of assistance in the following ways:

  • With the Tailwind typography plugin, You can define a consistent typography style in your project using a set of utility classes like font sizes, line heights, margins, etc. This approach helps you maintain clean and readable code.

  • The tailwind typography plugin offers responsive classes, making it easy to create text that adapts to different screen sizes.

  • Tailwind Typography improves the readability of your code.

Tailwind CSS Installation

There are many methods for installing Tailwind CSS. I will walk you through two methods. These are:

Install Tailwind Using the Tailwind CLI

To install Tailwind CSS using the CLI, there are two ways to achieve this: use either npm or Yarn package managers.

npm is a default package manager for Node.js, and it stands for “Node Package Manager”. It comes pre-installed with Node.Js installations and requires no further configuration to use right away.

To install Tailwind using npm, you have to ensure that you have downloaded and installed Node from the node website. After Node is installed, go to your command prompt(cmd) and type this command: node -v. This command helps you in checking if Node is present on your computer and it also provides you with the version of Node you have installed.

After confirming the installation of Node on your computer, proceed to your code editor in the terminal and execute the following command:

npm init -y

or

yarn init

The code above will create a package.json file. The package.json file keeps track of and manages the dependencies installed in your project, including Tailwind CSS. It keeps track of everything about the libraries you install into a project, ranging from the project name, version, description, author, license, dependencies, etc.

Installing Tailwind CSS

Next, install Tailwind CSS into your project by running either of the following commands:

npm install -D tailwindcss

or

yarn add tailwindcss

After that, run this command to Initialize Tailwind in your project:

npx tailwindcss init

Explanation

The node module also serves as a storage and stores your Tailwind package along with other packages that the Tailwind depends on. The node module provides the necessary tools and functionality to generate and process Tailwind utility classes, configure your project’s design system, and optimize the CSS output.

npm automatically generates and maintains the package-lock.json file to lock the versions of dependencies a project uses, ensuring consistent installation of the same versions across different environments. It also helps manage dependencies in any project installed with npm.

npx tailwindcss init initializes Tailwind CSS into your project. Once you initialize tailwindCSS into your project, it will create a new file named tailwind.config.js. This is where you set up your Tailwind CSS to suit your preferences and project needs. The tailwind.config.js file contains configurations for things like themes, variants, plugins, custom utility classes, custom font families, and so on.

Open the tailwind.config.js created in the project, then paste this:

(tailwind.config.js)

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create two folders with the name src and the other folder public. In the src folder, create a file and name it input.css; in the public folder, create two files with the name output.css and index.html. In the input.css file created in the src folder, paste this:

/* input.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

The code above is a Tailwind directive, which gets all of the Tailwind functionality for you, ranging from the base styles, components, and utilities.

Lastly, in your terminal, run the following command:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

This script above looks out for changes or any utility class added to your project using TailwindCSS and then displays it in the output.css. Then go to your package.json file, locate scripts, and replace it with:

 "scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  }

At this point, you can now start using Tailwind CSS in your project. You can find the installation steps on the Tailwind website

Installation of the Tailwind Typography Plugin

If you are part of the developers who love saving time and do not want to worry about writing codes from scratch, consider using your AI-generated custom components made for Tailwind CSS.

To use the Typography plugin, you will need to install it. All you have to do is go to your terminal and run either of the following commands:

npm install -D @tailwindcss/typography

or

yarn add @tailwindcss/typography

Adding Tailwind Typography Plugin to the Tailwind Config File

Open your tailwind.config.js file and add the Typography plugin to the plugin section like this:

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Using the Tailwind Typography Plugin

After installing the plugin in your project, you can then add the format class to a wrapper element and use any type of inline elements such as headings, paragraphs, images, lists, captions, links, and tables. All of these elements will be automatically styled with proper spacing, font sizing, font-weight, colors, and more based on recommended UI/UX readability and accessibility standards. By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists, and more.

To use the prose class in Tailwind CSS, all we have to do is add it to your HTML tag. For Example;

<div class="mx-auto max-w-md">
  <div class="prose prose-xl prose-a:text-blue-600 prose-headings:underline">
    <h1>What is Purecode</h1>
    With <a href="<https://blogs.purecode.ai/blogs/>">Purecode.ai</a>, you gain access to over 10,000 AI-generated custom components. Our cutting-edge technology allows you to effortlessly search through this vast library to find the perfect custom tag components for your project. No more hours wasted on coding from scratch Scroll Buttons; we provide you with a wealth of resources to accelerate your development process.
  </div>
</div>

Example of underlined headings

Using the `prose` utility class in your project automatically adds the Tailwind typography style to the section where you declared it, just like the code above. We added the prose class to the div; any text or tag found inside the div tag will have the same styling given to the div tag. Example;

<div class="prose prose-xl prose-a:text-blue-600 prose-headings:underline">
  {{markdown}}
</div>

The example above shows how the prose class works in your project. The prose-xl is a utility class used in styling your text’s body font size.

Many classes give your texts various font sizes using the Tailwind typography plugin, and from the example above, you styled your text to be `xl` (extra large).

The utility class prose-a:text-blue-600, styles all the `a` tags (link tags) found in the markdown file, or rich text editor, and in your case, we chose to give it a color of blue and a color strength of 600. You can give it any other color of your choice.

The `prose-headings:underline` utility class, gives an underline style to all the heading tags, ranging from h1, h2, h3, h4, h5, h6.

Modifiers in TailwindCSS Typography Plugin

Modifiers are classes that help to expand or alter the behavior of utility classes. They give more choices and provide options to further customize the styles the utility classes apply to fit project requirements.

How to Style an Anchor Tag using the Color Modifier

We can use the modifiers in so many ways; for example, we can use them in customizing anchor tags (`a` tags), thereby changing their color from a default color to any other color of your choice.

<div class="mx-auto max-w-md">
  <div class="prose prose-a:text-orange-600">
    <h1>What is Purecode</h1>
    With <a href="<https://blogs.purecode.ai/blogs/>">Purecode.ai</a>, you gain access to over 10,000 AI-generated custom components. Our cutting-edge technology allows you to effortlessly search through this vast library to find the perfect custom tag components for your project. No more hours wasted on coding from scratch Scroll Buttons; we provide you with a wealth of resources to accelerate your development process.
  </div>
</div>

From the code above, we added an orange color to the `a` tag located within the p tag.

We style anchor tags to make them easily recognizable on a web page, enhancing the page’s mature and beautiful appearance.

We can use various color element modifiers to style your web page and anchor tag. Some of them are;

style an Anchor Tag using the Color Modifier

// Some examples of tailwindcss modifiers and color strength

colors {
sky: 50; 100; 200; 300; 400; 500; 600, ...,
blue: 50; 100; 200; 300; 400; 500; 600, ...,
indigo: 50; 100; 200; 300; 400; 500; 600, ...,
}

To view more color modifiers, you can find them on the Tailwind web page

Customization options in the tailwind.config.js file

You can also set any custom color of your choice in the tailwind.config.js and then use them in your code. For example;

///Go to your tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  theme: {
    colors: {
      'primary': '#3490DC',
      'secondary': '#E2E8F0',
      'tertiary': '#121063',
    },
  },
}

From the code above, you can set custom colors for your project and then use them directly in your vanilla HTML content. Here is an example of how you can use some of the colors from the code above:

<div class="bg-primary text-red-500 border-secondary">
  <p>For years parents have espoused the health benefits of eating garlic bread with cheese to their children, with the food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for Halloween.</p>
</div>

The code above assigns the background color to primary, sets the text color to red-500, and defines a border color as secondary.

Benefits of the TailwindCSS Typography Plugin

  • Easy to learn and use.

  • Helps avoid code clutter

  • Helps improve code readability

  • Provide custom responsiveness, etc.

What You Have Learned

The Tailwind Typography Plugin provides a convenient solution for managing typographic styles in web development. By using this plugin, you can easily apply predefined typographic styles to your HTML elements, saving time and effort in the process. The plugin covers a wide range of common typographic cases by default, allowing you to focus on fine-tuning the styles to meet your specific requirements.

In addition to simplifying the management of typographic styles, the Tailwind Typography Plugin also helps improve code organization and readability. By encapsulating typographic styles within utility classes, the plugin helps avoid code clutter and promotes a more modular and maintainable codebase. Furthermore, the plugin provides custom responsiveness options, allowing you to easily adapt typographic styles to different screen sizes and devices.

In summary, the Tailwind CSS Typography Plugin offers an easy-to-learn and use solution for managing typographic styles in web development. It helps streamline the development process, improves code organization and readability, and provides flexibility for custom responsiveness.

If you want to learn more about Tailwind CSS typography, I have included a video for you below:

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.