Web/Next.js

[Next.js] Tailwind CSS: 개념, 사용 방법, 예시

revolutionarylife 2024. 10. 21. 10:39
반응형

 

🚀 [Next.js] Tailwind CSS: 개념, 설치, 사용 방법, 예시

모든 프로젝트는 Windows 환경에서 진행됩니다.

목차

  • Tailwind CSS란?
  • Next.js에서 Tailwind CSS 사용하기
    • 설치 방법
    • Tailwind 사용 예시
  • Tailwind CSS를 사용하는 이유
  • Tailwind CSS를 사용하는 상황
  • 기존 CSS vs Tailwind CSS
  • 마무리

Tailwind CSS란?

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크입니다. 다른 CSS 프레임워크(예: Bootstrap)와 달리, 미리 정의된 UI 컴포넌트 대신 클래스를 사용하여 스타일을 빠르게 적용할 수 있습니다. Tailwind는 "원하는 스타일을 빠르게 적용할 수 있게 돕는 유틸리티 클래스"를 제공하여 HTML 태그에 일일이 스타일을 정의할 필요 없이, CSS를 매우 효율적으로 관리할 수 있도록 도와줍니다.

Next.js에서 Tailwind CSS 사용하기

설치방법

Next.js에서 Tailwind CSS를 사용하려면 간단한 설정이 필요합니다.

프로젝트에 Tailwind를 설치하고 구성 파일을 생성하면 됩니다.

다음은 기본적인 설치 방법입니다.

#next 프로젝트 설치
npx create-next-app my-nextjs-app
cd my-nextjs-app

이미 Next 프로젝트가 설치 된 경우에는 프로젝트의 루트 경로에서 아래 명령어를 통해 tailwind만 설치하시면 됩니다.

# tailwind 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

설치가 되었다면, tailwind.config.js 라는 파일이 있을텐데, 여기서 Tailwind CSS를 사용할 경로를 정의해 줍니다.

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

그리고 프로젝트의 CSS 파일에서 Tailwind의 기본 지시어를 추가합니다.

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

 

사용 예시

이제 Next.js에서 Tailwind CSS를 사용하여 페이지 스타일링을 할 수 있습니다.

아래는 간단한 Tailwind 사용 예시입니다.

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Welcome to Tailwind CSS in Next.js!
      </h1>
    </div>
  );
}

이 코드는 배경색이 회색이고, 텍스트가 중앙에 정렬된 화면을 만들어 줍니다.

Tailwind의 유틸리티 클래스(min-h-screen, bg-gray-100, flex, items-center, justify-center, text-4xl, font-bold, text-blue-600)를 사용하여 매우 간결하게 스타일을 적용할 수 있습니다.

 

Tailwind CSS를 사용하는 이유

Tailwind CSS의 장점은 여러 가지가 있지만, 주된 이유는 빠르고 유연한 스타일링과 재사용성에 있습니다.

1) 빠른 스타일링

Tailwind는 미리 정의된 유틸리티 클래스를 제공하므로, CSS를 직접 작성하는 것보다 훨씬 빠르게 스타일링을 적용할 수 있습니다. 예를 들어, 배경색이나 폰트 크기를 변경하는 등의 작업을 클래스 이름을 통해 즉각적으로 해결할 수 있습니다.

2) 커스터마이징의 유연성

Tailwind는 클래스 기반이기 때문에, 하나의 컴포넌트를 다양한 방식으로 재사용할 수 있습니다. 기존의 CSS 파일에서 스타일을 수정할 필요 없이, HTML 요소에 클래스 이름만 바꿔 스타일을 빠르게 적용할 수 있습니다.

3) 중복 CSS 방지

Tailwind는 각 요소에 필요한 클래스만 적용하기 때문에, 기존의 스타일링 방식처럼 중복되거나 불필요한 CSS를 많이 작성하지 않게 됩니다. 이로 인해 프로젝트 규모가 커지더라도 CSS 관리가 훨씬 용이해집니다.

4) 반응형 디자인 지원

Tailwind는 반응형 디자인을 손쉽게 적용할 수 있는 클래스들을 기본적으로 제공합니다. 미디어 쿼리를 직접 작성할 필요 없이, Tailwind의 유틸리티 클래스를 사용하여 화면 크기에 따라 다른 스타일을 적용할 수 있습니다.

