Tailwind CSS 프레임워크 설치 (With Next.js)

Next.js 에서 Tailwind CSS 사용을 위한 설치 방법입니다. Tailwind CSS 공식 홈페이지 참조를 하였습니다.

 

 

1. Next.js 프로젝트 생성

$ npx create-next-app my-project --typescript --eslint
# typescript 와 eslint 불필요 시 삭제
$ cd my-project

create-next-app 명령을 통해 Next.js 프로젝트를 생성합니다. 저는 명령어에 typescript와 eslint 옵션을 주었는데 빼고 실행하여도 무방합니다. (실행 스크립트에서 선택이 가능)

 

2. Tailwindcss 설치

$ npm i -D tailwindcss postcss autoprefixer

postcss.config.js 파일과 tailwind.config.js 파일이 생성됩니다. 빌드 후에는 모듈이 필요 없으므로 -D 옵션을 추가하여 줍니다

 

3. Config

tailwind 관련 config 생성을 위해 아래 명령어를 입력합니다.

$ npx tailwindcss init -p

postcss.config.js, tailwind.config.js 두개의 파일이 생성이 되며 postcss.config.js 에는 기본적인 내용들이 채워져 있어 tailwind.config.js 파일만 내 프로젝트에 맞게 수정하여 줍니다.

Tailwind css 가 적용된 모든 파일에 대한 위치 정보를 추가하여 줍니다. 아래 설정은 /pages 와 /components 폴더 하위에 있는 js, jsx, ts, tsx 확장자에 대해 적용한다는 의미입니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js.jsx.ts.tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

4. CSS 적용

기본으로 생성되는 ./styles/globals.css 파일의 내용을 변경하여 줍니다.

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

 

---

Tailwind를 선택을 한건 javascript 코드에서 직관적으로 스타일을 설정할 수 있다는 것과 VSC에서 인텔리센스 지원이 가장 큰 이유였습니다. 내가 원하는 스타일을 쉽게 찾을 수 있고 빠르게 적용 가능한 게 가장 큰 장점입니다.

 

단점으로는 기존 Bootstrap이나 antd 같은 프레임워크를 먼저 접한 사람들에게는 다시 공부를 해야 된다는 점과 가이드 문서 같은 게 상대적으로 부족하다는 게 있겠네요.