tailwindcss-border-gradient-radius
tailwindcss-border-gradient-radius copied to clipboard
doesn't work with hover states
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?
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')
],