2026-03-19

How to add tailwindcss typography and how to use it

The problem with standard tailwind

Standard installation of tailwind in e.g. astro.js looks something like this:

bun astro add tailwind

And then you just add it to your global.css or wherever you put you styles

@import 'tailwindcss';

That does make it so when you import your global.css in any layout or a specific page you get tailwind working there, but what if you want to write your blogposts in markdown and then render them. That’s where small problems occur, mainly that tailwind by default resets all the styles when injecting preflight into the base layer. And while it’s not normally a problem (cause it’s just how it’s supposed to work - you style on the fly by using classes), it does turn into one when working with markdown. You can’t style in markdown by using standard html/css classes and I guess that would also defeat the point of using it in the first place. That’s why something called @tailwindcss/typography exists.

You just do:

bun astro install @tailwindcss/typography

And after that, you add a plugin to your global.css:

@import 'tailwindcss';
+ @plugin '@tailwindcss/typography';

What now?

Well… that’s a good question, what @tailwind/typography allows us to do is to use a class called prose to style standard html elements:

<div class="prose">
        <p>{frontmatter.pubDate.toString().slice(0, 10)}</p>
        <p><em>{frontmatter.description}</em></p>
        <p>Written by: {frontmatter.author}</p>
        <img
            src={frontmatter.image.url}
            width="300"
            alt={frontmatter.image.alt}
        />
        <slot />
    </div>

In this case <slot /> part is where the markdown input goes into, this snippet is taken from the sourcecode of this very website you are reading currently, and just adding the prose class makes it so the default styling of standard html elements is bearable in rendered markdown content. What about modyfing it?

As shown in example on @tailwind/typography - example shows it’s quite simple.

e.g.

<div class="prose prose-h1:text-xs">
    <h1> this header will be smol </h1>        
</div>

#WIP - writing in progress ;)