01082025년 3월 26일

[Next.js] "Tailwind CSS: 왜 많은 개발자들이 사랑하는가?"

Tailwind CSS란?

Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크로, HTML 요소에 직접 클래스를 적용해 스타일을 지정할 수 있도록 설계되었다.

?잠깐!!? 개별적인 유틸리티 퍼스트 방식의 CSS 프레임워크에 대해서는 아래 글을 참고하자!https://pangil-log.tistory.com/229

쉽게 말해, 기존의 CSS 방식과 달리 컴포넌트 기반이 아니라 개별적인 유틸리티 클래스를 조합하여 원하는 스타일을 빠르게 구성할 수 있다.

예를 들어, 다음과 같은 Tailwind CSS 클래스를 적용하면 버튼 스타일이 즉시 완성된다.

HTML

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600">버튼</button>

위 코드에서 bg-blue-500은 배경색, text-white는 글자색, px-4 py-2는 패딩, rounded-lg는 모서리 둥글기, shadow-md는 그림자를 추가하는 역할을 한다.

다른 스타일 방식과의 차이점

웹 개발에서 스타일을 적용하는 방식은 여러 가지가 있는데, 대표적으로 다음과 같은 방식들이 있다.

스타일 방식	특징	Tailwind CSS와의 차이
기본 CSS	스타일을 .css 파일에서 정의	반복적인 코드가 많아질 수 있음
CSS 프레임워크 (예: Bootstrap)	미리 정의된 컴포넌트 제공	디자인이 정해져 있어 커스터마이징 어려움
CSS-in-JS (예: Styled-components)	JavaScript에서 CSS를 관리	성능 이슈가 발생할 수 있음
Tailwind CSS	유틸리티 클래스를 활용	유지보수 용이, 빠른 개발 가능

즉, Tailwind CSS는 기본 CSS나 기존의 CSS 프레임워크보다 더 자유롭고 유연한 방식으로 스타일을 적용할 수 있다.

CSS-in-JS보다 성능이 뛰어나며, 클래스 조합만으로 손쉽게 스타일을 수정할 수 있는 장점이 있다.

Tailwind CSS 사용법

Tailwind CSS를 프로젝트에 적용하는 방법은 여러 가지가 있다. 가장 간단한 방법은 CDN을 사용하는 것이고, 실무에서는 npm 패키지를 설치하여 사용한다.

1) CDN을 이용한 방법

HTML

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

위 코드를 추가하면 Tailwind CSS의 모든 기능을 사용할 수 있다.

2) npm을 이용한 설치 방법

(1) Tailwind CSS 설치

터미널에서 다음 명령어를 실행하여 Tailwind CSS와 관련 패키지를 설치한다.

bash

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

? npx tailwindcss init -p는 JavaScript 기반 프로젝트에서 사용되는 설정이므로, TypeScript 프로젝트에서는 --ts 옵션을 사용해야 한다.

? postcss와 autoprefixer는 브라우저 호환성을 유지하고 Tailwind CSS 기능을 확장하는 데 필수적인 플러그인이다.

만약 설치 도중 버전 충돌이나 오류가 발생한다면, 특정 버전을 명시적으로 설치하여 문제를 해결할 수 있다.

bash

npm install -D tailwindcss@3.4.17

이렇게 하면 의존성 충돌을 방지하고, 예상치 못한 버그를 줄일 수 있다.

(2) tailwind.config.ts 설정

설치 후, tailwind.config.ts 파일을 열고 Tailwind CSS가 적용될 파일의 경로를 설정한다.

TypeScript

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

export default config;

? content 옵션은 Tailwind CSS가 실제로 적용될 파일의 경로를 지정하는 부분이다.
? src 폴더를 루트 디렉토리로 사용한다면, "./src/**/*.{js,ts,jsx,tsx,mdx}" 경로를 추가해야 한다.

(3) postcss.config.js 설정

