Effortless typography, even in dark mode — Tailwind CSS Typography v0.5

[Music] hello let's take a look at the super cool new features in version 0.5 of the typography plugin for tailwind css version 3. here's the code for the example we're looking at so we have an article inside of it we have a title and then for the body of the article we're injecting some markdown here's the markdown and we're going to make the assumption that this would be coming from an external source like a cms here's what a page looks like for now so we have the title and then for the body of the article which is the markdown contents we have a completely unstyled typography let's install the typography plugin and i'm going to install the latest version so i can show you the cool new features okay great next let's require this plugin in our config file with that in place in the element that wraps our markdown i will add a class of pros and that one class will do us a great service by applying typographic styles to its children elements making sure any type of content looks great and well balanced font sizes font weight colors list styles spacing block quotes and a lot more stuff now let's take a look at some of the new things we've added in the version 0.5 update for tailwind 3. tailwind 3 includes 5 greys out of the box and it makes sense that you'd want your typography to match the grayscale you've chosen for your site our project currently uses the default shade of gray but let's say here we were using the stone shade instead which is a warmer gray in that case we'd want our typography to be consistent with this warmth and we can do so by setting the class pros stone and i will redefine our pros colors to use the stone shade of greys if instead the project was using the slate shade of grey which is the coolest and bluest shade of grey then here we'd want to use prose slate and hopefully you can see the difference on the video right now we're changing the background color of our page and the text color of our title for dark mode i'll switch to dark mode in my os settings and a beautiful typography has fallen apart well check this out i'm going to add a class of dark prose invert and with that one class we have a perfectly acceptable bass line for a typography in dark mode despite the name the prose invert class isn't just a naive automatic color inversion it actually switches to a set of totally handcrafted colors picked by the expert designers at tailwind labs it also respects the base color that you've chosen so here our dark mode typography still uses bluish slate grays i've added a bit of markup inside a pros wrapper just to make a quick demo in previous versions of the plugin you couldn't override the typography styles directly on an element with utilities so doing something like this text pink 500 would not work because the pros selectors had higher specificity well technically you could but you had to prefix your class with an important modifier to make it win the specificity battle in version 0.5 the specificity of the pro styles is reduced and so you can apply a simple utility and it will take over the pro styles but generally a much better approach here is to define your styles on the pros wrapping parent if i type pros dash you see we now have that list of selectors like h1234 paragraph anchor tag block quotes and many more which allow us to style any element inside of the pros block so if i wanted to style the headings level 2 i would use pros h2 and then i can do something like text indigo 500 and there you go a level two heading is now indigo 500. if i scroll up you'll see that level 3 headings are still dark gray and since quite often you'd want all the headings to have the same color there is also a handy pros headings modifier which will apply utilities to all headings so now our level 2 headings are indigo 500 and so is the level 3 heading let's also style our links like these two here and to do that i will use pros a and we'll make these links text tl 600 and on hover we'll make the pros a text till 500. let's take a look yep very nice but if i switch to dark mode i think these links are just a little bit too dark so let's handle that here dark prose a text teal 500 and then for dark when we hover the prose a we want the text to be text till 400. all right so yeah it looks nicer so now we got good looking links both on dark and light mode next let's add a few styles to our image here so i'll go prose imager rounded to xl and prose imager shadow md yep that's looking really really nice and we're going to do one more thing i want this pre tag here to be slightly indigo so it looks nice with the headings so pros pre and for the background color we'll go with bg indigo 100 and pros pre text indigo 800 that's looking really good but it's probably going to be a bit too bright for dark mode so for dark modes pros 3 the background will be indigo 900 and dark prose pre text indigo 100 and yeah i think that looks great you may end up with tons of classes on this prose wrapper but this is typically something you could abstract away as a component something like a markdown wrapper ui component that you can use everywhere where you need to apply typography styles say that somewhere within a prose wrapper in the middle of text we want to display this testimonial here so i've got this as a component that's a prose wrapper with the markdown content and inside this wrapper i've added a couple of paragraphs of text and in between paragraphs we've got our testimonial components but if we scroll down on the article to see what it looks like it definitely doesn't look like we want what happens is our pros styles are competing with the component styles for example the block quote now has this border left here and the quote marks as well our avatar is kind of wonky and the text here is now italic in certain situations like this one you may want to opt out of the pro styles for something that sits within a prose wrapper and there's a way to do just that i'll wrap the testimonial in a div and here we'll apply a class of not prose which is sort of a flag to prevent elements from inheriting prose styles and our testimonial now looks just as it should without any interference from the pro styles even if it sits within the pros container and there we go we've customized our typographic styles without ever leaving our html which we think is a much nicer developer experience than having to work with a complicated css in javascript syntax in the config file our typography looks great in both light and dark modes and you can easily imagine how you could customize it further based on your specific needs and that's it for this video thank you for watching and i will see you again very soon be good till then [Music]

Channel: Tailwind Labs

Views: 4,625

Keywords:

Id: GEYkwfYytAM

Length: 7min 12sec (432 seconds)

Published: Fri Dec 17 2021