Quickly configure margins and font sizes in Tailwind CSS with a plugin

▶

One of the biggest headaches when working with CSS (and especially with Tailwind) is text formatting. Adjusting sizes, margins, paddings, and hierarchies for headings, paragraphs, lists, or links usually becomes a repetitive process that never seems to be quite perfect.

Tailwind is fantastic for building interfaces, but when it comes to long-form content (blogs, documentation, academies, or admin panels), text becomes a problem. That is exactly where Tailwind Typography comes into play, a plugin that completely changes the way text is handled in Tailwind CSS.

To solve this, if you are using Tailwind, there is an extremely useful package: @tailwindcss/typography. This plugin allows us to configure typographic style almost automatically.

The real problem with formatting text in Tailwind CSS

Why headings and paragraphs lose visual hierarchy

By default, Tailwind applies a very aggressive CSS reset. This means that an <h1>, a <p>, or a <ul> look practically the same if you don't assign classes manually. Each heading needs its size, its margin, its line spacing… and repeating this over and over is inefficient.

In practice, you end up adjusting values "by eye," copying classes between components, and constantly correcting small misalignments.

The effect of the Tailwind reset on text

This reset makes sense for building UI, but not for editorial content. When working with long texts, the lack of visual hierarchy directly affects readability and user experience. In my case, this point was key: styling text by text became an unnecessary mental drain.

What is Tailwind Typography and what is it really for

The @tailwindcss/typography plugin explained simply

@tailwindcss/typography is an official plugin that adds predefined and well-proportioned typographic styles for text-rich content. Its goal is not for you to customize every tag, but quite the opposite: so that you don't have to.

The prose class as a solution for text formatting

The key to the plugin is the prose class. By applying it to a container, Tailwind automatically takes care of:

• Correct hierarchy from <h1> to <h6>
• Proportional margins and paddings
• Balanced font sizes
• Consistent styles for lists, links, quotes, and code blocks

In my experience, prose is not just a class, it is a way to forget about the text formatting problem and focus on the content.

1. How to install and configure Tailwind Typography

To get started, you must install the package as a development dependency. Although it is very common to see it in Laravel projects, it works perfectly in any environment with Tailwind:

$ npm install -D @tailwindcss/typography

Once installed, the plugin gives us access to the prose class. This class is the "magic" that applies proportional and elegant styles to all text content automatically.

Activating the plugin in the project

Next, you activate it in your Tailwind configuration:

// tailwind.config.js
module.exports = {
 plugins: [
   require('@tailwindcss/typography'),
 ],
}

From this moment on, you have the prose class available.

2. How to use the prose class to format text automatically

What styles prose applies to headings and paragraphs

Simply wrap your content:

<article class="prose"> <h1>Main Title</h1> <p>Article content...</p> </article>

Without adding a single extra class, you get balanced and professional typography. When I first tried this, it was quite revealing: everything "just looked right."

Lists, links, code blocks, and other elements

prose also automatically styles:

• Ordered and unordered lists
• Links
• Blockquotes
• Inline code and <pre> blocks

This makes it ideal for technical blogs or documentation.

How to easily change text size with prose-lg, prose-xl and more

Typographic scaling without touching margins or paddings

One of the great advantages of the plugin is proportional scaling. Changing size is as simple as using another class:

• prose-sm
• prose
• prose-lg
• prose-xl
• prose-2xl

This is where you really notice the value of the plugin. In my case, moving from prose to prose-lg allowed me to change the entire reading experience without touching a single CSS rule.

When to use prose-sm or larger sizes

• prose-sm: admin panels or dense layouts
• prose-lg or higher: blogs, academies, prolonged reading

The important thing is that it doesn't just change the font: it also scales spaces and margins, maintaining visual harmony.

Why is a plugin necessary to handle text in Tailwind?

Remember that, by default, Tailwind applies a "reset" that removes all browser styles. This makes an <h1> look exactly like normal text. By applying the prose class, we regain visual hierarchy without having to manually define margins or sizes for each tag.

3. Applying text formatting globally in your application

Instead of modifying every <div> in your application, you can apply the style globally in your base CSS file (for example, base.css). This is ideal if you handle several modules (such as an Academy, a Blog, or an Admin) and want to maintain visual consistency throughout the application.

You can use the @apply directive on the body or on a main container:

/* base.css */ body { @apply prose prose-lg; }

This ensures visual consistency throughout the application.

Advantages in large projects (blog, admin, academy)

After applying this, maintaining the design becomes much simpler. In my experience, the time savings and reduction in manual adjustments are remarkable, especially in projects that grow fast.

4. Customization and Accessibility

The package offers different predefined sizes that you can easily vary, such as prose-sm, prose-base, prose-xl, or prose-2xl.

This feature is excellent for accessibility. You could implement an option where the user chooses a larger text size; to achieve this, you would only have to dynamically change the class (for example, from prose-lg to prose-2xl) and the entire application will adapt instantly, scaling not only the font size but also the spaces and margins proportionally.

Text formatting in Tailwind and accessibility

• How to adapt text size according to the user
  • Thanks to prose variants, it is very easy to offer accessibility options. For example, allowing the user to choose a larger text size by dynamically changing the class.
• Real benefits for reading and user experience
  • This approach improves readability, reduces visual strain, and makes the interface more inclusive without additional technical complexity.

Is it worth using Tailwind Typography vs manual styling?

Fewer classes, less maintenance, better consistency

Compared to styling manually:

• Fewer utility classes
• Less repeated code
• Less visual debt

After using it, going back to formatting text by hand feels unnecessary.

When to use and when not to use prose

Yes, use it:

• Blogs
• Documentation
• Long-form content

No, don't use it:

• Very specific UI components
• Extremely customized layouts

Frequently asked questions about text formatting in Tailwind

• Does Tailwind CSS come with typographic styles by default?
  • No. It applies a complete reset. That's why @tailwindcss/typography is so useful.
• Does prose affect performance?
  • Not significantly. It's just CSS generated at build time.
• Can I customize Tailwind Typography styles?
  • Yes. The plugin is fully configurable from tailwind.config.js.

5. Conclusion: A smarter way to handle text in Tailwind

Text formatting in Tailwind doesn't have to be complicated. With Tailwind Typography and the prose class, you can forget about manually adjusting sizes and spaces and rely on a solid, scalable, and accessible typographic system.

If you work with real content, this plugin stops being optional and becomes an essential tool.

In short, with this package you don't have to worry about defining individual styles for each text tag. You install it, choose the base size that best fits your design, and you have professional typography ready to use anywhere in your project.

Tailwind CSS: Easy formatting add-on with typography