To switch between dark and light mode for these two images, the dark:block selector does not override the hidden class.
<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 utilities class does not take precedence here, but adding custom CSS will make it work.
https://i.stack.imgur.com/1mbhK.png
Configuration in Tailwind:
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 specificity of the CSS .hidden { display: none; } is lower than
@media (prefers-color-scheme: dark) .dark\:block { display: block; }