Next.js 14에서 Tailwind CSS 직접 적용해보기

1. Tailwind CSS

• 클래스 기반으로 스타일을 지정하는 CSS 프레임워크

장점

• 클래스 기반으로 스타일을 지정해서 HTML 코드를 작성할 때 더 빠르게 스타일 적용 가능
• 사전 정의된 유틸리티 클래스로 새로운 스타일을 만들지 않고 빠르게 작업 가능
• 구성 가능한 많은 옵션을 제공하여 프로젝트의 디자인 시스템에 맞게 쉽게 조정 가능

단점

• 클래스 기반의 스타일 지정 방식은 기존의 CSS 작성 방식과 다르기 때문에 익숙해지는데 시간이 걸림
• HTML 파일에 많은 클래스 추가로 파일 크기가 커질 수 있다.

서버 사이드 렌더링 

• 서버 사이드 렌더링을 하더라도 Tailwind 클래스를 적용하여 일관된 스타일을 유지할 수 있다.
• 빌드 단계에서 CSS로 컴파일되므로 서버 사이드 렌더링 시에도 문제 없이 사용할 수 있다.

---

2. styled-components

• CSS를 JavaScript 안에 포함시켜 컴포넌트에 스타일을 적용하는 방식 (CSS-in-JS)

장점

• 컴포넌트의 스타일을 캡슐화하여 코드의 유지보수와 재사용성 증가
• JavaScript를 통해 동적으로 스타일 변경 가능

단점

• 스타일이 JavaScript 파일에 포함되어 프로덕션 번들 크기 증가로 초기 로딩 속도에 영향
• 렌더링할 때 스타일을 동적으로 생성해 성능 문제 발생

서버 사이드 렌더링

• 서버 사이드 렌더링 시에도 styled-components를 사용하여 컴포넌트를 렌더링하고 초기 스타일을 적용 가능
• 다만, 서버에서도 컴포넌트를 렌더링하기 때문에 ServerStyleSheet 등의 API를 통해 서버와 클라이언트의 스타일 일관성을 유지해야 된다.

---

3. 비교

프로젝트의 스타일 라이브러리/프레임워크 로 한번도 사용해보지 않은 Tailwind를 사용해야될지 익숙한 styled-components를 사용해야될지 많은 고민을 했다. 두 기술 스택 모두 서버 사이드 렌더링과 호환되고 각자의 장단점도 명확하게 있어서 선택하기가 쉽지 않았다. 최근에 CSS-in-JS 방식의 성능 문제가 대두되고 있기도 하고 CSS 프레임워크의 다양한 기능을 사용해보고 싶기도 해서 최종적으로 Tailwind를 선택하게 되었다.

---

4. Tailwind 적용

Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer

• postcss : CSS 후처리기, Tailwind CSS를 컴파일하고 변환하기 위해 사용
• autoprefixer : PostCSS의 플러그인, CSS에 자동으로 벤더 접두어를 적용하여 브라우저 호환성 향상

Tailwind 초기화

npx tailwindcss init -p

• Tailwind CSS의 기본 구성 파일인 tailwind.config.js 생성
• -p 옵션을 통해 postcss.config.js을 추가 생성

전역 CSS 파일에 지시어 추가

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

• @tailwind base : 브라우저 기본 스타일 초기화
• @tailwind components : Tailwind에서 제공하는 UI를 사용 가능
• @tailwind utilities : 유틸리티 클래스 포함

5. Prettier-plugin-tailwindcss 적용

• recommended class order를 기반으로 클래스 자동 정렬을 지원
• 기본 계층 클래스, 컴포넌트 계층 클래스, 유틸리티 계층 클래스 순으로 정렬

설치

npm install -D prettier prettier-plugin-tailwindcss

.prettierrc 파일에 플러그인 적용

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 120,
  "arrowParens": "always",
  "plugins": ["prettier-plugin-tailwindcss"] // 플러그인 중에 가장 마지막에 와야된다.
}