nextjs setting, TailwildCss setting

들어가기
nextjs setting을 알아보자
tailwild setting을 알아보자

https://nextjs.org/docs/getting-started

1. npx create-next-app@latest --typescript

1-1. npm i next@latest //react 18깔려 있으면 생략가능

git remote add origin '''git/new에서 만든 repository'''

https://tailwindcss.com/
https://tailwindcss.com/docs/plugins
https://tailwind.spacet.me/
https://tailwind.build/classes

2. npm install -D tailwindcss postcss autoprefixter

3. npx tailwindcss init -p // npm i @tailwindcss/forms

하고나면, postcss.config.js 파일이 생김

4.

postcss.config.js
----------------------------------
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

5.

tailwind.config.js 파일도 생김
아래와 같이 설정해 줄것~

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,jsx,ts,tsx}',  //어디서 사용할건지를 설정
    './components/**/*.{js,jsx,ts,tsx}', //어디서 사용할건지를 설정
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms'),],  //npm i @tailwindcss/forms
}                                             //<form>하면 기본적 form이 생성됨.

6. styles/globals.css 파일 설정

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

7. Heroicons

https://heroicons.com/