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
 
taishi profile image
Taishi

Yeeees👍

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🔥