Here's a quickest way I've found to achieve dark and light mode theming in tailwindcss.
In tailwind.config.js
In this file, add the following screens to extend. i.e
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
},
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {},
screens: {
'light': { raw: '(prefers-color-scheme: light)' },
'dark': { raw: '(prefers-color-scheme: dark)' }
}
},
},
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
},
plugins: [],
}
Now, we can do something like dark:bg-red-700
.
To test, open your Google dev tools console, click the 3 dots icon, click more tools then select rendering.
Under rendering, scroll down to Emulate CSS media feature prefers-color-scheme. In the dropdown, select prefers-color-scheme: dark
You should see our dark:bg-red-700
now take effect.
Top comments (0)