Next.js 애플리케이션에 Tailwind CSS를 추가하는 방법

프로토타입 또는 웹 앱 구성 요소를 완전히 사용자 정의할 수 있는 기능을 제공하는 CSS 프레임워크를 찾고 있다면 확실히 tailwindcss를 시도해야 합니다.

이 기사에서는 Next.js 프레임워크를 사용하여 tailwindcss를 설치하고 설정하는 방법을 설명합니다.

프레임워크를 소개합니다.

이러한 프레임워크에 익숙하지 않은 경우

Tailwindcss: 기억하기 쉬운 클래스 이름을 사용하여 멋진 사용자 인터페이스를 빠르게 구축하는 데 도움이 되는 유틸리티 우선 CSS 프레임워크입니다.

Next.js: 최신 애플리케이션 구축을 위한 반응 기반 JavaScript 프레임워크입니다. Next.js는 반응 서버 측 렌더링(SSR), 정적 사이트 생성(SSG) 및 기타 여러 기능을 추가하고 검색 엔진에 최적화되어 있습니다.

자, 그럼 시작하겠습니다.

새로운 Next.js 프로젝트를 시작합니다.

1단계: 새 Next.js 애플리케이션을 만듭니다.
새로운 다음 애플리케이션을 생성하려면 터미널에서 다음 코드를 실행하십시오. 참고 Next.js에는 노드 12 이상이 필요합니다.
npx create-next-app project-name
다음을 사용하여 프로젝트 디렉토리로 이동합니다.
cd project-name
2단계: tailwindcss를 설치합니다.
프로젝트 디렉터리에 있으면 다음 코드를 실행하여 tailwindcss 및 해당 종속 항목을 설치합니다.
npm install -D tailwindcss postcss autoprefixer
tailwind가 성공적으로 설치된 후 다음 코드를 실행하여 tailwind 구성 파일을 만듭니다.
npx tailwindcss init -p-p 명령은 프로젝트 디렉토리에 postcss 구성 파일을 만듭니다.

이제 디렉터리는 두 개의 구성 파일이 있는 다음과 같아야 합니다.



3단계: 템플릿 경로 구성.
기본적으로 모든 tailwinds 클래스가 프로젝트에 추가되어 프로젝트에서 사용한 클래스만 최종 코드와 함께 내보내지도록 하려면 CSS를 제거해야 합니다.

tailwind 구성 파일에서 콘텐츠 속성에 다음 코드를 추가합니다. 이 코드는 tailwind 클래스가 사용된 위치를 tailwind에 알려줍니다.
"./pages/**/*.js"


파일 경로: 이 코드는 tailwind가 루트 디렉터리./pages/의 페이지 폴더 내부에서 .js 파일 또는 .js 파일**/이 포함된 폴더*.js를 찾도록 지시합니다.

콘텐츠 속성에 파일 경로 배열을 추가할 수 있습니다.

4단계: tailwindcss 지시문을 global.css 파일에 추가합니다.
tailwindcss 지시문을 추가하려면 스타일 폴더에서 global.css 파일로 이동하고 다음 코드를 추가합니다.

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

순풍으로 기본 카드 만들기.

모든 설정과 준비가 완료되면 tailwind가 제대로 설치되었는지 확인하는 카드를 만들어 보겠습니다.

index.js 파일에서 콘텐츠를 다음 코드로 바꿉니다.

export default function Home() {
  return (
    <div className="w-1/2 mt-32 mx-auto  bg-blue-900 p-10">
      <p className="m-4 text-gray-200">
        Cillum consequat eiusmod adipisicing sint qui mollit. Ut et tempor nulla
        excepteur nulla incididunt qui exercitation incididunt. Sint ex
        adipisicing pariatur nulla ut ex laborum consequat enim. Et non tempor
        laborum irure commodo fugiat mollit nostrud adipisicing nostrud eiusmod
        do. Elit velit amet do enim esse ex ipsum velit. Quis consequat sunt
        dolore dolor commodo enim anim tempor ipsum.
      </p>
    </div>
  );
}

이 코드는 p 내부에 div 태그가 있는 간단한 HTML 코드이며 스타일 지정을 위해 순풍 클래스가 추가되었습니다.

터미널에서 npm run dev를 실행하고 브라우저에서 localhost:3000을 엽니다.

결과는 아래 이미지와 같아야 합니다.

결론

문제 없이 문서의 이 부분에 도달했다면 프로젝트에 tailwind가 성공적으로 설치된 것입니다.

저처럼 비디오 레슨을 통해 순풍 수업을 배우고 싶다면 Scrimba의 이 YouTube 비디오를 확인하세요.