DEV Community

Cover image for 【Step by Step】How to implement Dark Mode with Tailwind CSS on React

【Step by Step】How to implement Dark Mode with Tailwind CSS on React

Taishi on September 28, 2020

This article is also on Medium and en.taishikato.com Taishi here👋 Today I am going to write about how to implement Dark Mode with Tailwind CSS....
Collapse
 
futureistaken profile image
R Z •

This is fine, just an extra 2 MB of "CSS" code, extra work for the browser, and just making our components dependent on external CSS. In fact, this list should be longer!

Collapse
 
thomasledoux1 profile image
Thomas Ledoux •

You can easily purge the CSS from Tailwind. They have a whole doc section about it: tailwindcss.com/docs/controlling-f...

Collapse
 
futureistaken profile image
R Z •

This approach has a dark side!

Thread Thread
 
thomasledoux1 profile image
Thomas Ledoux •

How so?

Collapse
 
taishi profile image
Taishi •

Yes, we can easily purge the CSS 😁

Collapse
 
thedevdavid profile image
David •

If you set up PostCSS and purge correctly, there won't be any problems with CSS size. You can easily set up inlining critical CSS too to help speed up loading and Lighthouse scores too.

Collapse
 
anirudhrowjee profile image
Anirudh Rowjee •

Perhaps the most to-the-point tailwind tutorial i've ever seen so far. Great Work!

Collapse
 
taishi profile image
Taishi •

Thank you for the kind words 😆

Collapse
 
fajarsiddiq profile image
Fajar Siddiq •

maji yabai 🔥 thanks for sharing Taishi

Collapse
 
taishi profile image
Taishi •

Hey, Fajar!

Thank you for the comment!
Maji Yabai🔥