[BUG]: text-animations/shiny-text - Tailwind v4

[Glaezz]

Describe the issue

It's first time I'm using React Bits. I'm using Next.js, Typescript, and tailwind v4.

I'm using the component like the docs, but the animation is not working. Until i see some commented code on ShinyText.tsx:

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        shine: {
          '0%': { 'background-position': '100%' },
          '100%': { 'background-position': '-100%' },
        },
      },
      animation: {
        shine: 'shine 5s linear infinite',
      },
    },
  },
  plugins: [],
};

A bit confuse because there are no tailwind.config.js or tailwind.config.ts on my directory. I'd try to create it manually and didn't work. I think v4 of tailwind not using tailwind.config.js or tailwind.config.ts anymore.

until I found this: https://tailwindcss.com/docs/theme#defining-animation-keyframes

I change the code and place it on globals.css:

@keyframes shine {
  0% {
    background-position: 100%;
  }
  100% {
    background-position: -100%;
  }
}

:root {
  --animate-shine: shine 5s linear infinite;
}

.animate-shine {
  animation: var(--animate-shine);
}

after that, the animation is working properly

Reproduction Link

Steps to reproduce

Validations

• I have checked other issues to see if my issue was already reported or addressed

[DavidHDev]

Closed, not a bug

[WilliamWelsh]

Just ran into this too. animate-shine is not a default, the docs don't give the animation, it's not in this repo, and I only found it because of this issue. I think the docs should provide the css for the animation, as it does not work by default