vercel / next-learn

Learn Next.js Starter Code
https://next-learn-dashboard.vercel.sh/
MIT License
3.39k stars 1.79k forks source link

Problema com animações do Tailwindcss no starter-example do dashboard #737

Open AndersonMendes567 opened 3 weeks ago

AndersonMendes567 commented 3 weeks ago

No arquivo 'tailwind.config.ts' há a seguinte configuração de uma animação personalizada:

keyframes: {
    shimmer: {
        '100%': {
            transform: 'translateX(100%)',
        }
    }
}

No entanto, isso parece impedir a utilização das outras animações padrão do Tailwindcss. Para resolver isso eu movi essa config para dentro de 'extend' ao invés de deixa-la diretamente dentro de 'theme'

E então ficou assim:

theme: {
    extend: {
      gridTemplateColumns: {
        '13': 'repeat(13, minmax(0, 1fr))',
      },
      colors: {
        blue: {
          400: '#2589FE',
          500: '#0070F3',
          600: '#2F6FEB',
        },
      },
      keyframes: {
        shimmer: {
          '100%': {
            transform: 'translateX(100%)',
          },
        },
      }
    },
  }

Espero ter ajudado alguém que passou pelo mesmo problema, desejo bons código :)