Tailwind CSS를 사용하여 Nextjs에 다크 모드를 추가하는 쉬운 방법입니다.

4564 단어 nextjstailwindcsscssjavascript
응용 프로그램에 어두운 모드를 성공적으로 만들기 위해 알아야 할 몇 가지 고유한 핵이 있습니다. 이 게시물에서는 처음부터 끝까지 NextJS 앱의 다크 모드를 만드는 과정을 살펴보겠습니다.

전제 조건


  • Node.js - 12.22.0, v16.12.0 또는 higher .
  • MacOS, Windows(WSL 포함) 및 Linux가 지원됨

    • 시작하기



    Tailwind CSS를 NextJS에 추가하는 것은 매우 간단하므로 명령을 실행하면 필요한 모든 종속성이 즉시 설치됩니다.

    설치

    npm install -D tailwindcss@latest postcss@latest autoprefixer@latest


    💡 Note - Via the command above, you install Tailwind CSS and the dependencies PostCSS and autoprefixer.



    이제 tailwind.config.js 파일과 postcss.config.js 파일을 만들 수 있습니다. postcss.config.js 파일을 열고 사용하려는 모든 플러그인을 포함합니다.

    module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }


    💡 Note - I have gone and added tailwindcss and autoprefixer.


    tailwind.config.js 파일 내부에 다음 변경 사항을 추가합니다.

    module.exports = {
content: [
"./pages/**/*.{html,js,ts,jsx,tsx}",
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
extend: { backgroundColor: {
        primary: 'var(--color-bg-primary)',
        secondary: 'var(--color-bg-secondary)',
      },
      textColor: {
        accent: 'var(--color-text-accent)',
        primary: 'var(--color-text-primary)',
        secondary: 'var(--color-text-secondary)',
      },},
},
plugins: [],
}


    💡 Note - Add .light and .dark CSS classes and assign the colors for each variables.



    이제 styles/globals.css를 열고 새로 생성된 css 변수와 함께 다음 tailwind 지시문을 추가합니다.

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


.dark {
  --color-bg-primary: #000000;
  --color-bg-secondary: #283141;
  --color-text-primary: #f7fafc;
  --color-text-secondary: #e2e8f0;
  --color-text-accent: #4F46E5;
}

.light {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #edf2f7;
  --color-text-primary: #1F2937;
  --color-text-secondary: #4a5568;
  --color-text-accent: #6366F3;
}

    npm run dev를 실행하여 개발 서버를 시작합니다.
    pages/index.js를 다음과 같이 변경하여 Tailwind CSS가 작동하는지 확인합니다.

    import React, { useState } from "react";
import { FaMoon, FaSun} from 'react-icons/fa/index.js';
export default function Home() {
  const [darkMode, setDarkMode] = useState(false);
  return (
    <div className={darkMode ? "dark" : ""}>
      <Head>
        <title>DarkMode</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="apple-touch-icon" href="/favicon.ico" />
      </Head>

      <main className={"bg-primary px-10 md:px-20 lg:px-40"}>
      <section className="min-h-screen">
      <nav className="py-10 mb-12 flex justify-between">
        <h1 className="font-Montserrat text-xl border-black">
           Photo Goes Here
        </h1>
        <ul className="flex items-center">
          <li>
          <button id="toggle" onClick={(e) => setDarkMode(!darkMode) }>
            { darkMode ? <FaSun color="white" className="cursor-pointer text-2xl"/>: <FaMoon className="cursor-pointer text-2xl"/> }
            </button>  
          </li>
          <li>
            <a 
              className="bg-gradient-to-r from-cyan-500 text- to-fuchsia-500 text-white font-bold px-4 py-2 border-none rounded-md ml-8"
              href="#"
              aria-label=""
            >
              Resume
            </a>
          </li>
        </ul>
      </nav>
    </section>
      </main>
    </div>
  )
}


    그런 다음 테마가 light에서 darkMode로 변경되는 것을 볼 수 있어야 합니다.

    Python 사전 로드됨
    Next-Auth 및 MongoDB를 사용하여 자격 증명으로 인증

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage