【단계별】 React에서 Tailwind CSS로 다크 모드를 구현하는 방법

This article is also on Medium and en.taishikato.com

여기👋

오늘은 Tailwind CSS로 Dark Mode를 구현하는 방법에 대해 글을 쓰려고 합니다.
다크 모드는 이제 유용성을 위한 중요한 기능 중 하나이며 아직 수행하지 않은 경우 웹 사이트에서 이를 구현해야 합니다.

괜찮아요. 아주 쉽습니다!

BTW, GitHub의 전체 예제는 여기 ✌️

타이시카토 / Dark-Mode-with-Tailwind-CSS

이 저장소는 내 기사용입니다. https://dev.to/taishi/step-by-step-how-to-implement-dark-mode-with-tailwind-css-on-react-3565

CRA CLI로 React 앱 만들기

$ npx create-react-app dark

http://local:3000에서 호스팅하자

$ cd dark
$ npm run start

이제 귀하의 http://localhost:3000 에서 이 페이지를 보셨으리라 믿습니다 🎉



이번에는 ./src/App.css 가 필요하지 않으니 파일을 삭제하고 아래와 같이 간단하게 ./src/App.js 만드세요😸

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;

이제 웹사이트가 훨씬 간단해 보입니다.

Tailwind CSS 추가

Tailwind CSS용 패키지를 추가해 보겠습니다.

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

Tailwind CSS의 구성 파일을 생성합니다.

아래 명령은 ./tailwind.config.js 를 생성합니다.

$ npx tailwindcss init

postcss.config.js 추가

내용은 이렇게 생겼습니다.

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

스타일시트 파일을 만듭니다.

아래와 같이 ./src/tailwind.src.css를 추가해 보자.

@tailwind base;

@tailwind components;

@tailwind utilities;

CSS 파일을 생성하는 스크립트 추가

tailwind:css의 package.json는 React 앱에서 실제로 사용하는 ./src/tailwind.css로 CSS 파일을 빌드합니다.

"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",
     .
     .
     .

start와 build가 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",

시작 또는 빌드 스크립트를 사용할 때마다 CSS 파일이 생성됩니다👍

App.js에서 tailwind.css를 가져오겠습니다.

import React from 'react';
+ import ./'tailwind.css';

 function App() {
   return (

모든 설정! 이제 앱에서 Tailwind CSS를 사용합니다 🌬️

Tailwind CSS를 사용하여 텍스트 정렬

Tailwind CSS의 클래스text-center를 사용해 보세요. 이제 App.js는 아래와 같습니다.

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;

귀하의 웹 페이지는 아래와 같습니다.

다크 모드용 Tailwind CSS 맞춤설정

우리는 dark:를 이렇게 사용하고 싶습니다. 이 예에서 prefers-color-scheme의 값이 dark이면 bg-black가 유효합니다.

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

먼저 tailwind.config.js를 커스터마이징해야 합니다😎

화면 속성 사용자 지정

현재tailwind.config.js는 다음과 같아야 합니다.

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

screens 아래에 extend 속성을 추가합니다.

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

무슨 일이 일어날까요!?

Tailwind CSS 문서 - Custom media queries 에 따르면 자체 화면을 만들 수 있습니다. 즉, tailwindcss 명령은 다음과 같이 CSS를 생성합니다.

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

  @media (min-width: 640px) {
    .dark\:container {
      max-width: 640px;
    }
  }
  .
  .

npm run start를 다시 실행하여 새로운 tailwind.css를 생성하고 파일을 확인합시다 👀



작동하고 있습니다!

다크 모드

앱을 다크 모드로 사용 가능하게 만들어 보세요 😈
dark:bg-black dark:text-white에 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;

이제 다크 모드가 있습니다 👽



읽어 주셔서 감사합니다.