All language subtitles for 003 Tailwind CSS Typography_en

We're now using the Marked library

to render the Markdown content as HTML.

However, in our page it still doesn't

have all the styles you would expect,

like a bigger font for the headings,

or bullet points for the list items.

To get that HTML styled properly

we'll need to use a Tailwind

plugin called "typography".

This provides a CSS class called "prose"

that we can use to style external HTML,

like the one "rendered from Markdown,

or pulled from a CMS".

We can install this plugin as an npm package,

named "@tailwindcss/typography".

So let's go and install it into our project.

Let me show the "package.json",

with the dependencies.

In the terminal, I'll stop the server

and paste the npm command.

The "-D" option is short for "--save-dev".

I use the long option name, because it's

easier to understand what it does.

Ok, we have the new package installed.

Now we need to configure Tailwind

to use this plugin.

In the configuration file there's

already a "plugins" array.

Here we can require "@tailwindcss/typography",

and this will load the right plugin

when it reads this configuration file.

At this point we can restart the dev server.

And I'll rearrange my windows,

to show the editor and the browser side by side.

We can now add a CSS class

to this "article" element,

called "prose",

that's the one provided by the Typography plugin.

And you can see that it's definitely

applying some styles now.

If anything, the headings are maybe too big,

compared to the rest of the page.

But this shouldn't be a real problem,

because we already have a separate

h1 at the top of our page,

so in the Markdown we shouldn't

use a level 1 heading anyway.

We could have some level 2 headings,

for different sections of the review text.

But you should never have two

h1 elements in the same page.

In fact, now that we tested

the Markdown formatting,

we could write an actual review

for the Stardew Valley game.

What I'll do for now is copy some

text from the Wikipedia entry,

just to have some more realistic content,

but without spending too much time writing it.

Let's split it into two separate paragraph maybe,

and make "Stardew Valley" bold,

so there's some different formatting.

Let's see what this looks like in the page.

It's not exactly a review,

but at least it's a description

of that specific game.

Now, the Tailwind Typography plugin

provides a few more classes

that let us customize the style a little bit.

We can change the gray scale

to "slate" for example.

It's not that different from the default "gray",

but we'll use "slate" everywhere

in our website for consistency.

In fact, we could change the footer as well,

where the text is currently black.

Let's use a shade of slate gray instead,

maybe 500.

This way the footer will be even less prominent,

besides already being in a smaller font.

Now, let's check how this

looks on a larger screen.

It would be nice to make the

text as wide as the image.

We should be able to do that

by setting the maximum width

to "screen-sm", that's effectively 640px,

which is in fact the same "width"

we set on the "img" element.

This way the article text should

be in line with the image above.

Ok, this looks pretty good now.

As always, we could spend a lot

more time tweaking the styles,

but the main point of this video was to show you

how to use the Tailwind Typography plugin

to style HTML content generated from Markdown.