[Next.js] CSS Styling : Tailwind, CSS Module, clsx

Front-End/Next.js 2024. 11. 12. 15:20

Next.js에서 스타일링을 할 때 여러 가지 방법을 사용할 수 있다.

이번 포스팅에서는 Tailwind, CSS Module, clsx 라이브러리를 활용한 스타일링 방법을 Next.js에서 사용하는 방법에 대해 작성하고자 한다.

01. Global Style (전역 스타일링)

Global Style은 어플리케이션 전역에서 사용되는 CSS 규칙을 정의하여, 모든 페이지와 컴포넌트에 일관된 디자인을 제공하는데 사용된다.

이 과정에서 주로 global.css 파일을 통해 글로벌 스타일을 설정한다.

#1. Global Style의 필요성

Next.js 어플리케이션을 개발하다 보면, 모든 페이지에서 동일하게 적용되는 스타일이 필요할 때가 많다.

예를 들어, 기본적인 HTML 요소 스타일, 테마 색상이나 폰트 설정, CSS Reset/Normalize 등에서 스타일을 동일하게 적용할 경우가 존재한다. 이러한 스타일을 개별 컴포넌트나 페이지에서 정의하면 유지 관리가 어렵고, 스타일 충돌이 발생할 수 있다.

이를 해결하기 위해 Global Style을 사용한다.

#2. Global Style 적용 방법

Next.js에서 글로벌 스타일을 적용하기 위해 보통 global.css 파일을 사용한다.

global.css 파일은 Next.js 어플리케이션의 최상위 컴포넌트에서 import 하여 전역에 적용된다.

1️⃣ global.css 파일 생성

/app/ui 폴더 내 또는 /styles 폴더 등 global.css 파일을 자유롭게 생성한다.

/* 예시: 글로벌 스타일 정의 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

2️⃣ layout.tsx에서 글로벌 스타일 import

Next.js의 app/layout.tsx 파일은 모든 페이지의 공통 레이아웃을 정의하는 파일이다.

이 파일에서 global.css를 import 하면 글로벌 스타일이 모든 페이지에 적용된다.

import '@/app/ui/global.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

app/layout.tsx에서 global.css를 import하면 모든 페이지에 글로벌 스타일이 적용된다. 만약 페이지 별로 다른 스타일을 적용하고 싶다면, 컴포넌트 별 스타일을 고려할 수 있다.

Global Style을 사용하면 전역으로 스타일이 적용되기 때문에, 특정 컴포넌트 스타일과 충돌할 수 있다. 이를 방지하기 위해 CSS 모듈, styled-components 등을 병행하여 사용하는 방법도 있다.

02. Tailwind CSS

Tailwind는 유틸리티 클래스 기반의 CSS 프레임워크로, HTML 요소에 직접 클래스를 추가하여 스타일을 적용하는 방식이다.

쉽게 말해, 자주 사용하는 CSS 속성들을 text-sm, flex 같은 이름의 유틸리티 클래스로 제공하는 역할을 한다.

별도의 CSS 파일이나 styled-component에 일일이 스타일을 작성하는 대신 html이나 jsx 태그의 클래스에서 바로 css 속성을 추가할 수 있다.

#1. Next.js에 tailwind css 적용하기

1️⃣ 아래 명령어를 통해 필요한 패키지를 설치

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

tailwindcss: Tailwind CSS 라이브러리
postcss: CSS 후처리기, Tailwind CSS와 함께 스타일 최적화를 담당
autoprefixer: CSS에 브라우저 벤더 접두사를 자동으로 추가해주는 도구
npx tailwindcss init -p: Tailwind CSS와 PostCSS 설정 파일(tailwind.config.js와 postcss.config.js)을 생성

2️⃣ tailwind 설정 파일 수정 (tailwind.config.js / tailwind.config.ts)

Tailwind CSS를 사용하려면, tailwind.config.js 파일에서 파일 경로를 지정해야 한다.

tailwind.config.js나 tailwind.config.ts 파일을 아래와 같이 수정한다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}', // app 디렉토리
    './pages/**/*.{js,ts,jsx,tsx}', // pages 디렉토리
    './components/**/*.{js,ts,jsx,tsx}', // components 디렉토리
    
    // `src` directory를 사용한다면
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

💡 content 옵션

./app/**/*.{js,ts,jsx,tsx}: Next.js의 App Router를 사용하는 경우. app 폴더 내의 모든 파일에서 Tailwind CSS를 사용하겠다는 의미
./pages/**/*.{js,ts,jsx,tsx}: Next.js의 Pages Router를 사용하는 경우
./components/**/*.{js,ts,jsx,tsx}: 컴포넌트 파일들에서도 Tailwind CSS를 사용

3️⃣ Global CSS 파일 수정 (global.css)

Next.js에서 Tailwind css를 전역적으로 적용하려면 global.css 파일에 Tailwind의 디렉티브를 아래와 같이 추가해야 한다.

global.css 파일에 아래와 같은 코드를 추가한다.

/* Tailwind CSS 디렉티브 */
@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base: 기본적인 CSS 리셋 및 기본 스타일을 적용
@tailwind components: Tailwind의 컴포넌트 스타일을 적용
@tailwind utilities: Tailwind의 유틸리티 클래스 스타일을 적용

