Dark mode with TailwindCSS in under 7 minutes

In this video, we are going to walkthrough how to add dark mode support using TailwindCSS.

Have a question about anything in this video? Drop it in the comments!

⏰ Timecodes ⏰
0:00 - Intro
0:12 - Starter code
0:27 - Method #1: System preference
2:11 - Method #2: Custom class name
5:48 - Simple animation for mode switching
6:38 - Outro

-------------------------------

[hawkdawg]

Thanks man, that transition part is a cherry on top

[fulviavaz]

Amazing! Your solution is much simpler that I was trying! Thanks!

[nisargjaiswal]

Suggestion for video: Keep mobile users in mind, so zoom in the code for better readability.

Nice video, keep it up buddy ✌️

[ethan.creates]

Dope video man! Loved the transition tip and everything else was very clear!

[bryan_]

Thanks a lot mate. I was struggling with Dark mode in Tailwind and you made it look simple. Appreciate it👍❤

[dr.insane]

Thanks brotha, The transition was a lifesaver.

[masoodacheampong]

Thank you very much, at the end, I knew you would use useState to handle the transition, so I did mine just like that.

[vladanisov]

This was incredibly helpful, thank you my man!

[chadvise]

This was so helpful thanks for the content ❤

[DEBUGENTITY]

Loved this video.. Thanks for making this🎉

[akshaykumar-xube]

Thanks bro. 💯Worth watching . just SUBSCRIBED

[TusharVerma-ik]

i created this button in navbar, now i am using this navbar in every component but the color is changing only in navbar not everywhere, how to solve this?

[KNEKIIIIa]

how we can make the navbar dark mode on all the pages??

[ahrenwagner]

Great video :)

Is there a way to do this without needing to prefix dark in your markup?

[tasfin]

for some reason after writing
* {
@apply transition-colors duration-200;
} this, all my other transition duration not working

[Kyruu]

So instead of using text, I chose to use icons for the toggle instead. I wonder how to add transition for the toggle icon so it can fade or spin etc. ? I've tried added transition class to the icon element but it doesn't work...

[alexdin]

thanks bro please can you make your video about "Custom themes with TailwindCSS in under 9 minutes" with this ?

i mean user can switch thems and change from dark and light in same time

[lolhp._.]

anyone know how to do the same thing but for the html tag?

[chanest]

Super helpful! I'm curious how you handle both use cases at once. Basically using the user's preferred theme during first site use but once the user chooses their preferred theme, it overrides their OS's preference upon every revisit. Also how do you handle images that need to be swapped out in dark mode?

[nonefvnfvnjnjnjevjenjvonej]

so how does tailwind get the dark mode actually. does it set it to dark on the html element?