# The "prose" class: my content best friend

## The struggle is real

Let's be honest: if you're a developer who would rather spend more time coding the business logic than designing (like me), you celebrated 🎉 big time when CSS frameworks came into our coding lives. I'm sure you have used some of the general-purpose frameworks such as [bootstrap](https://getbootstrap.com/) or [bulma](https://bulma.io/) or the utility-base [Tailwind CSS](https://tailwindcss.com/).

I'm very feliz feliz como una lombriz 🐛-- aka very happy with these time-saving frameworks. However, styling long-form content like blog posts, articles, or documentation can be tedious. You need to consider headings, paragraphs, lists, quotes, code blocks – the list goes on, and if you aren't an expert, you can spend a lifetime! I used to spend hours tweaking CSS to make headings look not terrible and paragraphs consistent and readable.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1745887469511/d59f55e7-018c-460a-a3b4-1f58c7c1008b.jpeg align="center")

### Enter the Hero: The "prose" Class

If you're a fan of Tailwind CSS's utility-first approach, you might have overlooked one of its most powerful plugins: `@tailwindcss/typography`. Specifically, the plugin's `prose` class can be a game-changer for making your web content look polished and professional with minimal effort. The "prose" class simplifies your journey by providing a predefined set of styles that adhere to Tailwind CSS's design principles.

### Why "prose" Is My New Best Friend

**Plays Nice with Markdown:**: One of my clients heavily uses Markdown; the plugin's `prose` class has given its website's content a makeover and made my job much more manageable. If you write in Markdown, `prose` seamlessly works with the HTML output of your favorite Markdown parser.

**Consistent Styling** Say goodbye to the chaos of mismatched fonts and inconsistent formatting; `prose` creates a unified visual language for your content. By applying the "prose" class to any container element, you instantly inherit a well-crafted typography scale that adjusts font sizes, line heights, margins, and other typographic styles.

**It's customizable!** While `prose` defaults are great! You can easily override styles through Tailwind's config file and tweak colors, fonts, and styles to your heart's content.

**It's responsive!** `prose` adapts gracefully to different screen sizes, so your content looks fantastic on mobile phones and desktops.

### When to Use prose

Say no more, the `prose` class is perfect for any Situation *Where Readability Matters* such as: Blog Posts, Articles and Documentation.

### How to Use prose

1. Install the Plugin: Add `@tailwindcss/typography` to your project.
    
2. Configure (Optional): Tailwind's configuration file lets you customize the prose styles to your liking.
    
3. Apply the Class: Simply add the prose class to the container element that wraps your content.
    

```html
<article class="prose">
  <h1>Feliz Feliz como una lombriz! Blog Post</h1>
  <p>Now 100% visual pleasant!</p>
</article>
```

For example, you could write a React component to wrap all your `<div>` or `<article>` tags.

```js
import clsx from 'clsx';

interface ProseWrapperProps {
    className?: string;
    children: React.ReactNode;
}

function ProseWrapper({ className, children }: React.ComponentPropsWithoutRef<'div'> & ProseWrapperProps) {
    const wrapperClasses = clsx('prose', className);

    return (
        <div className={wrapperClasses}>
            {children}
        </div>
    );
}

export default ProseWrapper;
```

Adding the class `prose` to your content's website adjusts font sizes and line heights for easy reading, adds the right amount of spacing between elements, styles headings, lists, blockquote, and code blocks.

**There is more!** The "prose" class comes in different sizes, like a perfect t-shirt:

* `prose-sm`: For a more intimate, cozy read
    
* `prose-lg`: When you want your words to stand tall
    
* `prose-xl`: For making a big impression
    
* `prose-2xl`: When you need your text to be the star of the show
    

**Wrapping Up** The `prose` class from `@tailwindcss/typography` is the secret sauce that'll make your content shine 💫. It's easy to use, powerful, and will make your typography look so good,