<div className="bg-blue-500 sm:bg-green-500 md:bg-red-500 lg:bg-purple-500">
  반응형 디자인을 지원하는 Tailwind CSS
</div>

위 예시는 화면 크기에 따라 배경색이 다르게 변하는 반응형 디자인을 적용한 예시입니다.

코드 설명:

  • bg-blue-500: 기본적으로 div 요소에 bg-blue-500 (파란색 배경)을 적용합니다.
  • sm:bg-green-500: 화면이 640px 이상일 때 배경색이 green-500 (초록색)으로 바뀝니다.
  • md:bg-red-500: 화면이 768px 이상일 때 배경색이 red-500 (빨간색)으로 바뀝니다.
  • lg:bg-purple-500: 화면이 1024px 이상일 때 배경색이 purple-500 (보라색)으로 바뀝니다.

즉, 화면 크기에 따라 div의 배경색이 다음과 같이 변경됩니다:

  • 기본 (모바일 이하): 파란색 (bg-blue-500)
  • 작은 화면 (640px 이상): 초록색 (bg-green-500)
  • 중간 화면 (768px 이상): 빨간색 (bg-red-500)
  • 큰 화면 (1024px 이상): 보라색 (bg-purple-500)

Tailwind CSS를 사용하는 상황

1) 빠른 프로토타이핑이 필요할 때

Tailwind는 복잡한 디자인을 신속하게 적용할 수 있으므로, 웹 애플리케이션의 초기 프로토타입을 빠르게 만들 때 유용합니다. 디자인을 하나하나 맞추지 않고도 미리 제공된 유틸리티 클래스를 통해 빠르게 스타일링할 수 있습니다.

2) 일관된 스타일을 유지해야 할 때

다양한 컴포넌트에서 일관된 스타일을 적용하려면 Tailwind가 유리합니다. 예를 들어, 버튼, 카드, 레이아웃 등의 컴포넌트에서 동일한 스타일을 유지하는 것이 매우 쉽습니다.

3) 복잡한 CSS 구조를 간결하게 만들고 싶을 때

Tailwind는 특정 스타일을 정의한 클래스를 사용하므로, 복잡한 CSS 구조를 줄이고 유지 보수가 쉬운 코드를 만들 수 있습니다. CSS 파일을 최소화하면서도, 각 요소에 유연하게 스타일을 적용할 수 있는 장점이 있습니다.

기존 CSS vs Tailwind CSS

기존의 CSS 파일을 사용해 스타일을 관리하는 경우, 새로운 요소나 컴포넌트에 스타일을 적용하려면 해당 요소에 맞는 클래스를 정의하거나 기존 스타일을 수정해야 합니다. 이 과정에서 스타일이 다른 요소들과 겹치거나 충돌하지 않도록 신경 써야 하며, 중복된 스타일 정의가 발생할 수 있습니다. 특히, CSS 코드가 복잡해질수록 이러한 관리가 어려워지고 유지 보수가 까다로워집니다.

반면 Tailwind CSS를 사용하면 이러한 문제를 크게 줄일 수 있습니다. Tailwind는 각 요소에 유틸리티 클래스를 직접 추가하는 방식이기 때문에 스타일 중복이나 충돌을 걱정할 필요가 없습니다. 특정 요소에 적용된 스타일이 다른 요소들과 겹치지 않으며, 필요할 때마다 클래스만 추가하면 되므로 직관적이고 일관된 스타일링이 가능합니다. CSS 파일을 별도로 작성하지 않아도, HTML 요소에 클래스명만으로 원하는 스타일을 즉시 적용할 수 있는 것이 Tailwind의 큰 장점입니다.

📋 마무리

Tailwind CSS는 Next.js 프로젝트에서 빠르고 효율적으로 스타일을 적용할 수 있는 강력한 도구입니다.

다양한 유틸리티 클래스를 통해 빠른 프로토타이핑이 가능하며, 복잡한 CSS 구조를 간결하게 만들어주는 장점을 가지고 있습니다.

특히 일관된 디자인과 반응형 웹을 손쉽게 구현할 수 있다는 점에서 Next.js와 매우 잘 어울립니다.

Tailwind CSS를 이용해서 보다 효율적인 웹 개발을 시작해보세요!

반응형
저작자표시 비영리 변경금지 (새창열림)