Tailwind CSS | Dark & Light Theme Switcher

[@JohnKomarnicki]

Hopefully you enjoy this video. If you'd like to see more videos with Tailwind on the channel, be sure to leave a like on the video!

[@SomeAB]

Thanks, this worked for me, along with adding " darkMode: 'selector', " in my config file

[@abdulmlaikalomayri727]

Amazing video John, the way you simplest things is admirable.

[@JohnKomarnicki]

I appreciate that!

[@damianan982]

Thank you so much! I was struggling to implement a dark mode switch on my website, but with your approach, I have managed to do it.

[@priyanshuganatra]

Clear and straight to the point, thanks ❤

[@warprod]

Thanks for this one, very well explained

[@animemaster_2024]

Buen video bro, pero hay un problem, es que cuando se activa el modo oscuro, y al actualizer la página, me arroja un pantallazo blanco 2:29, como lo soluciono

[@juanrincon6576]

Thanks a lot! Loved it!!

[@universecode1101]

Good job, I thought Dark mode in these days for one of my projects

[@JohnKomarnicki]

Thank you!

[@nitinsoni9956]

As always a very well structured and easy to follow tutorial from you. Can we have a video on full blown Portfolio website with mobile responsive using all features of Tailwind 3.0

[@JohnKomarnicki]

I appreciate that! I take that idea into consideration!

[@gabriel_lk]

Thanks a lot!!!! Worked perfectly

[@rasyidshiddiq5008]

How to remove flash when reloading page?

[@codewithsoyeb]

One way to eliminate the white flash is to add to the html. This will mean that the browsers default flash will be dark mode not light mode.

[@creativehabib]

Thanks a lot! Good Tutorial

[@chadgregory9037]

My page is showing dark mode by default, and when I click the button I created it changes, but the dark mode isn't changing from being enabled to disabled

[@chadgregory9037]

OMG I got it hahahaha I literally wrote "darkmode" instead of "darkMode" omg it's so satisfying to not actually go nuts, and solve a problem, and get it working, omg lol

[@JohnKomarnicki]

Glad you were able to figure it out!

[@chadgregory9037]

@@JohnKomarnicki came a LONG ways since this morning... tailwind is fun =]

[@talhaabdurraheem8491]

@@chadgregory9037 Brooo tysm!!! I haven't had breakfast and its noon here, was struggling with this issue. Thx to you now I can eat.

[@gerryleonugroho]

Hi John, I'm following along with your JS code on my local machine. As it appear on my end I got some different results? Once I hit the URL, it'd present me with the light mode by default, then I switch to dark-mode, it worked. But once I'm navigating to other page, it reverted back to light-mode without me having to click on the dark mode again, any clues why this happened?

[@JohnKomarnicki]

How are you utilizing this? In just a basic html, css & js app? Or a JS framework?

[@gerryleonugroho]

Hi @@JohnKomarnicki currently only on plaon HTML, CSS & JS. But planning to integrate them with Astro SSG. What do you think?

[@jeyjeymohaa3081]

I have had problem installing tailwind css v3 into a vue 3 project (vue/CLI) and after i was done with all the steps in the official tailwind css documentation, and ran the server. I got an error *tailwindcss requires postcss 8* my postcss is is 8.0.4. What could be the prob?

[@JohnKomarnicki]

What version of Vue are you using within your package.json?

[@MohamedShetifa]

much thanks bro

[@frankilunga2288]

very clear instructions 🫂

[@xtheory9640]

clean and simple 💝💝

[@artemb.2677]

thanks a lot! short and simple!

[@JohnKomarnicki]

Glad it was helpful!

[@JaehoonMe]

Good job

[@adityamore896]

Can anyone help how to deploy this html,node js and tailwind project!!!

[@salmaahmed7789]

where is the source code

[@suryon3822]

thanks

[@NiM44]

If you have issue with toggling may use .display-none { display: none !important; } instead of @apply

[@jogofin4939]

Good tutorial but sheeze just use display:none instead of applying the CSS from tailwind lol

[@nadim9164]

thank you

[@JohnKomarnicki]

🙌

[@matthewkk5087]

can u explain on react please?

[@JohnKomarnicki]

Sorry, unfortunately I don’t use react!

[@forhadbinamir7299]

Hay dud! after dark mode once I come back to the light mode then after reloading the page going to the dark mode why this happen can you tell me please or solve this issue Please😍 Thanks for the meaningful video

[@forhadbinamir7299]

Hi dud I got the solution Thanks

[@JohnKomarnicki]

Awesome, yeah to me it sounds like something wasn’t right with the function grabbing the local storage preference, possibly

[@fuukowatty9817]

You have polish surname John

[@badasscoder4481]

you removed the last video. Vue planner app. Please reupload.

[@JohnKomarnicki]

I did not remove it, the purpose of the stream we did was to give an insight as to how I create the projects. I’ll be releasing this project soon as a video on my channel

[@badasscoder4481]

@@JohnKomarnicki Thank you Sir

[@cjmaaz]

@@JohnKomarnicki Great! waiting for the Video and next live stream.

[@JohnKomarnicki]

@@cjmaaz Saturday morning at 9am EST! We should be able to wrap it up during that stream!