귤마켓 시작 (1)

📂 프로젝트 생성 (cmd)

📦 npx create-next-app@latest --typescript

---

📂 Tailwind CSS 설치

💬 TailwindCSS?

클래스명을 통해 스타일링을 도와주는 CSS 프레임워크이다.
[카카오] TailwindCSS 사용후기
TailwindCSS?

📦 npm install -D tailwindcss postcss autoprefixer

tailwind, postcss, autoprefixer 설치

📦 npx tailwindcss init -p

tailwind.config.js, postcss.config.js 파일 생성

📦 npm install -D prettier prettier-plugin-tailwindcss

Prettier를 통한 tailwindCSS 클래스 자동정렬 플러그인 설치

📦 npm i -D @tailwindcss/forms (공식 플러그인)

TailwindCSS 공식 플러그인에 대한 설명 링크

설치후 tailwind.config.js 파일에 플러그인 추가:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

📦 Tailwind CSS IntelliSense (확장 프로그램)

클래스이름 자동완성 기능을 갖고 있는 VSC 확장프로그램을 설치한다.

---

📂 tailwind.config.js 수정

✓ content 부분을 위와 같이 수정하여 Tailwind를 어디서 사용할지 설정한다.

---

📂 ./styles/globals.css 수정

✓ 위와 같이 수정하여 전역에 tailwindCSS 적용을 한다.