Next.js 웹사이트에 TailwindCSS 설정하는 방법

2023-03-02

이번 시간에는 Next.js 기반 웹사이트에 TailwindCSS를 설정하는 방법에 대해서 알아보겠습니다.

Next.js 를 프로젝트를 생성합니다.

$ npx create-next-app my-app
$ cd my-app

다음 명령어를 실행해서 TailwindCSS를 설치합니다.

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

위 명령어를 실행하면, tailwind.config.js 파일과 postcss.config.js 파일이 생성됩니다.

tailwind.config.js 파일을 다음과 같이 업데이트 합니다.

// 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: [],
}

global.css 파일을 다음과 같이 업데이트 합니다.

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

이렇게 설정하면, Next.js 웹사이트에 TailwindCSS를 사용할 수 있습니다.

감사합니다.