PostCSS는 CSS 변환을 자동화하는 도구이며, Tailwind CSS는 PostCSS 플러그인으로 동작한다.
따라서 postcss.config.js 파일에서 Tailwind CSS를 사용할 수 있도록 설정해야 한다.

TypeScript

// ES 모듈 방식 (권장)
export const plugins = {
    tailwindcss: {},
    autoprefixer: {},
};

TypeScript

// CommonJS 방식
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

? TypeScript 환경에서는 ES 모듈 방식을 권장하며, CommonJS 방식을 사용할 경우 모듈 오류가 발생할 수 있다.
? 만약 CommonJS 방식(module.exports)을 사용할 경우, tsconfig.json의 module 옵션을 ESNext로 변경해야 한다.

JSON

{
  "compilerOptions": {
    "module": "ESNext"
  }
}

이렇게 하면 ES 모듈을 사용할 수 있도록 TypeScript 설정을 맞출 수 있다.

(4) globals.css 설정

Tailwind CSS는 **기본적으로 제공하는 스타일(Reset, Utility 등)**을 @tailwind 지시문을 통해 추가해야 한다.
globals.css 파일을 생성하고 다음 내용을 추가한다.

CSS

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

? 이 파일을 import하지 않으면 Tailwind CSS가 적용되지 않는다.

? 만약 VSCode에서 PostCSS 관련 에러가 발생할 경우, 해당 확장을 설치하면 해결된다.

? PostCSS Language Support 설치
이 확장은 PostCSS 문법을 지원하고 개발 편의성을 높여주는 기능을 제공한다.

(5) layout.tsx에서 globals.css 임포트

layout.tsx 파일에서 글로벌 스타일을 적용하기 위해 globals.css를 임포트한다.

JavaScript

import './globals.css';

export default function Layout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

? layout.tsx는 Next.js의 레이아웃 파일이며, globals.css를 여기에 import해야 모든 페이지에서 Tailwind CSS를 사용할 수 있다.

(6) page.tsx에서 Tailwind CSS 사용

설정이 완료되었으므로, page.tsx에서 Tailwind CSS 클래스를 사용하여 스타일링을 적용할 수 있다.

JavaScript

export default function Home() {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100">
      <h1 className="text-3xl font-bold text-blue-500">Hello, Tailwind CSS!</h1>
    </div>
  );
}

? flex justify-center items-center → 가운데 정렬
? min-h-screen bg-gray-100 → 최소 높이 설정 및 배경색 추가
? text-3xl font-bold text-blue-500 → 텍스트 크기, 굵기, 색상 적용

? 설치가 정상적으로 완료되었는지 확인하려면, 개발 서버(npm run dev)를 실행하여 브라우저에서 스타일이 적용되는지 확인하면 된다.

Tailwind CSS의 특징

Tailwind CSS가 많은 개발자들에게 사랑받는 이유는 다음과 같다.

빠른 개발 속도: CSS를 별도로 작성하지 않고, HTML에서 바로 스타일을 적용할 수 있다.
일관된 디자인: 미리 정의된 유틸리티 클래스를 활용해 디자인의 일관성을 유지할 수 있다.
유연한 커스터마이징: tailwind.config.js 파일을 수정하면 원하는 스타일을 쉽게 추가할 수 있다.
가벼운 파일 크기: 사용되지 않는 CSS를 제거하는 PurgeCSS 기능을 제공해 최적화된 빌드가 가능하다.

Tailwind CSS는 초보자부터 숙련된 개발자까지 누구나 쉽게 사용할 수 있는 강력한 CSS 프레임워크이다. 특히 React, Vue, Next.js 같은 최신 프레임워크와도 잘 어울려 다양한 프로젝트에서 활용되고 있다. 만약 스타일링 작업이 번거롭거나 빠르게 UI를 구성하고 싶다면 Tailwind CSS를 적극 추천한다!

최근 글