Variants

Variants allow you to specify under what circumstances your utilities will be activated.

You may use the screen size, system theme, or any pseudo-selector, such as :hover.

You specify a variant by using the : separator, and you can combine them arbitrarily as in:

sm:bg-red-500 sm:hover:bg-green-300 dark:bg-white

Screen Variants

Mobile First

VariantRuleDescription
sm@media (min-width: 640px)Enable utility when the screen width is greater than 640px
md@media (min-width: 768px)Enable utility when the screen width is greater than 768px
lg@media (min-width: 1024px)Enable utility when the screen width is greater than 1024px
xl@media (min-width: 1280px)Enable utility when the screen width is greater than 1280px
2xl@media (min-width: 1536px)Enable utility when the screen width is greater than 1536px

Desktop First

VariantRuleDescription
<sm@media (max-width: 640px)Enable utility when the screen width is less than 640px
<md@media (max-width: 768px)Enable utility when the screen width is less than 768px
<lg@media (max-width: 1024px)Enable utility when the screen width is less than 1024px
<xl@media (max-width: 1280px)Enable utility when the screen width is less than 1280px
<2xl@media (max-width: 1536px)Enable utility when the screen width is less than 1536px

Only Screen

VariantRuleDescription
@sm@media (min-width: 640px) and (max-width: 768px)Enable utility when the screen width is greater than 640px and less than 768px
@md@media (min-width: 768px) and (max-width: 1024px)Enable utility when the screen width is greater than 768px and less than 1024px
@lg@media (min-width: 1024px) and (max-width: 1280px)Enable utility when the screen width is greater than 1024px and less than 1280px
@xl@media (min-width: 1280px) and (max-width: 1536px)Enable utility when the screen width is greater than 1280px and less than 1536px
@2xl@media (min-width: 1536px)Enable utility when the screen width is greater than 1536px

Max-Width Breakpoints

You can define custom breakpoints that use max-width instead, or ranges, by using the following configuration options:

export default {
  theme: {
    screens: {
      '2xl': { max: '1535px' },
      'sm': { min: '640px', max: '767px' },
    },
  },
}

Raw Media Queries

You can define a custom screen by providing a raw media query in the config:

export default {
  theme: {
    screens: {
      portrait: { raw: '(orientation: portrait)' },
      print: { raw: 'print' },
    },
  },
}

For example, you could then use print:hidden to hide elements when styling for print.

State Variants

Pseudo Classes

