Tailwind Just in Time Tutorial #3 - Extra Variants

Key Takeaways

all right gang so when you're using the just in time compiler you also have access to some extra features that come along for the ride in version 2.2 of tailwind so the first ones i want to show you are the extra variant classes that we can use and again these are only available when you use the just in time compiler so i've got the just in time compiler running down here and it's watching for changes so when i start to add new classes it's going to automatically rebuild the css for me behind the scenes right so let's try some of these new variants so in the html page first up we're going to have a look at the first letter variant which targets the first letter of some text inside the tag so for example in this h3 tag right here we can add in a class which is first hyphen letter and then a colon and then after the colon is a class we want to apply just to the first letter of the text inside this h3 so i could add the class font hyphen bold to make the first letter bold right so i'm also going to do another to make the first letter a different color so again i can just say first hyphen letter then a column and then we can use another class so text hyphen green hyphen 500 for example and this is going to make just the first letter this green color so if we save this file now tailwind is going to run the magic and rebuild our css on the fly using the just in time compiler and add these required variants and classes to our output css and now in the browser we can see that the first letter of this h3 is indeed bold and also green awesome okay then so let's try some more next i'm going to add two classes to this unordered list the first one m y hyphen four to give it some margin in the y direction and also i'll add a list hyphen disk so that the li tags inside get those disks at the start these are just two normal tailwind classes nothing new yet but now i'm going to use the marker variant which is used to style the disk or the number if this was an ordered list instead at the start of each li tag so i can say marker then a colon and then any class i want to apply to the marker so i'll add the text hyphen blue hyphen 600 class to make the marker blue now notice i'm adding this class on the ul tag and not to the ally tags individually and that's okay because the styles cascade down onto the li tags but we can override it on each individual li tag if we wish so for example i could do that on the first one i could add in a class and the class is going to be the same one as we just did to the ul so i'm going to copy that and paste it in here and then all i need to do is change the color to maybe green 500 instead of blue 500 or blue 600 rather and now the rest of the li tags should still be blue but this first one should be green and we can see in the browser this has worked awesome all right then so next up we're going to try the selection variant which is used to style text when it's selected or highlighted on a web page for example i can highlight one of these li tags right here and you can see the default background color when we do this is blue for the selected portion so what we can do is change that with the selection variant so we'll do this on the second to li text first of all i'm going to alt click to select both of these and then we can add class attribute to each one all right so then i'm going to use the selection variant so we just say selection then a colon and then the class that we want to use which is going to be bg hyphen pink hyphen 500 and then what i'll do is come to the second one and just change pink to purple so it's bg hyphen purple 500 so now when we select text from the second li the background should be pink and from the third one it should be purple so let's take a look so now if i select some of this text we can see that the middle one has the pink background cool and the bottom one has the purple background awesome alright so there's one more variant i want to show you and that's the first line one so to demo this i'm going to make a new paragraph tag below the ul and inside that i'm going to add some dummy lorem text so now i'm going to add a class to this p tag and i'm going to say first line and then a colon and then add a class that i want to apply to the first line of text inside this paragraph so i'm going to use the fonts hyphen semi bold one and that means style just the first line of text using this font semi-bold class so let's save that and now in the browser we can see that the first line has that semi-bold text good so they were just some of the added variants that can be used with the just in time compiler and again without using the just in time mode you can't use those extra variants there are more as well which you can find on the docs so have a play around with those and next up we're going to talk about another feature that we can use arbitrary values