[NextJS] Carrot Market 초기세팅!

Create-next-app

1. npx create-next-app --typescript
2. 프로젝트 name 설정
3. src는 일단 No
4. code [프로젝트]

Initial Settings

1. 깃 레포지토리와 연결
2. npm install -D tailwindcss postcss autoprefixer
3. npx tailwindcss init -p -> postcss.config & tailwind.config.js 파일 생성됨.
4. tailwind.config 수정.=

   module.exports = {
    // tailwind가 어디서 사용될 것인지 설정
    // pages 폴더 / 모든 디렉토리 / 모든 파일(해당확장자)
    content: [
      './pages/**/*.{js,jsx,ts,tsx}',
      './components/**/*.{js,jsx,ts,tsx}',
    ],
    theme: {
      extend: {},
    },
    plugins: [],
   };

5. /styles 에서 home.css 삭제, global.css 설정

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

6. npm install -D prettier prettier-plugin-tailwindcss
   tailwind 스타일 적용 시 순서 알아서 바꿔줌.

• 추가적으로 vscode extension
  Tailwind css Intellisense 깔면 자동 완성 등의 기능을 제공해줌. 편해 편해~

  • tailwind 적용 공식문서 참고!
    https://tailwindcss.com/docs/guides/nextjs
  • 각 라이브러리 & 프레임웤에 대한 설치 방법도 제공하고 있음.
    https://tailwindcss.com/docs/installation/framework-guides