How to use the TailwindCSS Typography Plugin with Next.js?
by SWHabitation
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
- 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:
1
2
npx create-next-app@latest my-nextjs-app
cd my-nextjs-appInstall Tailwind CSS:
1
2
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initSet up Tailwind: In the tailwind.config.js file, provide the paths to your files:
1
2
3
4
5
6
7
module.exports = {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};Include Tailwind CSS in Your Designs, please make sure your globals include Tailwind.CSS file:
1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;Installing and Configuring the Typography Plugin
The Typography plugin can be used by,
Install the plugin:
1
npm install -D @tailwindcss/typographyTurn on the plugin:
Include it in your tailwind.config.js file's plugins array,
1
2
3
4
5
6
7
module.exports = {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [require('@tailwindcss/typography')],
};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:
1
2
3
4
5
6
7
8
9
const BlogPost = ({ content }) => {
return (
<article className="prose lg:prose-xl">
<div dangerouslySetInnerHTML={{ __html: content }} />
</article>
);
};
export default BlogPost;Want to change the Prose Styles ? tailwind.config.js allows you to change the typographic styles:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
color: '#333',
a: {
color: '#3182ce',
'&:hover': {
color: '#2c5282',
},
},
},
},
},
},
},
};Use the Component:
1
2
3
4
5
6
7
8
9
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;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 <article> tag, it's not compulsory to wrap in the article tag you can use any tag or element you want.
1
2
3
<article class="prose prose-slate">
Any content here…
</article>- 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)
1
2
3
<article class="prose prose-xl">
Any content here…
</article>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:
1
2
3
<article class="prose sm:prose-lg md:prose-xl">
Any content here…
</article>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.
1
2
3
<article class="prose dark:prose-invert">
Any content here…
</article>Now, your website automatically adjusts the setting so that it looks good in dark mode as well.
Tailwind CSS vs. Shadcn: Which Should You Choose for Your Next Project?
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.
