https://nextjs.org/docs/basic-features/typescript
NextJS + Typescript를 설치해줍니다. 현재 폴더 하위에 프로젝트명 폴더가 생성되니 원하시는 위치에서 커맨드를 사용하면 됩니다.
yarn create next-app --typescript
아래와 같이 프로젝트명을 물어봅니다. 원하는대로 지정해줍니다.
success Installed "create-next-app@12.3.1" with binaries:
- create-next-app
√ What is your project named? ... test2
하위폴더를 열어 pages/_app.tsx파일이 만들어졌는지 확인합니다.
yarn dev
를 통해 제대로 동작되면 타입스크립트 설정은 끝났습니다.
https://tailwindcss.com/docs/guides/nextjs
프로젝트는 이미 셋업되었으니 2번부터 따라합니다.
아래 커맨드로 필요한 라이브러리들를 설치하고 테일윈드를 초기화합니다.
yarn add tailwindcss postcss autoprefixer
npx tailwindcss init -p
초기화가 정상적으로 됬다면 루트폴더에 tailwind.config.js파일이 만들어집니다.
열어보면 아래의 content부분이 비어있을텐데 아래처럼 채워줍니다.
이것은 테일윈드 클래스를 적용하는 범위로, 만약 ./pages와 ./components 이외의 폴더에서 tsx/jsx파일(컴포넌트)를 사용할 예정이라면 이또한 변경해야합니다. 저또한 최근에 컴포넌트 폴더를 별개로 생성했다가 테일윈드 클래스가 적용되지 않아 한참을 헤맸던 기억이 있습니다.
또 ./src/pages처럼 쓰기를 많이들 원하실텐데, 그런 경우에는 아래의 경로를 ./src/pages처럼 명시하시면 됩니다. 다행히도 NextJS는 ./src/pages도 지원합니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
그리고 루트의 styles/globals.css폴더를 열어 아래의 코드를 최상단에 추가해줍니다.
아래의 코드는 문서에서 언급되어있기론 일종의 브라우저스타일 리셋을 수행한다고 합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;
pages/index.tsx에서 아래처럼 테스트해보면 잘 동작하는 것을 확인할 수 있습니다.
<span className="text-xl">Hello</span>