Cannot use `h-screen` from Tailwind with XB

Tried to test this manually and ran into an error:

An unexpected error has occurred while rendering preview.

Failed to execute 'querySelector' on 'Document': 'div#block-olivero-content > div.block__content > astro-island:nth-child(1) > section.bg-white.lg:grid.lg:h-screen.lg:place-content-center' is not a valid selector.

This is the component I tested with:

const Component = ({
  text = "Hero",
}) => {
  return (
  <section className="bg-white lg:grid lg:h-screen lg:place-content-center">
    <div className="mx-auto w-screen max-w-screen-xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32">
      <div className="mx-auto max-w-prose text-center">
        <h1 className="text-4xl font-bold text-gray-900 sm:text-5xl">
          Understand user flow and
          <strong className="text-indigo-600"> increase </strong>
          conversions
        </h1>
  
        <p className="mt-4 text-base text-pretty text-gray-700 sm:text-lg/relaxed">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident
          accusamus impedit minima harum corporis iusto.
        </p>
  
        <div className="mt-4 flex justify-center gap-4 sm:mt-6">
          <a
            className="inline-block rounded border border-indigo-600 bg-indigo-600 px-5 py-3 font-medium text-white shadow-sm transition-colors hover:bg-indigo-700"
            href="#"
          >
            Get Started
          </a>
  
          <a
            className="inline-block rounded border border-gray-200 px-5 py-3 font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900"
            href="#"
          >
            Learn More
          </a>
        </div>
      </div>
    </div>
  </section>
  );
};

export default Component;