4️⃣ layout.tsx에서 글로벌 CSS 파일 import

import '@/app/ui/global.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

5️⃣ Tailwind 클래스 사용

설정을 완료하였으면, Tailwind CSS 유틸리티 클래스를 사용해 페이지를 아래 예시 처럼 스타일링할 수 있다.

export default function HomePage() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <h1 className="text-4xl font-bold text-blue-600">Hello, Next.js with Tailwind CSS!</h1>
      <p className="mt-4 text-lg text-gray-700">This is a sample page using Tailwind CSS.</p>
      <button className="mt-6 rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
        Click Me
      </button>
    </main>
  );
}

🔥 Next.js 13부터는 프로젝트 생성 시 Tailwind 자동 설정되어 위와 같은 설정 안해줘도 된다.

Next.js 13부터는 프로젝트 생성 시 Tailwind CSS를 선택하면 자동으로 설정이 완료된다.

따라서 Tailwind CSS에 Yes를 선택하면 대부분의 설정이 자동으로 적용된다.

1️⃣ 프로젝트 생성 시 Tailwind 옵션 선택

npx create-next-app@latest my-next-app

위와 같이 프로젝트를 생성하면 아래와 같은 질문을 받을 것이다.

Would you like to use Tailwind CSS? (y/N)

여기서 y를 입력하면 Tailwind CSS 설치 및 설정이 자동으로 완료된다.

Yes를 선택하면 다음 작업들이 자동으로 설정된다.

Tailwind CSS 설치
tailwind.config.js 파일 생성 및 기본 설정 추가
postcss.config.js 파일 생성
globals.css 파일에 Tailwind CSS 디렉티브 추가

#2. VSCode Tailwind Extension & Prettier

VSCode에서는 Tailwind CSS IntelliSense 익스텐션이 제공되는데, 자동완성, 오류 표시, CSS 프리뷰 등 편리한 기능들을 제공해준다.

또한 Tailwind를 위한 Prettier 플러그인도 존재한다.

Tailwind로 스타일을 적용하다 보면 비슷한 스타일이어도 클래스 순서가 뒤죽박죽이라 가독성이 안좋은 경우가 많다.

prettier 플러그인은 이를 공식문서에 나와있는 순서대로 자동 정렬해준다.

1️⃣ 터미널에서 prettier-plugin-tailwindcss를 설치

npm install -D prettier prettier-plugin-tailwindcss

2️⃣ prettier.config.js 파일 또는 .prettierrc에 plugins에 해당 플러그인 추가

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

플러그인 적용 전과 후의 차이는 아래와 같다.

// 적용 전
<button className="text-white px-4 py-2 font-bold bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md"></button>

// 적용 후
<button className="px-4 py-2 font-bold text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700"></button>

03. CSS Modules

CSS Modules는 각 컴포넌트의 스타일을 로컬 스코프로 제한하여 스타일 충돌을 방지하는 CSS 파일이다.

클래스 이름이 자동으로 고유하게 생성되어 스타일 충돌을 방지한다.

1️⃣ CSS Module 파일 생성

[파일명].module.css 형식으로 작성한다. 예를 들어, 버튼에 대한 module.css를 아래와 같이 작성할 수 있다.

/* styles/Button.module.css */
.button {
  padding: 10px 20px;
  font-size: 16px;
  color: #ffffff;
  background-color: #0070f3;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #005bb5;
}

2️⃣ 컴포넌트에서 CSS module 적용

CSS Module 파일을 import 한 뒤 클래스 이름을 동적으로 사용한다.

// components/Button.tsx
import styles from './Button.module.css';

export default function Button() {
  return <button className={styles.button}>Click Me</button>;
}

위와 같이 styles.button으로 클래스명을 지정하면, Button.module.css에서 정의한 스타일이 적용된다.

CSS Module을 위와 같이 사용하면 Next.js는 자동으로 고유한 클래스명을 생성한다.

예를 들어, styles.button은 Button_button__3xyz1과 같은 고유한 클래스명으로 변환된다.

이로 인해 글로벌 클래스명 충돌이 발생하지 않는다.

만약 상태에 따라 다른 스타일을 적용하고 싶다면 clsx 라이브러리를 사용할 수 있다.

04. clsx 라이브러리

clsx는 조건에 따라 클래스 이름을 동적으로 추가할 수 있는 유틸리티 라이브러리이다.

상태나 조건에 따라 클래스 이름을 변경해야 할 때 유용하다.

clsx를 사용하면 간단하게 조건부 클래스 이름을 설정할 수 있다.

// /app/ui/invoices/status.tsx
import clsx from 'clsx';

export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
      {status}
    </span>
  );
}

'Front-End > Next.js' 카테고리의 다른 글

[Next.js] 이미지 최적화 : next/image (15)	2024.11.14
[Next.js] 폰트 최적화 : next/font(Google Font & Local Font) (10)	2024.11.13
[Next.js] SEO와 Metadata (4)	2024.11.11
[Next.js] Routing : Layout / Route Groups / Dynamic Routes(동적 라우팅) (11)	2024.10.09
[Next.js] 렌더링 동작 원리 with Hydration, use client (2)	2024.10.08

대학생의 개발일지

guswjd :: 대학생의 개발일지