NextJS + Typescript + TailwindCSS 셋업하기

제현수·2022년 10월 17일
0

1. NextJS + Typescript 셋업

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를 통해 제대로 동작되면 타입스크립트 설정은 끝났습니다.


2. TailwindCSS 셋업

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>
profile
틀리거나 주관적인 정보가 있을 수 있습니다. 정말로요.

0개의 댓글