Configuring Variants

Configuring which utility variants are enabled in your project.

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

To Document:

  • Demo why you might want a different variant order for different utilities
  • Using the default variant to control default variant placement
  • Link to creating your own variants using plugins
  • Complete table of default enabled variants

The variants section is where you control which state variants are generated for each core utility plugin.

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    appearance: ['responsive'],
    backgroundColors: ['responsive', 'hover', 'focus'],
    fill: [],

Each property is a core plugin name pointing to an array of state variants to generate for that plugin.

It's important to note that (responsive excluded) variants are generated in the order you specify them, so variants at the end of the list will take precedence over variants at the beginning of the list.

Learn more about state variants in the "State Variants" documentation.