Dark Mode in Next.js and Tailwind CSS

Published: 12 April 2022
on channel: Cand Dev

11,597

254

Check out MiniTool MovieMaker: https://bit.ly/4hKFA9A Adding dark mode toggle in next.js and tailwind css with next-themes package.

👨‍💻Code:
https://github.com/candraKriswinarto/...

🔗Link:
Next js: https://nextjs.org/docs/getting-started
TailwindCSS: https://tailwindcss.com/docs/guides/n...
Next-Themes: https://github.com/pacocoursey/next-t...
HeroIcons: https://heroicons.com/

🌎Live:
https://next-tailwind-theme.vercel.app/

Timestamps:
0:00 - Intro
00:10 - Demo
02:21 - Setup Next Js
02:48 - Install & Setup tailwind css
04:26 - Sections folder
05:14 - Layout Component
09:19 - Header Component
14:23 - Hero Component
16:23 - Button Component
18:46 - Footer Component
20:27 - Toggle button
21:46 - Install next-themes package
31:44 - About page
32:44 - 404 page
32:29 - Done

👋🏻Contact Me:
https://canddev.vercel.app/

🌎 Find Me Here:
Instagram : / candra_kriswinarto
GitHub: https://github.com/candraKriswinarto/
Linkedin: / candra-kriswinarto

#darkMode #next.js #tailwind #enjoyCoding

Watch video Dark Mode in Next.js and Tailwind CSS online, duration hours minute second in high quality that is uploaded to the channel Cand Dev 12 April 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 11,597 times and liked it 254 visitors.

3,605

128