Get started with 33% off your first certification using code: 33OFFNEW

How to add your own variants (like :hover) to Tailwind

2 min read
Published on 24th October 2023
How to add your own variants (like :hover) to Tailwind

Tailwind CSS, the utility-first CSS framework, has been a game-changer in frontend development, offering rapid design capabilities without sacrificing customization. One of the framework's strengths lies in its variants --- responsive modifiers that define when certain styles are applied, like :hover or :active. But what if the predefined variants don't quite cover your needs? Enter custom variants.

Understanding Variants

Before diving into custom variants, it's essential to understand how built-in variants work in Tailwind. By default, Tailwind provides a set of variants for most utilities:

  • responsive: For responsive design based on screen sizes.
  • dark: For dark mode styles.
  • motion-safe & motion-reduce: For users who prefer reduced motion.
  • Pseudo-class variants: hover, focus, active, and more.

To use a variant, you simply prefix it to a utility class:

<button class="hover:bg-blue-500">Hover over me!</button>

Creating Custom Variants

Let's walk through the process of adding your own custom variant in Tailwind.

1. Define the Variant: In your tailwind.config.js, use the addVariant function. This is where you define the logic of your variant.

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('important', ({ container }) => {
        container.walkRules(rule => {
          rule.selector = `.\\!${e(rule.selector.slice(1))}`
          rule.walkDecls(decl => {
            decl.important = true
          })
        })
      })
    }),
  ]
}

In this example, the important variant is added, which will make utility classes important by prefixing them with !.

2. Enable the Variant: The next step is to enable your variant for specific utilities.

module.exports = {
  variants: {
    extend: {
      backgroundColor: ['important'],
      textColor: ['important'],
      // Add other utilities if needed
    },
  },
}

3. Use the Variant: Now, you can use your custom variant in your HTML.

<div class="!bg-red-500 !text-white">This has important styles!</div>

Things to Consider

  • Overuse: While custom variants can be powerful, avoid the temptation of adding too many. Tailwind's strength lies in its simplicity and consistency.

  • Performance: Ensure your custom variants don't bloat your stylesheet. Use tools like PurgeCSS to eliminate unused styles.

  • Documentation: If you're working in a team, document your custom variants so everyone is aware of how and when to use them.

Final Thoughts

Tailwind CSS shines not just because of its built-in utilities but because of its extensibility. Custom variants empower developers to adapt the framework to their precise needs. Whether you're tackling a unique design challenge or optimizing for a specific user interaction, with Tailwind and a bit of creativity, the sky's the limit.