[{"data":1,"prerenderedAt":243},["ShallowReactive",2],{"\u002Farticles\u002Fadding-dark-mode-to-tailwind-css":3},{"id":4,"title":5,"body":6,"createdAt":234,"description":235,"extension":29,"meta":236,"navigation":237,"path":238,"rawbody":239,"seo":240,"stem":241,"__hash__":242},"articles\u002Farticles\u002Fadding-dark-mode-to-tailwind-css.md","Adding dark mode to Tailwind CSS",{"type":7,"value":8,"toc":232},"minimark",[9,39,52,63,168,179,225,228],[10,11,12,19,20,25,26,30,31,34,35,38],"p",{},[13,14,18],"a",{"href":15,"rel":16},"https:\u002F\u002Ftailwindcss.com",[17],"nofollow","Tailwind CSS"," is a great new utility-first framework that is quickly growing in popularity. I’ve become a huge fan of it since I can focus on writing CSS without switching contexts or worrying about ",[13,21,24],{"href":22,"rel":23},"https:\u002F\u002Fwww.martinfowler.com\u002Fbliki\u002FTwoHardThings.html",[17],"naming classes",". It comes with a ton of functionality out-of-the-box including responsive  support via modifiers like ",[27,28,29],"code",{},"md"," and ",[27,32,33],{},"lg",". As dark- and light-modes are becoming more popular, there’s a push for supporting both on your site. This is easy to accomplish with the ",[27,36,37],{},"prefers-color-scheme: dark"," media query. This is very easy to add to Tailwind CSS and be able to utilize like their other responsive modifiers. Here’s how:",[10,40,41,42,45,46,51],{},"Open up your ",[27,43,44],{},"tailwind.config.js"," . If you don’t have a config file yet, you can create one following ",[13,47,50],{"href":48,"rel":49},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fconfiguration\u002F",[17],"Tailwind CSS’s configuration guide",".",[10,53,54,55,58,59,62],{},"We don’t want to lose the predefined media queries, so let’s ",[27,56,57],{},"extend"," a ",[27,60,61],{},"screens"," property to add our dark mode media query:",[64,65,70],"pre",{"className":66,"code":67,"filename":44,"language":68,"meta":69,"style":69},"language-js shiki shiki-themes github-light github-dark","module.exports = {\n  theme: {\n    extend: {\n      screens: {\n        dark: {\n          raw: '(prefers-color-scheme: dark)',\n        },\n        \u002F\u002F => @media (prefers-color-scheme: dark) { ... }\n      },\n    },\n  },\n};\n","js","",[27,71,72,94,100,106,112,118,131,137,144,150,156,162],{"__ignoreMap":69},[73,74,77,81,84,87,91],"span",{"class":75,"line":76},"line",1,[73,78,80],{"class":79},"sj4cs","module",[73,82,51],{"class":83},"sVt8B",[73,85,86],{"class":79},"exports",[73,88,90],{"class":89},"szBVR"," =",[73,92,93],{"class":83}," {\n",[73,95,97],{"class":75,"line":96},2,[73,98,99],{"class":83},"  theme: {\n",[73,101,103],{"class":75,"line":102},3,[73,104,105],{"class":83},"    extend: {\n",[73,107,109],{"class":75,"line":108},4,[73,110,111],{"class":83},"      screens: {\n",[73,113,115],{"class":75,"line":114},5,[73,116,117],{"class":83},"        dark: {\n",[73,119,121,124,128],{"class":75,"line":120},6,[73,122,123],{"class":83},"          raw: ",[73,125,127],{"class":126},"sZZnC","'(prefers-color-scheme: dark)'",[73,129,130],{"class":83},",\n",[73,132,134],{"class":75,"line":133},7,[73,135,136],{"class":83},"        },\n",[73,138,140],{"class":75,"line":139},8,[73,141,143],{"class":142},"sJ8bj","        \u002F\u002F => @media (prefers-color-scheme: dark) { ... }\n",[73,145,147],{"class":75,"line":146},9,[73,148,149],{"class":83},"      },\n",[73,151,153],{"class":75,"line":152},10,[73,154,155],{"class":83},"    },\n",[73,157,159],{"class":75,"line":158},11,[73,160,161],{"class":83},"  },\n",[73,163,165],{"class":75,"line":164},12,[73,166,167],{"class":83},"};\n",[10,169,170,171,174,175,178],{},"Then you can add ",[27,172,173],{},"dark:"," prefix to any of your rules that support the ",[27,176,177],{},"responsive"," variant and those rules will take effect when dark mode is enabled!",[64,180,184],{"className":181,"code":182,"language":183,"meta":69,"style":69},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=“text-gray-900 dark:text-gray-100”>\n  \u003C!-- ... -->\n\u003C\u002Fdiv>\n","html",[27,185,186,211,216],{"__ignoreMap":69},[73,187,188,191,195,199,202,205,208],{"class":75,"line":76},[73,189,190],{"class":83},"\u003C",[73,192,194],{"class":193},"s9eBZ","div",[73,196,198],{"class":197},"sScJk"," class",[73,200,201],{"class":83},"=",[73,203,204],{"class":126},"“text-gray-900",[73,206,207],{"class":197}," dark:text-gray-100”",[73,209,210],{"class":83},">\n",[73,212,213],{"class":75,"line":96},[73,214,215],{"class":142},"  \u003C!-- ... -->\n",[73,217,218,221,223],{"class":75,"line":102},[73,219,220],{"class":83},"\u003C\u002F",[73,222,194],{"class":193},[73,224,210],{"class":83},[10,226,227],{},"Now get out there and support dark mode!",[229,230,231],"style",{},"html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":69,"searchDepth":96,"depth":96,"links":233},[],"2020\u002F07\u002F15","Follow this simple guide to add dark mode to your Tailwind CSS configuration.",{},true,"\u002Farticles\u002Fadding-dark-mode-to-tailwind-css","---\ntitle: Adding dark mode to Tailwind CSS\ndescription: Follow this simple guide to add dark mode to your Tailwind CSS configuration.\ncreatedAt: 2020\u002F07\u002F15\n---\n[Tailwind CSS](https:\u002F\u002Ftailwindcss.com) is a great new utility-first framework that is quickly growing in popularity. I’ve become a huge fan of it since I can focus on writing CSS without switching contexts or worrying about [naming classes](https:\u002F\u002Fwww.martinfowler.com\u002Fbliki\u002FTwoHardThings.html). It comes with a ton of functionality out-of-the-box including responsive  support via modifiers like `md` and `lg`. As dark- and light-modes are becoming more popular, there’s a push for supporting both on your site. This is easy to accomplish with the `prefers-color-scheme: dark` media query. This is very easy to add to Tailwind CSS and be able to utilize like their other responsive modifiers. Here’s how:\n\nOpen up your `tailwind.config.js` . If you don’t have a config file yet, you can create one following [Tailwind CSS’s configuration guide](https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fconfiguration\u002F).\n\nWe don’t want to lose the predefined media queries, so let’s `extend` a `screens` property to add our dark mode media query:\n\n```js[tailwind.config.js]\nmodule.exports = {\n  theme: {\n    extend: {\n      screens: {\n        dark: {\n          raw: '(prefers-color-scheme: dark)',\n        },\n        \u002F\u002F => @media (prefers-color-scheme: dark) { ... }\n      },\n    },\n  },\n};\n```\n\nThen you can add `dark:` prefix to any of your rules that support the `responsive` variant and those rules will take effect when dark mode is enabled!\n\n```html\n\u003Cdiv class=“text-gray-900 dark:text-gray-100”>\n  \u003C!-- ... -->\n\u003C\u002Fdiv>\n```\n\nNow get out there and support dark mode!\n",{"title":5,"description":235},"articles\u002Fadding-dark-mode-to-tailwind-css","SmNwsnQfBA8dk2Duowa7-21f4Uk6xkkLEMGkusCU_pw",1794024371782]