Esc

Understanding variants

Many utilities have responsive and/or 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.

For information about what type of variants, if any, are available for a given utility, refer to its page.

  • Types
  • Usage

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. To apply a responsive variant, simply prefix the utility with the screen size (also known as breakpoint) name followed by a : character.

    For example, to have the .text-left text alignment 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. To apply a hover state variant, simply prefix the utility with hover:.

    For example, to have the .text-gray-500 text color 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.

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

Responsive variants

The default responsive variants for a theme are defined within the $responsive-variants Sass variable within the /scss/theme/_variables.scss file.

$responsive-variants: (

  // Typography
  "color",
  "font-size",
  "font-style",
  "font-weight",
  "letter-spacing",
  "text-align",
  "text-transform",
  "vertical-align",
  ...
);

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 variants

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

$hover-variants: (

  // Typography
  "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.

Questions or feedback about this article? Let us know