Next.js + TypeScript + Tailwind CSS 프로젝트 설정

1. Next.js 프로젝트 설정
먼저 create-next-app 명령을 사용하여 Next.js 템플릿에서 코드베이스를 만듭니다.

npx create-next-app nextjs-ts-tailwind-example --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"

명령어가 완료되면 Next.js의 코드가 생성되므로 디렉토리를 이동하여 동작을 확인한다.

cd nextjs-ts-tailwind-example
npm run dev

2. 타이프스크립트 설정
typescript용 설정 파일 생성

touch tsconfig.json next-env.d.ts

TypeScript를 실행하는 데 필요한 패키지를 설치합니다.

npm install --save-dev typescript @types/react @types/node

Typescript 구성 파일에 추가

//tsconfig.json 
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

next-env.d.ts 구성 파일에 추가

/// <reference types="next" />
/// <reference types="next/types/global" />

다음으로 다음 저장소를 참고하여 다양한 js 파일을 ts 파일로 다시 작성합니다.

mv components/date.js components/date.tsx
mv components/layout.js components/layout.tsx
mv lib/posts.js lib/posts.ts
mv pages/_app.js pages/_app.tsx
mv pages/index.js pages/index.tsx
mv 'pages/posts/[id].js' 'pages/posts/[id].tsx'
mv pages/api/hello.js pages/api/hello.ts

다시 작성한 후 동작을 확인하십시오.

npm run dev

브라우저로 동작을 확인하고 에러 없이 동작하면 OK입니다.

3. Tailwind CSS 설정

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Tailwind CSS 구성 파일을 생성합니다.

npx tailwindcss init -p

그러면 tailwind.config.js postcss.config.js 두 개의 파일이 생성됩니다.

//tailwind.config.js
module.exports = {
  purge: [], //remove this line 
  purge: ['./components/**/*.tsx', './pages/**/*.tsx','./public/**/*.html'], //add this line
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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

Tailwind CSS styles/global.css에서 생성된 CSS를 읽도록 다시 작성합니다.

//styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

이제 Tailwind CSS를 사용할 수 있습니다!