Sections

Variants

May utilities have responsive and hover-state variants which allow you to make changes to a specific set of screen sizes or have them apply when a user hovers over an element.

In this article

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.