Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doesn't work with hover states #7

Open
fshareef opened this issue Sep 8, 2022 · 1 comment
Open

doesn't work with hover states #7

fshareef opened this issue Sep 8, 2022 · 1 comment

Comments

@fshareef
Copy link

fshareef commented Sep 8, 2022

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?

@batistein
Copy link
Owner

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')
  ],

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants