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.