[{"id":"877bbe29-3832-47fa-b466-a821550efbd7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Tailwind CSS v4","styles":{}}],"children":[]},{"id":"7c943c09-5abb-4c82-8cb4-f62888126ecc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"1. Enable Dark Variant (CSS)","styles":{}}],"children":[]},{"id":"0f424330-578d-4784-9a8e-7ee4f2b9b8ff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In ","styles":{}},{"type":"text","text":"Tailwind v4","styles":{"bold":true}},{"type":"text","text":", configuration is done directly in CSS. Add this to your main CSS file.","styles":{}}],"children":[]},{"id":"94628139-eb3c-43f1-9d45-77861ca8a6c3","type":"procode","props":{"code":"@import \"tailwindcss\";\n\n/* enable dark mode using class */\n@custom-variant dark (&:where(.dark, .dark *));","language":"javascript","filename":"","files":"[{\"id\":\"llra4x327\",\"name\":\"code\",\"code\":\"@import \\\"tailwindcss\\\";\\n\\n/* enable dark mode using class */\\n@custom-variant dark (&:where(.dark, .dark *));\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"00a20fd9-20da-4c63-af4e-b860c9ea28ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This tells Tailwind to activate ","styles":{}},{"type":"text","text":"dark:","styles":{"code":true}},{"type":"text","text":" utilities when a parent element has the ","styles":{}},{"type":"text","text":".dark","styles":{"code":true}},{"type":"text","text":" class. ","styles":{}}],"children":[]},{"id":"9bb77b26-8701-4638-9737-4486992cacf4","type":"divider","props":{},"children":[]},{"id":"7c497ee1-0154-47f7-b2d1-89b1c754bc6f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"2. Use the ","styles":{}},{"type":"text","text":"dark:","styles":{"code":true}},{"type":"text","text":" Utility","styles":{}}],"children":[]},{"id":"863be617-fb73-4e52-a72a-a6077075d041","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Apply dark styles using the ","styles":{}},{"type":"text","text":"dark:","styles":{"code":true}},{"type":"text","text":" prefix.","styles":{}}],"children":[]},{"id":"4a60e8cf-7be0-45f4-ae31-aec4a3879c82","type":"procode","props":{"code":"

\n Dark mode example\n

","language":"javascript","filename":"","files":"[{\"id\":\"yzl9r69sc\",\"name\":\"code\",\"code\":\"

\\n Dark mode example\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"767386f4-6051-4160-a63c-632610c19b50","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Class","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Effect","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"bg-white","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Light mode background","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"text-black","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Light mode text","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"dark:bg-gray-900","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Background in dark mode","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"dark:text-white","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Text color in dark mode","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"fbc20ebf-2df7-4740-9858-8888261736f3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"dark:","styles":{"code":true}},{"type":"text","text":" variant applies styles only when dark mode is active. ","styles":{}}],"children":[]},{"id":"965b8756-35d0-408a-939d-1fc45d6e07c1","type":"divider","props":{},"children":[]},{"id":"f08d33aa-df23-4db6-811f-a5b6301661ed","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"3. Activate Dark Mode","styles":{}}],"children":[]},{"id":"b69da1af-ecbc-48a0-b01b-c36ae83ac61c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Add the ","styles":{}},{"type":"text","text":"dark","styles":{"code":true}},{"type":"text","text":" class to the root element.","styles":{}}],"children":[]},{"id":"0f2923cc-b29b-4d58-b0df-f856309e0770","type":"procode","props":{"code":"\n\n\n

\n Dark theme active\n

\n\n\n","language":"javascript","filename":"","files":"[{\"id\":\"a0vzbrpz6\",\"name\":\"code\",\"code\":\"\\n\\n\\n

\\n Dark theme active\\n

\\n\\n\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6fc00550-a661-4b88-bf6c-8f7b1bda786c","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"HTML","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Result","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Light mode","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Dark mode","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"7ddf8ef7-5189-495a-9730-4aa38ceff9d8","type":"divider","props":{},"children":[]},{"id":"fc312dc1-3c05-4058-ba68-a3356890e746","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"4. Optional Toggle (JavaScript)","styles":{}}],"children":[]},{"id":"b3584b54-e943-4d3d-952a-417e26ed723c","type":"procode","props":{"code":"\n\n","language":"javascript","filename":"","files":"[{\"id\":\"fmnd9k15v\",\"name\":\"code\",\"code\":\"\\n\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"83429d4a-75e7-4d54-8064-c298a50343c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Clicking the button will switch between light and dark theme.","styles":{}}],"children":[]},{"id":"64e61a0e-3bc3-4ff2-af5c-955690082845","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9afffc24-672a-4c29-9350-76a27245055c","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: sans-serif;\\n -webkit-font-smoothing: auto;\\n -moz-font-smoothing: auto;\\n -moz-osx-font-smoothing: grayscale;\\n font-smoothing: auto;\\n text-rendering: optimizeLegibility;\\n font-smooth: always;\\n -webkit-tap-highlight-color: transparent;\\n -webkit-touch-callout: none;\\n}\\n\\nh1 {\\n font-size: 1.5rem;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\n\\nTailwind Dark Mode\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n

\\n\\n

\\nTailwind Dark Mode\\n

\\n\\n

\\nSystem theme supported + manual toggle.\\n

\\n\\n\\n\\n

\\n\\n\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"6a560265-e9e5-4f31-a003-be2289361208","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"ho","styles":{}}],"children":[]},{"id":"abc7702d-3eea-46f0-b733-3635a9d10f80","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]