为了在这两个图像之间切换暗/亮模式，dark:block不会覆盖hidden选择器。

<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>

实用程序中的类不会覆盖它，但一旦我编写了自定义CSS，它就会工作。

顺风配置：

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: []
};

CSS特异性.hidden { display: none; }低于@media (prefers-color-scheme: dark) .dark\:block { display: block; }，但是是什么导致了这种行为呢？