Variants

Tailwind has a way of letting you access responsiveness and modify styles based on different property by using something called variants.

Containers

• container

Docs Try it

In order to show you variants, I need to first talk about containers.

Containers are at the heart of Tailwind layouts. You can add a container class to an element and Tailwind will make layouts snap to those breakpoints. You can see the value of the breakpoints here.

The breakpoints are really important because you can use them as variants to create responsive content. More on that in a minute.

Containers don't add any padding to elements, so you have to do that manually, they don't auto center either, so take a look at the example for how you might do this.

Media Query Variants

sm md lg xl 2xl

motion-safe motion-reduce

Docs Try it

There are a number of variants that act as modifiers. When the browser reaches a certain state they can trigger a specific class. Some variants work with most classes and some work with only certain classes.

There's a couple of media query variants I'm listing here that will activate depending on the state of the browser, so motion safe or motion reduce will only work if motion safe or reduce motion has been activated on a user's system.

In case of these media query variants, they take over when the browser reaches certain size. Take a look at the example to see how this works.

State Variants

hover group-hover disable active

Docs Try it

There are some variants that are available to you that deal with state, so they work when certain aspects of the elements are available.

The most common is the hover class. When you hover over an element, you can specify how that element changes. There's a real interesting group option to control what happens to a child when a parent has a group class.

Before we look at the example you'll note that there are two other available classes here, but they are not turned on by default, so I can't show them to you. I'll show you how to turn off some of these classes that are off by default.

Other Variants

Pseudo-Class

first last odd even

Form

checked disabled focus focus-visible focus-within group-focus

Other

dark visited

Docs

There's a bunch of other less common variants, but I think you get the idea with the ones I showed you.

Some of these variants like the ones that depend on pseudo classes are really meant for when you're using loops in frameworks like Vue or React.

The form variants obviously belong to form elements so you can control what items look like when they're checked focused, disabled, etc.

There's a new and interesting variant that will let you control what happens if a browser is supporting dark mode.

Some variants will only work in JIT mode, I listed those in Chapter 8 of this course. With Just In Time Mode, all variants are always turned on by default, so it really pays to have that turned on by default.