// tailwind.config.js module.exports = { variants: { // ... - appearance: ['responsive'], + appearance: ['responsive', 'hover', 'focus'], } } Disabling If you don't plan to use the appearance utilities in your project, you can disable them entirely by setting the appearance proper...
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, usehover:appearance-noneto only apply theappearance-noneutility onhover. <!-- ... --> For a complete list of all available state modifiers, check...
appearance-noneappearance: none; appearance-autoappearance: auto; Functionality of Tailwind CSS Appearance Classes appearance-none:This class removes default browser styling, allowing for custom designs. appearance-auto:This class restores the element to the default browser styling. ...