Next JS에 Tailwind CSS를 추가하는 방법은 무엇입니까?

안녕하세요, 새로운 Next.js 애플리케이션을 위한 CSS 프레임워크를 찾고 있다면 Tailwind CSS를 반드시 살펴봐야 합니다.

Tailwind CSS란 무엇입니까?

Tailwind는 강력한 유틸리티 기반 CSS 프레임워크입니다. Tailwind는 디자인을 구축하는 데 사용할 수 있는 많은 CSS 클래스를 제공합니다. 개발자는 미리 작성된 클래스가 제공하는 유연성 및 사용자 정의로 인해 순풍을 좋아합니다.

다음은 Tailwind를 사용하여 제목을 만드는 예입니다.

<div className="pt-32 text-sky-500 bg-slate-800 h-screen text-center">
      <h1 className="text-5xl">Hey! How are you?</h1>
</div>

결과는 다음과 같아야 합니다!

Next JS에서 Tailwind 설정하기

자, 그럼 새로운 Next.js 프로젝트를 생성하는 것으로 시작하겠습니다.

npx create-next-app tailwindnext
cd tailwindnext

새 프로젝트를 만든 후에는 NPM을 사용하여 Tailwind CSS를 추가해야 합니다. 그러나 그 전에 POSTCSS 및 AutoPrefixer와 같은 피어 종속성이 필요합니다. 모든 종속성을 함께 추가할 수 있습니다.

npm install -D tailwindcss postcss autoprefixer

모든 종속성은 Dev 종속성이므로 -D 플래그를 사용합니다.

이제 구성 파일을 생성해야 합니다. 이를 위해 우리는 이 명령을 실행할 것입니다.

npx tailwind init -p

이 명령은 tailwind.config.js 및 postcss.config.js 파일을 생성합니다. 완료되면 tailwind.config.js 파일에 다음 코드를 추가합니다. 템플릿 경로를 구성하고 있습니다. 여기 어레이에서 페이지와 구성 요소를 언급하고 있습니다.

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

마지막 단계는 global.css 파일에 @tailwind 지시문을 추가하는 것입니다. ./styles/global.css로 이동하여 다음 코드를 추가합니다. 그러면 글로벌 CSS에 Tailwind CSS가 추가됩니다.

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

그리고 프로젝트를 시작하기 전에 Tailwind가 제대로 설치되었는지 확인하겠습니다. index.js 페이지에서 모든 코드를 제거하고 다음 코드를 추가합니다.

export default function Home() {
  return (
    <div className='pt-6'>
      <div className="max-w-sm rounded-lg overflow-hidden shadow-lg bg-gray-100 my-3 p-4 mx-auto ">
        <h1>Hello World</h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
      </div>
    </div>
  );
}

결과는 다음과 같아야 합니다.


브라우저에서 localhost:3000으로 이동하여 위와 같은 결과가 나오는지 확인합니다. 그렇지 않은 경우 _app.js 파일에서 global.css를 가져왔는지 확인하십시오.

행운을 빕니다. Tailwind를 사용하여 멋진 작품을 만드세요!

에 정기적으로 웹 개발 및 프로그래밍 관련 콘텐츠를 게시합니다. 관심이 있다면 거기에 나를 따라 오는 것을 고려하십시오. 감사!! 😄