VariantRuleDescription
first.${utility}:first { ... }Targets the first-child pseudo-class.
last.${utility}:last { ... }Targets the last-child pseudo-class.
odd.${utility}:odd { ... }Targets the odd-child pseudo-class.
even.${utility}:even { ... }Targets the even-child pseudo-class.
visited.${utility}:visited { ... }Targets the visited pseudo-class.
checked.${utility}:checked { ... }Targets the checked pseudo-class.
focus-within.${utility}:focus-within { ... }Targets the focus-within pseudo-class.
hover.${utility}:hover { ... }Targets the hover pseudo-class.
focus.${utility}:focus { ... }Targets the focus pseudo-class.
focus-visible.${utility}:focus-visible { ... }Targets the focus-visible pseudo-class.
active.${utility}:active { ... }Targets the active pseudo-class.
link.${utility}:link { ... }Targets the link pseudo-class.
target.${utility}:target { ... }Targets the target pseudo-class.
not-checked.${utility}:not(:checked) { ... }Targets the :not(:checked) pseudo-class.
default.${utility}:default { ... }Targets the default pseudo-class.
enabled.${utility}:enabled { ... }Targets the enabled pseudo-class.
indeterminate.${utility}:indeterminate { ... }Targets the indeterminate pseudo-class.
invalid.${utility}:invalid { ... }Targets the invalid pseudo-class.
valid.${utility}:valid { ... }Targets the valid pseudo-class.
optional.${utility}:optional { ... }Targets the optional pseudo-class.
required.${utility}:required { ... }Targets the required pseudo-class.
placeholder-shown.${utility}:placeholder-shown { ... }Targets the placeholder-shown pseudo-class.
read-only.${utility}:read-only { ... }Targets the read-only pseudo-class.
read-write.${utility}:read-write { ... }Targets the read-write pseudo-class.
not-disabled.${utility}:not(:disabled) { ... }Targets the :not(:disabled) pseudo-class.
first-of-type.${utility}:first-of-type { ... }Targets the first-of-type pseudo-class.
not-first-of-type.${utility}:not(:first-of-type) { ... }Targets the :not(:first-of-type) pseudo-class.
last-of-type.${utility}:last-of-type { ... }Targets the last-of-type pseudo-class.
not-last-of-type.${utility}:not(:last-of-type) { ... }Targets the :not(:last-of-type) pseudo-class.
not-first.${utility}:not(:first-child) { ... }Targets the not(:first-child) pseudo-class.
not-last.${utility}:not(:last-child) { ... }Targets the not(:last-child) pseudo-class.
only-child.${utility}:only-child { ... }Targets the only-child pseudo-class.
not-only-child.${utility}:not(:only-child) { ... }Targets the not(:only-child) pseudo-class.
only-of-type.${utility}:only-of-type { ... }Targets the only-of-type pseudo-class.
not-only-of-type.${utility}:not(:only-of-type) { ... }Targets the not(:only-of-type) pseudo-class.
even-of-type.${utility}:nth-of-type(even) { ... }Targets the nth-of-type(even) pseudo-class.
odd-of-type.${utility}:nth-of-type(odd) { ... }Targets the nth-of-type(odd) pseudo-class.
root.${utility}:root { ... }Targets the root pseudo-class.
empty.${utility}:empty { ... }Targets the empty pseudo-class.

Pseudo Elements

VariantRuleDescription
before.{utility}::before { ... }Targets the before pseudo-element.
after.{utility}::after { ... }Targets the after pseudo-element.
first-letter.{utility}::first-letter { ... }Targets the first-letter pseudo-element.
first-line.{utility}::first-line { ... }Targets the first-line pseudo-element.
selection.{utility}::selection { ... }Targets the selection pseudo-element.

Parent Selectors

VariantRuleDescription
group-hover.group:hover .${utility} { ... }Targets an element when a marked parent matches the hover pseudo-class.
group-focus.group:focus .${utility} { ... }Targets an element when a marked parent matches the focus pseudo-class.
group-active.group:active .${utility} { ... }Targets an element when a marked parent matches the active pseudo-class.
group-visited.group:visited .${utility} { ... }Targets an element when a marked parent matches the visited pseudo-class.

Child Selectors

VariantRuleDescription
svg.${utility} svg { ... }Targets svg nodes.
all.${utility} * { ... }Targets all nodes.
children.${utility} > * { ... }Targets children nodes.
siblings.${utility} ~ * { ... }Targets siblings nodes .
sibling.${utility} + * { ... }Targets first sibling node.

Media Query

VariantRuleDescription
motion-safe@media (prefers-reduced-motion: no-preference) { ... }Targets the prefers-reduced-motion: no-preference media query.
motion-reduce@media (prefers-reduced-motion: reduce) { ... }Targets the prefers-reduced-motion: reduce media query.

Theme Variants

Default

VariantRuleDescription
dark@media (prefers-color-scheme: dark) { ... } or .dark .{utility} { ... }Enable utility base on user configuration
light@media (prefers-color-scheme: light) { ... } or .light .{utility} { ... }Enable utility base on user configuration

Following System

VariantRuleDescription
@dark@media (prefers-color-scheme: dark) { ... }Enable utility when the system turns on dark mode
@light@media (prefers-color-scheme: light) { ... }Enable utility when the system turns on light mode

Following Application

VariantRuleDescription
.dark.dark .{utility} { ... }Enable utility base on application dark mode
.light.light .{utility} { ... }Enable utility base on application light mode