Tailwinds dark:hidden / dark:block won't override it's own hidden selector

In order to toggle dark/light mode between these two images, dark:block doesn't override the hidden selector.

<div className="ml-5 content-center">
  <img className="hidden dark:block h-6 w-auto my-1" src="/static/some-logo-white.svg" alt="Some Logo Dark" />
  <img className="block dark:hidden h-6 w-auto my-1" src="/static/some-logo-blue.svg" alt="Some Logo" />
</div>

The class from utilities won't override it, but once I write my custom CSS it will work.

Tailwind config:

module.exports = {
    purge: [],
    darkMode: 'media',
    theme: {
        colors: {
            black: '#000000',
            blue: '#14213D',
            orange: '#FCA311',
            gray: {
                100: '#f7fafc',
                200: '#cccccc',
                300: '#adadad',
                400: '#858585',
                500: '#666666',
                600: '#3d3d3d',
                700: '#292929',
                800: '#1f1f1f',
                900: '#141414',
            },
            white: '#FFFFFF'
        },
        fontFamily: {
            sans: ['Nunito', 'sans-serif'],
            serif: ['Lora', 'serif'],
        },
    },
    variants: {
        extend: {
            display: ['dark'],
        },
    },
    plugins: []
};

The CSS specificity .hidden { display: none; } is lower than @media (prefers-color-scheme: dark) .dark\:block { display: block; }, but what causes this behaviour?