7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 55 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Using Variants

Tailwind's variants allow us to apply styles to elements when something changes—like their state. We can also use variants to implement responsive designs and layouts.

Related Links

2.6 Using Variants

The idea of variants is something that sets tailwind apart from other CSS frameworks, especially utility oriented frameworks. Now the definition of variant is something that can or will change. And when you think about a web page. Well, there's a lot of things that can change, I mean, something very simple is just moving your mouse to hover over a particular element, like usually we think about links. So, that whenever we move our mouse over a link, we are hovering over that link and a lot times. We will apply style based upon whether or not the mouse cursor is hovering over an element and we do that using the hover pseudo-class. Now, one of the tenants behind tail win is to write as little CSS as possible, so that we use the utility classes that are given to us. So then the question becomes, how do we, use hover for our CSS classes, and that's where a variant comes into play. So in the case of adding a hover effect, all we need to do is start our class using the variants name. In this case, it is hover Then follow that with a colon, and then the name of the class that we want to apply to that element. Whenever we hover over it. We want to set the text to a different color, like white. And in fact, let's just go ahead. I mean when you think about it, there are a variety of states that you can apply to an element. Like for example, whenever we click on a link, we are essentially focusing that link. So, there is another variant called focus. So that we can apply yet another class to that element whenever we focus it and I'm going to change the color to yellow. So that whenever we click on home, we can see that the color did indeed change to something yellow. And it doesn't have to be links if we wanted to set a hover effect for the sidebar, we could do that with, well, I don't know what we would do. I guess we could do something like gray 100 but of course as we move our mouse over the sidebar Nothing happens there. Why not? And it's because it's a text. Let's set the background color. That's a little bit easier. So now whenever we hover over it, we can see that the background changes to a light gray color. All right. So that is all well and good, but there's more to variants than just. Setting hover or focus or applying the style based upon the state of an element. We also use variants for Responsive designs. Now the typical school of thought in today Days designing is to design for mobile first, and then add in the CSS that you need for larger screens. So if we look at our page if we shrink this down, for a mobile device, this is okay. But let's say for the sake of this discussion that we want to hide the navigation altogether, so that whenever we increase the size of the screen. Then we will show our navigation. Now one way that we can do that is to simply just apply the hidden class to our sidebar. This is going to set the display to none. So this is a little bit different, so far we have used just the name of the display value like fixed or if we wanted to use block, we could use block. But hidden here is being used because if we specify none, there's too many CSS properties that are just plain none. So, by using the hidden class this is going to set the display of our sidebar to none. When the screen size is a medium size, so for our responsive design, we're going to use a set of different variants. We have several we have SM for small we have MD for medium LG for large, we have XL for extra large. So you get an idea of the variants that we would use for a responsive design. And the great thing is we can apply these variants to just about any CSS class so we can style our pages exactly however we need to. Okay, so in this case, we want our width to be full by default and then only when the screen reaches a medium size Then and only then will we apply the left margin? So if we resize this at some point, there we go. It's going to pop over and apply that margin. But we also want to show our navigation. When that occurs. Well, then all we have to do is essentially the same thing. We will use the It disappears, if we enlarge it, then we have our navigation. Now there are a tonne of variants, we aren't going to cover all of them because there's just so many. But in the documentation if you go to configuring variants, if you scroll down, there's going to be a table of all of the available variants.

Back to the top