# How to implement dark mode using TailwindCSS?
Dark mode is something which has gained a lot of popularity in the last few years. Many popular websites are also implementing a dark mode on their website.
However, dark mode can be a pain to setup if your css isn't well structured. Tailwind makes it very easy and instinctive to implement it. In this article, I'm going to go over how you can implement dark mode using Tailwind CSS.
## Prerequisites
- You should have a basic knowledge of Tailwind CSS.
- You should know a little Javascript to understand how the theme toggle works.
## Setup
Let's start by setting up a tailwind project. You also use bundlers like parcel, and this can also be used with any framework. Just setting up tailwind will be different and you can check that out [here](https://tailwindcss.com/docs/installation/framework-guides).
I will be using it using [npm](https://npmjs.com) without any bundler and with just HTML.
### Create folder
sh
```sh
mkdir dark-mode-tailwindcss
cd dark-mode-tailwindcss
npm init -y
```
You will see something like this
### Install Tailwind
```sh
npx tailwindcss init
```
Open `tailwind.config.js` and make the following change:
tailwind.config.js
```diff
- content: [],
+ content: ['./**/*.html'],
```
This will look for all html files and look for tailwind classes through them. Now, let's create an html file to start off with
sh
```sh
touch index.html
```
### When to use Dark Mode?
Now, tailwind supports two ways of using Dark Mode. One is `prefers-color-scheme` and one is using `classes`. So, the way the former works is, if the users system's preferred mode is dark mode then it'll use dark mode else will use light mode. In the class based mode, it will be applied when the `dark` class is applied to any element before the current element in the tree.
In this article, I'll be using classes just to demonstrate how to toggle between them, but feel free to use any. Not that `prefers-color-scheme` mode is used by default. To use `class` based mode you need to add the following line in `tailwind.config.js`
tailwind.config.js
```diff
module.exports = {
+ darkMode: 'class',
...
}
```
### Setup tailwind css file
Create a src directory with the tailwind css file
sh
```sh
mkdir -p src/css
touch src/css/tailwind.css
```
and add the following contents to it
src/css/tailwind.css
```css
@tailwind base;
@tailwind utilities;
@tailwind components;
```
### Setup css build commands
In your package.json make the following changes
package.json
```diff
...
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "css:build": "tailwindcss -i src/css/tailwind.css -o dist/css/tailwind.css",
+ "css:watch": "tailwindcss -i src/css/tailwind.css -o dist/css/tailwind.css --watch"
},
...
```
And then run
sh
```sh
npm run css:watch
```
## Setup html
index.html
```html
Tailwind Dark Mode
```
Now, this will be our starting point to the html. I've added the stylesheet which points to the compiled css generated by the Tailwind CLI.
I'm gonna setup a basic html site like so:
index.html
```html
Tailwind Dark Mode
This is a demo of Tailwind CSS Dark Mode.
```
Should show you something like this:
> I'm using the [serve](https://npmjs.org/serve) package by [Vercel](https://vercel.com) to serve my html. Just run `npx serve` from your project directory.
## Javascript
We'll be needing a little bit of javascript to manage the dark mode.
Add this in the `index.html` file: