Variants

Types

There are two types of utility variants that you can configure and use:

1. Responsive

   Responsive utility variants allow you to have a given utility only take effect at a certain screen size. Simply prefix the utility with the screen size (also known as breakpoint) name, followed by a : character. For example, to have the .text-left utility apply on large screens and above use .lg:text-left.

   The default breakpoints are:

   Breakpoint	Prefix	Dimensions
   Extra small	xs:	< 567px
   Small	sm:	≥ 576px
   Medium	md:	≥ 768px
   Large	lg:	≥ 992px
   Extra large	xl:	≥ 1200px

2. Hover-state

   Hover-state variants allow you to have a given utility only take effect when a visitor hovers over an element. Simply prefix the utility with hover: character. For example, to have the .text-gray-500 utility apply on hover use .hover:text-gray-500.

Refer to each utility page for details about whether responsive and hover-state variant exist for a given utility by default.

Configuring variants

You can add or remove responsive and hover-state variants for specific utilities using Sass variables in the theme/_variables.scss file.

Responsive

The default responsive variants for a theme are defined within the $responsive-variants Sass variable:

$responsive-variants: (
  "color",
  "font-size",
  ...
);

You can also redefine the breakpoints themselves by updating the $breakpoints Sass variable:

//
// Breakpoints
// -----------
//
// Breakpoints define the minimum dimensions at which your layout will change,
// adapting to different screen sizes.
//

$breakpoint-xs: 0;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

$breakpoints: (
  xs: $breakpoint-xs,
  sm: $breakpoint-sm,
  md: $breakpoint-md,
  lg: $breakpoint-lg,
  xl: $breakpoint-xl
);

Hover-state

As with responsive variants, the default hover-state variants are defined within the $hover-variants Sass variable:

$hover-variants: (
  "color",
  "text-decoration",
  ...
);

Add or remove utilities by name from the respective variables and recompile the stylesheet to control which utilities support responsive and hover-state variants.