당근마켓 :1 NextJs, Tailwind setup

NextJS 프로젝트 초기화 (Node.js 12.22.0 이상)
npx create-next-app@latest --typescript
https://nextjs.org/docs/getting-started

```
소프트웨어 배포 생명 주기 (Software Release Life Cycle)
1. Alpha: 소프트웨어 테스트를 시작하는 첫 단계
2. Beta: 알파의 뒤를 잇는 소프트웨어 개발 단계
3. RC(Release Candidate): 최종 릴리즈 후보
4. RTM: 완성된 버전

 

Tailwind CSS설치 및 초기화
npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p (-p를 붙이면 postcss.config.js파일까지 생성)

--> tailwind.config.js , postcss.config.js 생성됨 
https://tailwindcss.com/docs/installation/using-postcss

 

tailwind.config.js에 

어느 components 혹은 page에서 tailwind 사용 할 것 인지 명시해야함

module.exports = {

    content: ["./pages/**/*.tsx", "./components/**/*.{js,jsx,ts,tsx}"], // 확장자명을 ,로 구분하여 또는이라는 의미  

    theme: {

        extend: {},

    },

    plugins: [],

};

_app.tsx에 css import되면 글로벌로 사용됨

styles > global.css 내용 전체 삭제 후 

@tailwind base;

@tailwind components;

@tailwind utilities;

Prettier를 통한 TailwindCSS 클래스 자동 정렬 플러그인
(TailwindCSS 공식 Prettier플러그인)
blueschist님이 소개해주신 TailwindCSS 클래스 자동 정렬 플러그인입니다. 사용 방법은 아래와 같이 설치 후, 파일 저장시 클래스가 순서에 맞게 자동으로 정렬되도록 도와줍니다.
npm install -D prettier prettier-plugin-tailwindcss
```
// 클래스 정렬 전
button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800"

// 클래스 정렬 후
button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3"
```
https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
https://github.com/tailwindlabs/prettier-plugin-tailwindcss

클래스 정렬 기준
https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted]