Next.js

Next.js Setup

// npx create-next-app@버전

// 타입스크립트 x
npx create-next-app@latest

// 타입스크립트 o
npx create-next-app@latest --typescript

// 진행 여부 : y
Ok to proceed? (y) y

// 프로젝트명 설정
√ What is your project named? {app name}

TailwindCSS

TailwindCSS Setup

// TailwindCSS 설치
npm install -D  tailwindcss postcss autoprefixer

// TailwindCSS 설정
npx tailwindcss init -p

// tailwind.config.js에서 content 추가
// "./tailwind 적용 부분/**(모든 폴더)/*(모든 파일).확장자"
// 여러 확장자 설정 시 {확장자,확장자,확장자,...}
content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ]

💥주의💥 : 여러 확장자 설정 시 띄어쓰기❌❌❌

// 잘못된 예시
content: [
    "./pages/**/*.{js, jsx, ts, tsx}",
  ]

// 옳바른 예시
content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
  ]

TailwindCSS example

// pages/index.tsx에서
<div className="bg-red-500">
  <h1 className="text-blue-200">it work</h1>
</div>

// styles/globals.css에서
@tailwind base;
@tailwind components;
@tailwind utilities;

result

Tailwind Prittier

// tailwind prittier 설치
npm install -D prettier prettier-plugin-tailwindcss

// 적용 전
<button className="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800"></button>

// 적용 후
<button className="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3"></button>

---

참고
노마드 코더 - 캐럿마켓 클론코딩