tailwindcss-border-gradient-radius icon indicating copy to clipboard operation
tailwindcss-border-gradient-radius copied to clipboard

doesn't work with hover states

Open fshareef opened this issue 2 years ago • 1 comments

This doesn't seem to work with hover states.

Do I need to add something to the config or is it not supported in the plugin?

fshareef avatar Sep 08 '22 20:09 fshareef

The purpose of this plugin is that we can change border gradients in the state to make an appealing component (e.g button)

Here an example from one of my projects:

border-gradient-br-syself-600-syself-200 hover:border-gradient-tl-syself-600-syself-200 gradient-border-2

of course you need to define that in your tailwind config:

snippet from tailwind.config
  theme: {
    extend: {
      linearBorderGradients: ({ theme }) => ({
        colors: {
          'syself-50': [colors.cerise[50], colors.orange[50]],
          'syself-100': [colors.cerise[100], colors.orange[100]],
          'syself-200': [colors.cerise[200], colors.orange[200]],
          'syself-300': [colors.cerise[300], colors.orange[300]],
          'syself-400': [colors.cerise[400], colors.orange[400]],
          'syself-500': [colors.cerise[500], colors.orange[500]],
          'syself-600': [colors.cerise[600], colors.orange[600]],
          'syself-700': [colors.cerise[700], colors.orange[700]],
          'syself-800': [colors.cerise[800], colors.orange[800]],
          'syself-900': [colors.cerise[900], colors.orange[900]],
        },
        background: theme('colors'),
        borders: {
          1: '1px',
          2: '2px',
          3: '3px',
          4: '4px',
        },
      }),
  plugins: [
    require('tailwindcss-border-gradient-radius')
  ],

batistein avatar Sep 08 '22 21:09 batistein