CODEWITHSUNDEEP
tailwind-csstailwind-in-js
marielle
marielle

Reputation: 438

Enable hover only on top/bottom/left/right

I'm trying to create a variant in Tailwind file configuration. What I would like to have is something like hover:border-l-4 hover:border-green-400, so a class that enables a border on the left (or only on top / bottom / right).

So I create this inside tailwind.config.js:

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: ['./src/**/*.html', './src/**/*.{js,ts,jsx,tsx}'],
  },
  darkMode: false, 
  theme: {
    extend: {
      colors: {
        ...
      },
    },
    borderLeft: (theme) => ({}),
    ...
  },
  variants: {
    extend: {
      borderLeft: ['hover', 'focus']
    },
  },
  plugins: [],
}

It doesn't work. I get TypeError: variantsValue is not iterable.

I didn't find anything useful in the documentation page.

Upvotes: 1

Views: 1022

Answers (1)

Digvijay
Digvijay

Reputation: 8957

Checkout docs on tailwind.

  variants: {
    extend: {
      borderWidth: ['hover'],
    }
  }

From here, hover:border-l-4 hover:border-green-400 will work.

Upvotes: 1

Related Questions