Tailwind CSS media queries hidden – Reactjs

I’m a bit confused about something that is hopefully quite simple, I’m extremely new to tailwind CSS, and even after looking into documentation I was not able to find the solution myself.

I have an image that I want visible for larger screen sizes, but hidden for smaller screen sizes.

I tried adding "sm:hidden relative" classNames to an img tag, I expected it to set the img to hidden on devices smaller than 768px.

The Opposite of what I want happens, the img shows on all devices up to 768px, but none bigger

Here is the section of my tailwind.config.cjs with media query overrides;

 screens: {
      xs: "480px",
      ss: "620px",
      sm: "768px",
      md: "1060px",
      lg: "1200px",
      xl: "1700px",
    },

My Img tag is as follows;

  <img src={astronaught} alt="hero-astronaught" className=" z-[5] w-[100%] h-[100%] sm:hidden relative" />

If I only have relative, without the sm:hidden, as expected, the img shows on all devices, if I add the above code, it shows on smaller devices, but not devices larger than 768px, I am extremely confused.

I thought that the way it works logically with sm:hidden relative was "on sm devices, it is hidden, otherwise, it is relative"

Inspecting via console shows that the media query is being applied as follows in full-screen mode;

@media (min-width: 768px)
<style>
.sm:hidden {
    display: none;
}

Inspecting via console during responsive mode for a mobile device, shows no media query at all being applied.

An important thing to note is that I have used these media queries throughout the website and they work fine for padding and margins etc.

Any help would be appreciated, Thanks

Edit: If switching around the order, e.g. hidden sm:visible – then the image does not show on any device. If I inspect the class, it shows that the visible tag is applying, but so is the .hidden class, setting display to none