Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

September 28, 2020 12:00 am GMT

Step by StepHow to implement Dark Mode with Tailwind CSS on React

Taishi here

Today I am going to write about how to implement Dark Mode with Tailwind CSS.\
Dark Mode is now one of the important features for usability and you should implement this on your website if you have not done yet.

Don't worry. It's quite easy!

BTW, the complete example on GitHub is here

taishikato / Dark-Mode-with-Tailwind-CSS

Create your React app with CRA CLI

$ npx create-react-app dark

Let's host it on http://local:3000

$ cd dark$ npm run start

Now I believe you see this page on your http://localhost:3000

This time we don't need ./src/App.css, so delete the file and make ./src/App.js simpler like below

import React from 'react';function App() {  return (    <div className="App">      <header className="App-header">        <p>          Edit <code>src/App.js</code> and save to reload.        </p>        <a          className="App-link"          href="https://reactjs.org"          target="_blank"          rel="noopener noreferrer"        >          Learn React        </a>      </header>    </div>  );}export default App;

Now the website looks much simpler.

Add Tailwind CSS

Let's add packages for Tailwind CSS

$ npm i tailwindcss autoprefixer postcss-cli --save-dev

Generate a config file of Tailwind CSS.

The command below creates ./tailwind.config.js.

$ npx tailwindcss init

Add `postcss.config.js`

The content looks like this.

module.exports = {  plugins: [    require('tailwindcss'),    require('autoprefixer'),  ],};

Make a Stylesheet file.

Let's add a ./src/tailwind.src.css like below.

@tailwind base;@tailwind components;@tailwind utilities;

Add a script to generate a CSS file

tailwind:css on package.json builds a CSS file as ./src/tailwind.css you actually use in your React app.

"scripts": {+   "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css",     "start": "react-scripts start",     "build": "react-scripts build",     .     .     .

Let start and build use tailwind:css.

"scripts": {  - "start": "react-scripts start",  - "build": "react-scripts build",  + "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css",  + "start": "npm run tailwind:css && react-scripts start",  + "build": "npm run tailwind:css && react-scripts build",

So not every time you use the start or build script, it generates a CSS file for you

Let's import `tailwind.css` in `App.js`

import React from 'react';+ import ./'tailwind.css'; function App() {   return (

All set! Now your app uses Tailwind CSS

Use Tailwind CSS to align your text

Just try to use a class text-center from Tailwind CSS. Now our App.js looks like below.

import React from 'react';import './tailwind.css';function App() {  return (    <div className="App">      <header className="App-header text-center">        <p>          Edit <code>src/App.js</code> and save to reload.        </p>        <a          className="App-link"          href="https://reactjs.org"          target="_blank"          rel="noopener noreferrer"        >          Learn React        </a>      </header>    </div>  );}export default App;

Your web page looks like below.

Customize Tailwind CSS for Dark mode

We want to use dark: like this. In this example, when the value of prefers-color-scheme is dark, bg-black becomes valid.

<div className="dark:bg-black">

First, we need to customize tailwind.config.js to make it happen

Customize `screens` property

Your current tailwind.config.js should look like this.

module.exports = {  future: {    // removeDeprecatedGapUtilities: true,    // purgeLayersByDefault: true,  },  purge: [],  theme: {    extend: {},  },  variants: {},  plugins: [],}

Add screens property under extend.

module.exports = {  future: {    removeDeprecatedGapUtilities: true,    purgeLayersByDefault: true,  },  purge: ['./src/App.js'],  theme: {    extend: {      screens: {        dark: { raw: '(prefers-color-scheme: dark)' },      },    },  },  variants: {},  plugins: [],}

What's gonna happen!?

According to the Tailwind CSS document - Custom media queries, we can make our own screen, which means tailwindcss command generates CSS like this:

@media (prefers-color-scheme: dark) {  .dark\:container {    width: 100%;  }  @media (min-width: 640px) {    .dark\:container {      max-width: 640px;    }  }  .  .

Let's execute npm run start again to generate a new tailwind.css and check the file

It's working!

Dark Mode

Let's make your app dark mode available

Just add dark:bg-black dark:text-white on App.js.

import React from 'react';import './tailwind.css';function App() {  return (    <div className="App dark:bg-black dark:text-white">      <header className="App-header text-center">        <p>          Edit <code>src/App.js</code> and save to reload.        </p>        <a          className="App-link"          href="https://reactjs.org"          target="_blank"          rel="noopener noreferrer"        >          Learn React        </a>      </header>    </div>  );}export default App;

Now it has Dark Mode

Thank you for reading.

Original Link: https://dev.to/taishi/step-by-step-how-to-implement-dark-mode-with-tailwind-css-on-react-3565

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To