Next.js 프로젝트에서 Tailwind 셋팅하기

프로젝트 개요

---

이번에 동아리 홈페이지를 CMS를 사용하지 않고 직접 구현하는 프로젝트를 진행하게 되었습니다. 친구랑 둘이서 프로젝트를 진행하게 되었고 저는 Next.js를 사용해 프런트엔드 부분을 맡고 친구는 spring을 사용해 백엔드를 맡기로 했습니다. 프로젝트를 진행하기 위해 css 프레임워크를 고민하다가 next.js 공식 문서를 보니 tailwind를 활용하는 법에 대한 내용이 있어서 tailwind를 사용하기로 했습니다.

이번 글에서는 next.js 프로젝트에서 tailwind를 사용할 수 있도록 환경셋팅을 하는 법에 대해 다루어 보겠습니다.

Tailwind 셋팅하기

---

Tailwind를 셋팅하는 방법은 사용하는 프레임워크에 따라서 다릅니다. 이 글에서 저는 tailwind 공식 홈페이지에 있는 next.js 앱에서 tailwind 셋팅방법을 소개드리겠습니다.

셋팅 방법은 크게 두 가지가 있습니다.

방법 1.

npx create -next-app -e with-tailwindcss my-project

위와 같이 콘솔창에 입력하시면 끝입니다. 더 이상 할 것도 없습니다. 여기서 my-project 부분에는 여러분들이 만들고자 하는 프로젝트 이름을 입력하시면 됩니다.
하지만 저의 경우 이미 tailwind가 셋팅되어 있지 않은 next.js 프로젝트를 만들어서 개발을 진행중인 상황이었기 때문에 이 방법은 사용하지 않았고 다음 방법을 사용했습니다.

방법 2.

1. npm을 사용해서 tailwind 설치

# If you're on Next.js v10 or newer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# If you're on Next.js v9 or older
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

버전에 따라 위와 같이 콘솔창에 입력하시면 tailwind를 설치하실 수 있습니다.

2. configuration file 만들기

npx tailwindcss init -p

위와 같이 콘솔창에 입력하시면 mininal한 내용이 포함되어 있는 tailwind.config.js 파일과 postcss.config.js 파일이 만들어집니다.

3. configuration file 변경하기

tailwind.config.js 파일에 들어가 내용을 보면 아래와 같이 되어있습니다.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

여기서 우리는 purge 부분을 바꿀 것입니다. purge에 [ ]라고 되어 있는 부분을

purge: ['./pages/**/*.{js, ts, jsx, tsx}',
'./components/**/*.{js, ts, jsx, tsx}']

로 바꿔줌으로써 제품을 빌드할 때 tailwind에서 사용되지 않는 코드를 제거할 수 있도록 설정을 해줍니다.

4. tailwind를 css에 포함시키기

마지막으로 tailwind를 css에 포함시켜 마무리해주어야 합니다. 이를 위한 방법도 두 가지가 있습니다.

첫 번째 방법은 tailwind를 js 파일에 바로 import 시켜주는 방법입니다. 이를 위해서

'pages/_app.js'

파일에 다음과 같이 입력합니다.

/* import '../styles/global.css' 이 부분은 지우고 */
import 'tailwindcss/tailwind.css'

두 번째 방법은

'./styles/globals.css/'

파일에 tailwind를 포함시켜주는 것입니다. 이를 위해서 이 파일에 다음과 같이 입력합니다.

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

이상으로 next.js 프로젝트에 tailwind의 셋팅이 완료되었습니다.

이제는 여러분의 프로젝트에서 tailwind를 사용할 수 있습니다.