NextJS 프로젝트에 TailwindCSS를 설치하는 방법 ⚡️

소개

이 게시물에서는 NextJS을 스타일링 유틸리티로 사용하기 위해 TailwindCSS 프로젝트를 설정하는 방법을 배웁니다.

요구 사항

시작하기 전에 두 가지가 필요합니다.

Node JS이 컴퓨터에 설치되었습니다. LTS(v16)는 지원 범위가 가장 넓고 이와 같은 가이드를 따를 때 골칫거리가 가장 적기 때문에 항상 권장합니다.

내가 사용하는 IDEVS Code

방해가되지 않는 상태에서 시작하겠습니다!

Tailwinds로 NextJS 프로젝트를 만들 때 두 가지 옵션이 있습니다.

옵션 1(가장 빠름 ⚡️)

내가 NextJS에서 찾은 정말 좋은 점 중 하나는 그들이 "Examples"이라고 부르는 아주 멋진 라이브러리를 가지고 있다는 것입니다. 이것은 본질적으로 프로젝트의 다양한 시작점에 대한 바로 사용할 수 있는 템플릿 묶음입니다. .



이 경우에는 NextJS-with-TailwindCSS 예가 있습니다.

이 예제를 설치하는 것은 이보다 더 간단할 수 없습니다! 새 프로젝트를 시작하려는 파일 위치의 터미널 창에서 아래 명령을 실행합니다.

npx create-next-app --example with-tailwindcss my-app

또는 원사 사용자의 경우:

yarn create next-app --example with-tailwindcss my-app

그리고 그게 다야! 🎉

이제 다음을 실행할 수 있습니다.

cd my-app
npm run dev
or
yarn dev

브라우저에 NextJS 상용구 사이트 페이지가 표시되어야 합니다.

너무 간단하죠? 🧐

옵션 2 🛠

옵션 2는 같은 방식으로 시작하지만 기본 Create-NextJS 명령을 사용합니다.

터미널에서 다음을 실행합니다.

npx create-next-app my-app

다음 cd를 my-app 폴더로 이동합니다.

cd my-app

몇 가지 Tailwind 관련 명령을 실행할 것입니다.

첫 번째는 다음과 같습니다.

npm install -D tailwindcss postcss autoprefixer

그러면 tailwindcss가 "package.json"파일에 dev 종속성으로 설치됩니다. 또한 tailwindcss 작동 방식의 핵심 요소인 postcss 및 autoprefixer도 설치합니다.

다음으로 다음 명령을 실행하여 tailwinds 구성 파일을 생성합니다.

npx tailwindcss init -p

이제 이 새로 생성된 파일 "tailwind.config.js"안에 프로젝트의 모든 파일 유형이 포함된 콘텐츠 배열을 삽입합니다. tailwindcss를 사용하려면 프로젝트에 특정한 파일 형식이나 경로를 추가해야 합니다.

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

다음으로 "./styles/css/global.css"파일의 내용을 변경합니다. 이 파일의 모든 내용을 삭제하고 아래 코드로 바꿀 수 있습니다.

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

마지막 단계는 개발 서버를 시작하는 것입니다.

npm run dev
or
yarn dev

그런 다음 tailwindcss가 작동하는지 테스트하기 위해 "index.js"파일에 새 요소를 만듭니다(다시 모든 상용구 코드를 삭제할 수 있음). 이 경우 몇 가지 tailwindcss 클래스로 H1 태그를 만들어 테스트했습니다.

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

H1 제목이 밑줄이 있는 더 큰 굵은 텍스트로 표시되면 축하합니다! 🎉 Tailwindcss가 작동 중입니다!



이제 옵션 1을 시작하는 것이 얼마나 쉬운지 확인한 후 다른 방법으로 수행하는 이유가 궁금할 것입니다. 특히 TailwindCSS를 다른 프레임워크와 함께 사용하는 경우 설정 프로세스가 얼마나 복잡할 수 있는지 알 수 있습니다.

옵션 2는 팀에서 작업하고 팀에서 설정한 엄격한 환경/변수 설정을 준수하기 위해 처음부터 프로젝트를 구축해야 하는 경우에 필요할 수 있습니다. 또는 Auth0과 같은 다른 NextJS 예제를 사용 중이므로 이미 빠른 시작 기능을 사용하고 있습니다.

어느 쪽이든 TailwindCSS를 실행하는 것은 매우 간단합니다. 진행하는 데 문제가 있는 경우 공식TailwindCSS Docs을 참조할 수 있습니다.

이 게시물에서 즐거웠거나 배운 것이 있다면 좋아요를 누르고 더 많은 내용을 보려면 저를 팔로우해 주세요! 🙏