Unable to use keyframes inside of custom component

[joshuajaco]

What version of Tailwind CSS are you using?

v3.3.3

What build tool (or framework if it abstracts the build tool) are you using?

tailwindcss CLI

What version of Node.js are you using?

For example: v18.18.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/joshuajaco/tailwind-component-keyframe-issue

Describe your issue

I'm trying to use a keyframe animation inside of addComponents when defining a custom plugin. e.g.:

addComponents({
  '.skeleton': {
    animation: theme('animation.shimmer'),
  },
});

This does not work. The .skeleton class will generate correctly but the keyframe will not be included.

[thecrypticace]

Hey! Including the animation property does not automatically include the keyframes with the same named animation that's given in the value of the property. You must explicitly include them yourself. We do this internally as well as you can see here on line 949:

tailwindcss/src/corePlugins.js

Lines 945 to 953 in 3e16028

	animate: (value) => {
	let animations = parseAnimationValue(value)
	return [
	...animations.flatMap((animation) => keyframes[animation.name]),
	{
	animation: animations
	.map(({ name, value }) => {
	if (name === undefined || keyframes[name] === undefined) {

The implementation there is a bit different because we handle prefixing, a handful of other things, and use matchUtilities but you can do this like so:

addComponents({
  '@keyframes shimmer': theme('keyframes.shimmer'), // Add this line
  '.skeleton': {
    animation: theme('animation.shimmer'),
  },
})

One key difference is these keyframes are always included in the output instead of only when the skeleton utility is used. I do believe we should find a way for this behavior to work with addComponents/addUtilities — I'll make a note to look into that.

If you really want to enable that behavior (where keyframes only show up when used) today you must use matchComponents. To make just the skeleton class work requires a DEFAULT entry in the values list like so:

matchComponents(
  {
    // Notice this is an array
    skeleton: () => [
      { '@keyframes shimmer': theme('keyframes.shimmer') },
      {
        animation: theme('animation.shimmer'),
      },
    ],
  },

  // and we have a `values` key
  { values: { DEFAULT: '' } }
)

Hope that helps! ✨