Tailwind css group-hover:visible dosn't work properly

[kajurek]

Following the example from tailwindcss: https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups. Item that should be invisible is still visible.

just to be sure the config of the tailwind is ok I followed https://stackoverflow.com/questions/71010317/react-testing-library-cant-read-styles-using-tailwind-css-classes

"jsdom": "22.1.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "14.0.0",
"tailwindcss": "^3.3.3",

Relevant code or config:

  it.only('example', () => {
    render(
      <div>
        <div data-testid="root" className="group/item">
          <div data-testid="test1" className="invisible group-hover/item:visible">
            test
          </div>
        </div>
      </div>,
    );

    let el = screen.getByTestId('root');
    expect(el).toBeVisible();
    expect(screen.getByTestId('test1')).not.toBeVisible();
  });

it gives:

Error: expect(element).not.toBeVisible()
Received element is visible:
  <div
  class="invisible group-hover/item:visible"
  data-testid="test1"
/>