DEV Community

Cover image for How to use the TailwindCSS Typography Plugin with Next.js?
swhabitation
swhabitation

Posted on • Originally published at swhabitation.com

2

How to use the TailwindCSS Typography Plugin with Next.js?

It can be difficult to style long-form content, such as blog entries or documentation, when developing a Next.js project. The Tailwind CSS Typography plugin is useful in this situation. It provides responsive typography tools that are pre-styled to give your website a perfect look and feel.

What is a tailwind typography plugin ?

Tailwind typography is the plugin that helps to make your text look great with minimal efforts. The best part of this plugin is that you don't need to write your own css because it comes with ready-to-use styles for your HTML.

Why Use Tailwind CSS Typography?

The Typography plugin simplifies styling long-form content by providing pre-designed classes for text elements.

Advantages

Image description

  • Consistency: Keeps the same style throughout different text components.
  • Usability: Ready to use styles that save time and efforts.
  • Responsiveness: Automatically adjusting text for different screen sizes is called responsiveness.
  • Customisable: It offers flexibility to match your project's branding.

Setting Up Tailwind CSS in Next.js

If you haven't already, configure Tailwind CSS in your Next.js project by following these steps:

Create a Next.js Project:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
Enter fullscreen mode Exit fullscreen mode

Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Set up Tailwind: In the tailwind.config.js file, provide the paths to your files,

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Include Tailwind CSS in Your Designs, please make sure your globals include Tailwind.CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Installing and Configuring the Typography Plugin

The Typography plugin can be used by,

Install the Plugin:

npm install -D @tailwindcss/typography
Enter fullscreen mode Exit fullscreen mode

Turn on the plugin:

Include it in your tailwind.config.js file's plugins array,

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
};
Enter fullscreen mode Exit fullscreen mode

Applying Typography Styles

The prose class for formatting text content is introduced by the Typography plugin. This is how to utilise it:

Create a Blog Component:

const BlogPost = ({ content }) => {
  return (
    <article className="prose lg:prose-xl">
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </article>
  );
};

export default BlogPost;
Enter fullscreen mode Exit fullscreen mode

Want to change the Prose Styles ? tailwind.config.js allows you to change the typographic styles:

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      },
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

Use the Component:

import BlogPost from '../components/BlogPost';

const PostPage = () => {
  const content = `<h1>Hello, World!</h1><p>This is a sample blog post.</p>`;

  return <BlogPost content={content} />;
};

export default PostPage;
Enter fullscreen mode Exit fullscreen mode

Choosing a theme

One of the best features of tailwind typography is the built in themes which helps your content look even better.

Lets deep dive into one example of it,

First wrap your content in tag, it's not compulsory to wrap in the article tag you can use any tag or element you want.

<article class="prose prose-slate">
    Any content here…
</article>
Enter fullscreen mode Exit fullscreen mode
  • prose-gray (default) - Gray
  • prose-slate - Slate
  • prose-zinc - Zinc
  • prose-neutral - Neutral
  • prose-stone - Stone

Here we have used prose-slate for an example, but the default theme class is gray. Always keep in mind that you need to add a prose class when adding a theme modifier.

Type scales

Tailwind typography plugin makes it easy to adjust the overall size of the content based on the different breakpoints.

It includes 5 different typography sizes below listed…

  • prose-sm - 0.875rem (14px)
  • prose-base (default) - 1rem (16px)
  • prose-lg - 1.125rem (18px)
  • prose-xl - 1.25rem (20px)
  • prose-2xl - 1.5rem (24px)
<article class="prose prose-xl">
    Any content here…
</article>
Enter fullscreen mode Exit fullscreen mode

Here we have used prose-xl. Always keep in mind that you need to add a prose class when adding a theme modifier.

If you want to change the font size of your content at various breakpoints, you can also use these size modifiers in combination with Tailwind CSS's breakpoint modifiers:

<article class="prose sm:prose-lg md:prose-xl"> 
         Any content here…
 </article>
Enter fullscreen mode Exit fullscreen mode

Now, you can quickly change the text's size to make it look good in every breakpoint.

Dark mode

To make any website look great in dark mode as well, tailwind typography plugin also provides a dark mode version for each default theme.

It's very simple thanks to the tailwind typography plugin You just need to add dark:prose-invert class to the respective tag or element. Always keep in mind that you need to add a prose class when adding a theme modifier.

<article class="prose dark:prose-invert"> 
         Any content here…
 </article>
Enter fullscreen mode Exit fullscreen mode

Now, your website automatically adjusts the setting so that it looks good in dark mode as well.

Conclusion

Adding Tailwind CSS Typography to your Next.js project improves the content's readability and appearance. You may create a website that looks professional and expedite your productivity by using these instructions.

For developers working on projects with a lot of content, the Tailwind CSS Typography plugin is essential because of its versatility and user-friendliness.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay