Nextjs

1. 프로젝트 생성을 위해 아래 커맨드 입력

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

   javascript
   yarn create next-app
npx create-next-app@latest

2. 프로젝트 설정, 생성하는 커맨드를 입력하면 질문이 몇가지 나오는데 여기서 원하는 형식으로 프로젝트 셋팅 가능
   괄호 안에 있는건 제가 선택한 것들 입니다

   1. What is your project named? // 원하는 프로젝트 명 (test-app)
   2. Would you like to use ESLint with this project? // ESLint 사용 할건지 선택 (Yes)
   3. Would you like to use 'src/' directory with this project? // src 폴더 아래에서 관리할건지 root에서 관리할건지 선택 (No)
   4. Would you like to use experimental 'app/' directory with this project? // app 디렉토리를 실험적인걸 사용할건지 선택 (No)
   5. What import alias would you like configured? // import 할때 Base 경로 설정 (@/*)

TailwindCss

1. TailwindCss 에 필요한 라이브러리들 설치
   yarn add tailwindcss postcss autoprefixer
npm install -D tailwindcss postcss autoprefixer

2. TailwindCss 로 초기화
   npx tailwindcss init -p

3. init 을 하고 생긴 tailwind.config.js 파일 클릭(root경로에 있음)

4. content 안에 경로 추가
   처음 생성할 때 src로 안했으면

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

   처음 생성할 때 src로 했으면

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

5. root/styles/globals.css 로 이동

6. 제일 상단에 추가

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