{"pageProps":{"contents":[{"slug":"dark-mode-in-tailwindcss","title":"Dark Mode in TailwindCSS","description":"There are two ways to introduce dark mode into your TailwindCSS projects.","content":"\nThere are two ways to quickly add dark mode to your Tailwind CSS projects.\nThe first one is the quickest and easiest way. The second one is your choice if you want to have a controlled theme switch.\n\n# 1. Screen Config\n\nThis is a little hack and you can't manually switch the theme as it detects the theme from the user's operating system.\n\n## Set Config\n\nExtend your `tailwind.config.js` theme by adding a new screen type.\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n screens: {\n dark: { raw: '(prefers-color-scheme: dark)' },\n },\n },\n },\n}\n```\n\n## Use Styles\n\nYou can now use it like you would use different screen sizes.\n\n```html\n\n```\n\nIt's also possible to add states like _hover_ into the dark mode.\n\n```html\n\n```\n\n# 2. Plugin\n\nAnother, more clean way and with the possibility to switch the theme manually is the plugin [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode)\n\nAdd the class `` to see the dark mode or remove it to see the regular theme.\n","type":"tip","tags":["design","tailwindcss","design"],"publishedAt":"2020-04-12T20:48:09.100Z","image":null,"updatedAt":null,"readingTime":{"text":"1 min read","minutes":0.87,"time":52200,"words":174},"data":{"title":"Dark Mode in TailwindCSS","description":"There are two ways to introduce dark mode into your TailwindCSS projects.","tags":["design","tailwindcss","design"],"publishedAt":"2020-04-12T20:48:09.100Z","updatedAt":null,"type":"tip"}}],"tag":"design"},"__N_SSG":true}