Tailwind를 사용하여 Next.js 프로젝트에 다크 모드를 추가하는 방법은 무엇입니까?

17108 단어 codenewbienextjsjavascriptwebdev
이 블로그에서는 Tailwind를 사용하여 Next.js 프로젝트에 다크 모드를 추가하는 방법을 살펴보겠습니다.

시작하자

스택
  • Next.js
  • 테일윈드 CSS
  • 넥스트 테마
  • 타자기

    • 먼저 Next.js 프로젝트를 설정하겠습니다. 터미널로 이동하여 다음 명령을 입력하십시오.

    npx create-next-app next-tailwind-boilerplate --ts


    위의 명령은 eslint가 미리 구성된 새로운 Next.js 프로젝트를 시작합니다.

    cd next-tailwind-boilerplate
yarn dev


    위의 명령을 실행하면 화면에 기본 Next.js 사이트가 표시됩니다.



    Tailwind CSS 추가:



    프로젝트에 tailwind css를 추가해 봅시다. 순풍 공식docs의 발자취를 따라가게 됩니다. 터미널로 이동하여 다음 명령을 입력하십시오.

    yarn add tailwindcss postcss autoprefixer -D
npx tailwindcss init -p


    참고: npm을 사용하여 종속 항목을 설치할 수도 있습니다.

    위의 명령은 종속 항목인 tailwindcss를 설치하고 tailwind.config.js 및 postcss.config.js를 모두 생성합니다. 구성으로 이동하여 다음을 붙여넣습니다. 이렇게 하면 css가 classNames를 찾는 데 필요한 파일을 알 수 있습니다.

    content configuration 에 대한 문서에 대한 추가 정보.

    // tailwind.config.ts

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}


    이제 프로젝트에 tailwind css를 주입할 것입니다. global.css 파일로 이동하여 다음을 추가합니다.

    
/* global.css */

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


    완료되면 페이지 디렉토리의 index.tsx에 tailwind 클래스를 추가하십시오. 이제 서버를 종료하고 터미널에서 yarn dev -p 3001를 사용하여 다시 실행하십시오. 브라우저로 이동하여 localhost:3001을 누르십시오.

    
...
<h1 className="text-3xl font-bold underline">
   Next.js + Tailwind Starter 
</h1>
...




    다음 테마를 사용하여 다크 모드 추가:



    next-themes을 사용하여 Next.js 프로젝트에 어두운 모드 토글을 추가할 것입니다. 여기에는 ThemeProvider가 있어 응용 프로그램을 래핑하고 useTheme 후크를 사용하여 응용 프로그램의 현재 테마를 가져올 수 있습니다.

    터미널로 이동하여 다음 명령을 입력하십시오.

    yarn add next-themes

    _app.tsx 파일로 이동하여 다음 내용을 추가하고 브라우저로 이동합니다.

    // _app.tsx

import { ThemeProvider } from 'next-themes'
import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return(
    <ThemeProvider enableSystem={true} attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  ) 
}


    이와 같은 것을 볼 수 있습니다. 처음에는 시스템 구성에서 테마 값을 가져옵니다. 어두운 모드를 활성화한 경우 ThemeProvider를 설정하면 어두워지고 그렇지 않으면 light 모드가 됩니다.

    참고: 위에서 언급한 시스템 테마를 light 모드로 변경하고 브라우저 창으로 이동하여 결과를 확인하십시오. 어떻게 진행되었는지 댓글로 알려주세요.
    attribute의 다크 모드 관련 스타일ThemeProvider을 처리하기 위해 tailwind의 클래스 속성을 사용할 것이기 때문에 class가 됩니다.



    우리가 해야 할 작은 변화가 하나 더 있습니다. tailwind.config.ts로 이동하여 darkMode 속성을 추가하고 클래스로 설정합니다. 그 이유는 className 속성을 사용하여 관련 다크 모드 스타일을 애플리케이션에 추가하기 위해 변경하기 때문입니다.

    module.exports = {
  darkMode: 'class',
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}


    애플리케이션에 다크 모드 스타일을 추가해 보겠습니다. pages/index.tsx 파일로 이동하여 다음을 업데이트합니다. 브라우저로 이동하여 반영된 변경 사항을 확인하십시오.

    
//index.tsx

...

<p className={styles.description}>
  Get started by editing{' '}
<code className='**dark:text-blue-400**'>pages/index.tsx</code>
</p>
...


    토글 버튼을 만들어 봅시다. pages/index.tsx로 이동하여 다음을 업데이트합니다.

    import type { NextPage } from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useTheme } from 'next-themes';

const Home: NextPage = () => {

  const { systemTheme, theme, setTheme } = useTheme();

    // toggle responsible for changing the theme
  const renderThemeToggle = () => {
    const currentTheme = theme === "system" ? systemTheme : theme;
    if (currentTheme === "dark") {
      return (
        <button
        className='border rounded-sm p-2'
          onClick={() => setTheme("light")}
          type="button"
        > dark </button>
      );
    }
    return (
      <button
      className="border rounded-sm p-2"
      onClick={() => setTheme("dark")}
      type="button"
    > Light </button>
    );
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js and Tailwind starter</title>
        <meta name="description" content="Next.js and Tailwind starter" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className="text-3xl font-bold underline mb-4">
          Next.js + Tailwind Starter 
        </h1>

        {renderThemeToggle()}

        <div className="m-3 pt-8">
          <h3 className='text-blue-400 dark:text-white'> Current theme is { theme }</h3>
         </div>
      </main>


    </div>
  )
}

export default Home


    위의 코드에서 우리는 next-themes 후크를 사용하여 현재 어떤 테마인지 알려주고 이를 사용하여 브라우저에서 동일한 것을 렌더링했습니다.

    마법을 보려면 브라우저로 이동하세요.



    🎉 밝은 모드와 어두운 모드 사이를 전환하는 토글 버튼을 성공적으로 추가했습니다.

    저장소 링크: https://github.com/skarthikeyan96/next.js-tailwind-starter/tree/main

    결론 :



    그게 다야. 시간을 내어 블로그 게시물을 읽어주셔서 감사합니다. 게시물이 유용했다면 ❤️를 추가하고 댓글 섹션에서 내가 놓친 부분이 있으면 알려주세요. 블로그 피드백은 환영합니다.

    트위터로 소통해요 : ()
    Go 작업 공간이란 무엇이며 어떻게 사용합니까?
    reduce()의 힘 - 순차적으로 약속 대기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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