1 00:00:03,000 --> 00:00:05,594 We're now using the Marked library 2 00:00:05,594 --> 00:00:09,329 to render the Markdown content as HTML. 3 00:00:09,329 --> 00:00:11,883 However, in our page it still doesn't 4 00:00:11,883 --> 00:00:14,437 have all the styles you would expect, 5 00:00:14,506 --> 00:00:17,299 like a bigger font for the headings, 6 00:00:17,299 --> 00:00:20,512 or bullet points for the list items. 7 00:00:20,512 --> 00:00:23,685 To get that HTML styled properly 8 00:00:23,685 --> 00:00:25,887 we'll need to use a Tailwind 9 00:00:25,887 --> 00:00:28,011 plugin called "typography". 10 00:00:28,089 --> 00:00:31,429 This provides a CSS class called "prose" 11 00:00:31,429 --> 00:00:35,355 that we can use to style external HTML, 12 00:00:35,355 --> 00:00:38,374 like the one "rendered from Markdown, 13 00:00:38,374 --> 00:00:40,170 or pulled from a CMS". 14 00:00:40,251 --> 00:00:43,897 We can install this plugin as an npm package, 15 00:00:43,897 --> 00:00:46,905 named "@tailwindcss/typography". 16 00:00:46,905 --> 00:00:49,713 So let's go and install it into our project. 17 00:00:50,005 --> 00:00:52,050 Let me show the "package.json", 18 00:00:52,050 --> 00:00:53,501 with the dependencies. 19 00:00:53,567 --> 00:00:55,887 In the terminal, I'll stop the server 20 00:00:55,887 --> 00:00:58,216 and paste the npm command. 21 00:00:58,216 --> 00:01:01,502 The "-D" option is short for "--save-dev". 22 00:01:01,502 --> 00:01:04,102 I use the long option name, because it's 23 00:01:04,102 --> 00:01:06,311 easier to understand what it does. 24 00:01:06,376 --> 00:01:09,312 Ok, we have the new package installed. 25 00:01:09,312 --> 00:01:12,014 Now we need to configure Tailwind 26 00:01:12,014 --> 00:01:13,570 to use this plugin. 27 00:01:13,652 --> 00:01:15,852 In the configuration file there's 28 00:01:15,852 --> 00:01:17,585 already a "plugins" array. 29 00:01:17,652 --> 00:01:21,495 Here we can require "@tailwindcss/typography", 30 00:01:21,495 --> 00:01:23,967 and this will load the right plugin 31 00:01:23,967 --> 00:01:26,369 when it reads this configuration file. 32 00:01:26,369 --> 00:01:29,497 At this point we can restart the dev server. 33 00:01:29,609 --> 00:01:31,999 And I'll rearrange my windows, 34 00:01:31,999 --> 00:01:35,405 to show the editor and the browser side by side. 35 00:01:35,405 --> 00:01:37,398 We can now add a CSS class 36 00:01:37,398 --> 00:01:39,391 to this "article" element, 37 00:01:39,468 --> 00:01:41,001 called "prose", 38 00:01:41,001 --> 00:01:44,567 that's the one provided by the Typography plugin. 39 00:01:44,567 --> 00:01:47,084 And you can see that it's definitely 40 00:01:47,084 --> 00:01:48,832 applying some styles now. 41 00:01:48,902 --> 00:01:52,146 If anything, the headings are maybe too big, 42 00:01:52,146 --> 00:01:54,334 compared to the rest of the page. 43 00:01:54,334 --> 00:01:56,734 But this shouldn't be a real problem, 44 00:01:56,734 --> 00:01:59,213 because we already have a separate 45 00:01:59,213 --> 00:02:01,108 h1 at the top of our page, 46 00:02:01,181 --> 00:02:03,499 so in the Markdown we shouldn't 47 00:02:03,499 --> 00:02:05,667 use a level 1 heading anyway. 48 00:02:05,742 --> 00:02:08,612 We could have some level 2 headings, 49 00:02:08,612 --> 00:02:11,898 for different sections of the review text. 50 00:02:11,898 --> 00:02:14,316 But you should never have two 51 00:02:14,316 --> 00:02:16,733 h1 elements in the same page. 52 00:02:16,817 --> 00:02:18,839 In fact, now that we tested 53 00:02:18,839 --> 00:02:20,636 the Markdown formatting, 54 00:02:20,711 --> 00:02:22,860 we could write an actual review 55 00:02:22,860 --> 00:02:24,801 for the Stardew Valley game. 56 00:02:24,870 --> 00:02:27,353 What I'll do for now is copy some 57 00:02:27,353 --> 00:02:29,610 text from the Wikipedia entry, 58 00:02:29,686 --> 00:02:32,790 just to have some more realistic content, 59 00:02:32,790 --> 00:02:36,052 but without spending too much time writing it. 60 00:02:36,052 --> 00:02:39,569 Let's split it into two separate paragraph maybe, 61 00:02:39,569 --> 00:02:42,001 and make "Stardew Valley" bold, 62 00:02:42,449 --> 00:02:45,062 so there's some different formatting. 63 00:02:45,062 --> 00:02:47,571 Let's see what this looks like in the page. 64 00:02:47,982 --> 00:02:50,208 It's not exactly a review, 65 00:02:50,208 --> 00:02:52,430 but at least it's a description 66 00:02:52,430 --> 00:02:54,007 of that specific game. 67 00:02:54,079 --> 00:02:56,615 Now, the Tailwind Typography plugin 68 00:02:56,615 --> 00:02:58,571 provides a few more classes 69 00:02:58,644 --> 00:03:01,911 that let us customize the style a little bit. 70 00:03:01,911 --> 00:03:04,146 We can change the gray scale 71 00:03:04,146 --> 00:03:05,981 to "slate" for example. 72 00:03:06,061 --> 00:03:09,447 It's not that different from the default "gray", 73 00:03:09,447 --> 00:03:11,651 but we'll use "slate" everywhere 74 00:03:11,651 --> 00:03:13,786 in our website for consistency. 75 00:03:13,855 --> 00:03:16,923 In fact, we could change the footer as well, 76 00:03:16,923 --> 00:03:19,331 where the text is currently black. 77 00:03:19,331 --> 00:03:22,465 Let's use a shade of slate gray instead, 78 00:03:22,465 --> 00:03:23,983 maybe 500. 79 00:03:24,025 --> 00:03:27,306 This way the footer will be even less prominent, 80 00:03:27,306 --> 00:03:30,282 besides already being in a smaller font. 81 00:03:30,282 --> 00:03:32,096 Now, let's check how this 82 00:03:32,096 --> 00:03:33,909 looks on a larger screen. 83 00:03:33,982 --> 00:03:35,893 It would be nice to make the 84 00:03:35,893 --> 00:03:37,669 text as wide as the image. 85 00:03:37,737 --> 00:03:39,453 We should be able to do that 86 00:03:40,137 --> 00:03:42,209 by setting the maximum width 87 00:03:42,209 --> 00:03:46,736 to "screen-sm", that's effectively 640px, 88 00:03:46,736 --> 00:03:48,994 which is in fact the same "width" 89 00:03:48,994 --> 00:03:50,910 we set on the "img" element. 90 00:03:50,979 --> 00:03:53,459 This way the article text should 91 00:03:53,459 --> 00:03:55,938 be in line with the image above. 92 00:03:56,016 --> 00:03:58,634 Ok, this looks pretty good now. 93 00:03:58,636 --> 00:04:00,650 As always, we could spend a lot 94 00:04:00,650 --> 00:04:02,600 more time tweaking the styles, 95 00:04:02,665 --> 00:04:05,807 but the main point of this video was to show you 96 00:04:05,807 --> 00:04:09,115 how to use the Tailwind Typography plugin 97 00:04:09,115 --> 00:04:13,471 to style HTML content generated from Markdown.