Menu
Tailwind CSS

Configure Variant Prefix

To configure variant prefixes in a Tailwind CSS config file, we can use the prefix property within the variants section of the configuration file(`tailwind.config.js`).

 

To configure variant prefixes in a Tailwind CSS config file, we utilize the variants section, specifying the desired variants and their prefixes. Within this section, by extending the default variants or defining new ones, you can assign custom prefixes to tailor variant usage.

 

// tailwind.config.js
module.exports = {
 // other Tailwind CSS config options...
 variants: {
   // Configure variants with custom prefixes
   extend: {
     backgroundColor: ['hover', 'focus'], // Default variants without custom prefixes
     textColor: ['responsive', 'hover', 'focus', 'group-hover'], // Example with custom prefixes
   },
 },
 // other Tailwind CSS config options...
};

 

Explanation
 

  • For backgroundColor, the variants hover and focus are configured without any custom prefixes. These variants will be applied using Tailwind's default syntax (e.g., bg-green-500 hover:bg-green-600).
  • For textColor, custom prefixes (responsive, hover, focus, and group-hover) are specified. This means you'll need to use these prefixes when applying these variants in your HTML/CSS (e.g., text-green-500 hover:text-green-600). 
     
Tailwind CSS