In this article
Types
There are two types of utility variants that you can configure and use:
-
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 -
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.