Styling Markdown and CMS Content with Tailwind CSS

[Music] hey what's up everyone in this video we're going to be talking about the official tailwind css typography plugin most of the time when using tailwind your workflow typically involves adding classes directly on each html element like for example here for this introducing text we have a span here and we applied text indigo 600 font semi-bold tracking wide and uppercase then for the other part of our heading we have used the text 3xl font extra bold tracking tight text gray 900 and then we make the font bigger at the small break point so that's all good and well but sometimes there are situations where you just cannot apply utilities directly on the markup say you're receiving data from an external source like content from cms there might be a rich text field here that returns some html markup or maybe some markdown you won't be able to apply classes directly on these elements since you don't have control of them for the purpose of this video we're going to pretend that the content is coming from an external source but it's actually just coming from another file on that project okay so up here you can see we are importing a cms content variable from a different file and if we look at this file in there we have this block of html which is completely class free it's just raw html markup paragraph tags block quotes a figure elements heading tags unordered lists etc that's typically something you would get back from a rich text field or wysiwyg field in a cms right so i'll scroll down here and we'll get rid of this placeholder div without to do and instead we're going to bring this content we just looked at so a div with a class of mt8 to get some vertical spacing and we'll also center it with mx auto inside here i'll bring the cms content variable for now it's returning raw html as a string you can see the html tags here i'm going to add a save filter here next to my variable so that the html is actually passed all right we're good with that now and as you can see everything in the content looks exactly the same we have no spacing and it's impossible to tell what is what for example you would have no idea that this here is a block quote you wouldn't know that right under this image this is a fig caption element that's an h2 tag etc if i expand the viewport you can also see that our content is currently using the entire width available within its container so we cannot apply utilities to this markup directly remember we have no controls on how this markup is generated so if you wanted to style that content the only option you'd have is to create a class on the parent element so let's call that cms content and this class is going to be a scope within which we can apply styles directly on the html elements let's jump in our css file and to demonstrate that i'll create a components layer block and let's say i wanted to add some margin top on the paragraph i could go cms content p and in there at apply mt6 so now we can at least see where a paragraph starts and ends but if we look here for example there is no spacing at all because this is an h2 tag and these are unordered list items we should probably style all the headings differently so for a quick example here i'll just target the h2 elements and here we'd go at apply text to excel font extra bold mt8 and maybe mb4 and so you could go and do that for all the html elements that could possibly come through this cms content field and as you can imagine this is a lot of work also doing good typography is actually just really hard there are a lot of things that you need to take in consideration to achieve a good vertical rhythm so things like font size spacing line height etc and it's really tricky to get all the elements in your markup to really work together really well and being cohesive and that is where the tailwind css typography plugin comes in very handy you can think of it as if you were hiring a really good designer that was going to sweat all the details to come up with a really crisp well-crafted typography for your website so i'm going to remove this css that we wrote here and also remove that cms content class so we go back to a completely unstyled html markup and now let's go and install the tailwind css typography plugin npm install at tailwind css typography okay next thing we need to do is go and require that plugin in a tailwind config file down here in the plugins array i will require at tailwind css typography nothing is going to change visually just yet but this plugin has now made available for us one of these scope classes which happens to be called prose if i come back in my html and in our cms content wrapper we add this pros class right away you can see that our cms content looks much nicer we have a color change nice spacing between the elements our blog quote is looking pretty neat now we have nicely formatted code and pre-tags the image and caption have received a nice treatment to the heading tag the unknown at least everything looks pretty good now also if i make the window wider you'll see that our content is now constrained to maximum width turns out that just like line height line width is also really important for readability when doing typography work you really want to take line width into consideration now if for some reason you did not want this maximum width constraint you can undo that with the max w non-utility which is going to opt out of applying a maximum width so the content is once again going to use the entire width available in our case we do want this max width applied so i'm going to bring that back so this pros class here is the base of how the typography plugin works that one class is responsible for turning our unstyled content into this on top of that the plugin also offers modifiers like for example size modifiers so here if i type pros dash you will see some size modifiers available pros small large extra large and 2xl if i choose pros extra large everything is going to be significantly bigger but once again with a carefully crafted hierarchy in terms of sizing spacing between all elements as you can guess if i go pros small everything in our typography is going to shrink down so these size modifiers are not responsive by themselves so here at the moment i would have a small typography on every screen dimension however we can use responsive variants with these pros by default on mobile and then say at the medium breakpoint we want to use the pros lg and from the lg breakpoint and up we will use pros xl so here's the default pro size and when we hit the medium point right here as you can see the jump we're now using pros lg and when we reach the next breakpoints right there here's the jump once again we are now using the pros xl size modifier the pros class also comes with color modifiers that are going to apply colors to the links which is quite handy if you want your text to kind of match your brand a little bit more closely so if i go once again pros dash below the size modifiers you can see we also have color modifiers pros red yellow green blue indigo purple and pink so if i go with pros red not much is going to change but if i scroll down you can see our links are now red in our case our brand color here is arguably indigo so let's switch to pros indigo and now we'll have nice on-brand indigo links so let's quickly recap the steps to get the typography plugin working step 1 install the at tailwind css typography plugin from npm and require it in the tailwind config file inside the plugins array step 2 decide which part of the project we want to style with this plugin and then go find the parent element and use the pros class on that parent this by itself is all you need to get this beautiful typography going on top of that in addition to the pros class you can use color modifiers or size modifiers depending on your specific needs and that's it that's how you use the tailwind css typography plugin thanks for watching and i'll see you in the next video bye for now

Channel: Tailwind Labs

Views: 44,082

Keywords:

Id: J0Wy359NJPM

Length: 9min 13sec (553 seconds)

Published: Thu Mar 25 2021