I am using tailwind v4 with nextjs 15.0.4
In globals.css I have.
@theme {
--animate-float: float 4s inifinite
--animate-wiggle: wiggle 1s infinite
@keyFrames[ wiggle {
0% {
transform: rotate(-3deg);
}
100% {
transform: rotate(3deg);
}
},
@keyFrames float {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}]
}
in ShoeDetail.tsx is have
<Image className="animate-wiggle" src={nike1} width={600} height={500} alt="Picture of shoe"/>
There is only one animation shown in the available list, and the animation does not have any effect. The built-in animate-pulse works fine.
I have followed the tailwind guide and cannot seewhat is wrong.
Thanks
Answer
Problems
Specifically in your case, the CSS is invalid:
@keyFrames[ wiggle {
And the semicolons are also missing:
--animate-float: float 4s inifinite --animate-wiggle: wiggle 1s infinite
And the import of TailwindCSS v4 is missing.
Solution
First, you need to import TailwindCSS v4, and second, CSS is case-sensitive, so it's best to use the original @keyframes instead of @keyFrames; this is what it should look like correctly:
@import "tailwindcss"; /* added import */
@theme {
--animate-float: float 4s infinite; /* added semicolon */
--animate-wiggle: wiggle 1s infinite; /* added semicolon */
@keyframes wiggle { /* fixed syntax; use @keyframes */
0% {
transform: rotate(-3deg);
}
100% {
transform: rotate(3deg);
}
}
@keyframes float { /* use @keyframes */
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
}
- How to use @keyframes in Tailwind CSS version 4? - StackOverflow