Okay, let's continue and let's work on the readme container, which houses the markdown for the readme, which gets rendered into vanilla HTML. So to style that, we'll be making use of the Tailwind CSS typography plugin, which gives you some defaults for vanilla HTML that you don't control, like HTML rendered from markdown. So first thing we want to do is render the readme into HTML. So like I said, I am making use of Nuxt.js here, and the plugin I found to do this was this one here. So whatever library you're using, just search for a markdown plugin that does just this, and it should convert your markdown files into HTML. And I already have a markdown file in my code, I just ripped it from the Tailwind readme,

and it should convert your markdown files into HTML. And I already have a markdown file in my code, I just ripped it from the Tailwind readme, and this will be converted into HTML after we install this plugin. So let's go ahead and install this. So I'm going to npm install this. And while that's going, let's go ahead and add it to our modules section in markdown, I mean in the Nuxt config. So that should be in Nuxt config for modules here. And it's added after Axios, okay. And what else do we have to do?

And it's added after Axios, okay. And what else do we have to do? That's it. The defaults here. So if you scroll down, let's look for using markdown files. And this is what we want to do, import it from somewhere in your file system. And then we can make a computed property for it, and then just use it using the v-html directive. So let's do that. Is this done? Okay, I'm going to run my dev server while I do that.

Is this done? Okay, I'm going to run my dev server while I do that. Let's go back into our GitHub. Let's go ahead and make a script section here. So I don't think I have one right now. So let's add it. I could have just copied this, but it's okay. And we want a computed property. And we want to import our README. So I'm going to grab that.

And we want to import our readme. So I'm going to grab that. Let's import that here. So I'm going to say import readme from, it's in the same directory, and I called it readmetailwind.markdown. And let's change this to readme. And same with this. And I'm missing a closing brace here. Okay, so now we can use this in our templates. Let's just grab readme, and let's look for readme containers right here. And I'm going to remove all of this.

Let's just grab readme, and let's look for readme containers right here. And I'm going to remove all of this. Let's say vhtml equals readme. Now if I did everything correctly, let's see if this renders out the markdown in HTML. And it looks like it does, cool. So this is just the default HTML that's being rendered out. And now we can style it using the Tailwind CSS typography plugin. So let's go ahead and install it. And I am going to stop my server and install it. And while that's going, let's update our Tailwind config to add it to the plugins array.

And I am going to stop my server and install it. And while that's going, let's update our tailwind.config.js to add it to the plugins array. So I am going to go into my tailwind.config.js. Where's plugins here, down here, let's paste that in. Okay, and I'm going to run my dev server again. And let's see how to use this. So to use it, we just have to add the Perls class to the parent container of the vanilla HTML. So let's go ahead and do that. So back to our code, back to our GitHub view, actually, let me save this first.

So let's go ahead and do that. So back to our code, back to our GitHub view, actually, let me save this first. Back to our GitHub view, and we just have to add the Perls class here. And hopefully this should give it some nice default styles. And it's just taking a while to rebuild the dev server. Okay, and there you see it update. And this now has a default style, which looks pretty good by default. Even the code block here looks pretty good. So let's take a look at some of the options in the plugin. So if you want the text to be bigger, there's different sizes here.

So let's add a px-4 here, see if that adds some padding. Okay. And let's take a look at how we can override some of the defaults here. So first thing I want to change is the link color. If you look at the actual GitHub, the link color is blue. So how do we do that? If you go into the docs, you can see that we can use this typography key, and if you give it the theme as a parameter, you can access that and make use of your config. So let's grab this, and let's change some things here. So to our tailwind.config.js, up here, I'm going to put it right before the extend key.

So let's grab this, and let's change some things here. So to our tailwind.config.js, up here, I'm going to put it right before the extend key. And let me just re-indent this. So I said I wanted to override the links, so that would be the anchor tag. And I want that to be the blue-600 color. So we can do this. So I'm going to grab this, make another object, and say I want to override the color with this theme, and it'll be blue-600, and that should override it. So let me save this. It might take a while for the dev server to reload.

So right here, you'll see that it's this color, and it's also 3 ms of margin on the top and the bottom, which is a bit much for me. So I'm going to change that to the border color we've been using, which is border-color for gray-400. And I'm going to change the margin-top and margin-bottom to something a bit smaller, some border color. Again, use CamelCase. And we're going to use theme.colors.gray.400, and then say margin-top, say 2 ms. And don't forget the comma. And margin-bottom, 2 ms.

And the HR has a slightly darker gray and a slightly smaller margin top and bottom. So I'm happy with this. You can obviously tweak this as much as you want. This looks pretty good and pretty close to what there is in GitHub. So again, I am going to stop this and make another commit. So say git add, git commit, say add Tailwind typography plugin for readme container.