My page.tsx

import ImageComponent from '../lib/ImageComponent';

export default function Home() {
  return (
    <div className='p-4'>
      <span className='text-red-500'>Test</span>
      <ImageComponent />
    </div>
  );
}

My ImageComponent.tsx:

import Image from 'next/image';

const ImageComponent = () => {
  return (
    <Image
      src='/ham.png'
      alt='Ham Pizza'
      className='rounded-full'
      width={175}
      height={175}
    />
  );
};

export default ImageComponent;

The Tailwind classes in the Image Component are not getting applied => not rounded image, but the other classes still work => text is red

Can you also try to hide it with tailwind ? I thiink its not about tailwind but instead css rules could be applied on image

I can do more tests tomorrow, but I'm off for today

Wow, that really was the error 😅. I had to add

'./lib/**/*.{js,ts,jsx,tsx,mdx}',

to the

tailwind.config.js