Hi,

I ran into some weird Nextjs behavior, at least I don't think it's tailwind's fault.

The code below works perfectly in development but not in build.

In tailwind.config.ts

const config: Config = {
  // other config
  theme: {
    // other config
    extend: {
      keyframes: {
        'animate-in-and-out': {
          'entry 0%': {
            opacity: '0',
          },
          'entry 100%': {
            opacity: '1',
          },
          'exit 0%': {
            opacity: '1',
          },
          'exit 100%': {
            opacity: '0',
          },
        },
      },
      animation: {
        fadeLinearInOut: '367ms linear animate-in-and-out',
      }
    }
  }
}

  
@layer components {
    @supports (animation-timeline: view()) {
    .mdx-scroll-fade-in-out {
      @apply animate-fadeLinearInOut;
      animation-timeline: view();
    }
  }
}

Here is tailwindcss playground where it works perfectly: https://play.tailwindcss.com/T9T55kUuhW?size=540x720.

Here is minimal codesandbox example where it doesn't work in build but works in dev: https://codesandbox.io/p/devbox/tailwindcss-or-nextjs-bug-c6vk6c

If this is not a bug how can I fix it?

Thanks in advance.