728x90
Tailwind CSS란?

 

 

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

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

[CSS] "CSS 설계의 혁명! 유틸리티 퍼스트 방식이 뜨는 이유"

Tailwind CSS 방식을 공부하면서 해당 방식이 '유틸리티 퍼스트 방식의 CSS 프레임워크'라는 것을 알게 되었다. 그러나, 유틸리티 퍼스트 방식의 CSS 프레임워크가 무엇인지 궁금해지기 시작했다.  

pangil-log.tistory.com

 

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

 

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

<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을 이용한 방법

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

 

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

 

 

2) npm을 이용한 설치 방법

 

(1) Tailwind CSS 설치

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

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

 

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

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

 

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

npm install -D tailwindcss@3.4.17

 

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

 

(2) tailwind.config.ts 설정

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

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를 사용할 수 있도록 설정해야 한다.

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

 

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

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

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

 

(4) globals.css 설정

Tailwind CSS는 **기본적으로 제공하는 스타일(Reset, Utility 등)**을 @tailwind 지시문을 통해 추가해야 한다.
globals.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를 임포트한다.

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 클래스를 사용하여 스타일링을 적용할 수 있다.

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를 적극 추천한다!

728x90

'💻 개발 > 🎩 Next.js' 카테고리의 다른 글

[Next.js] React.useState와 useState, 단순한 스타일 차이일까?  (0) 2025.04.05
[Next.js] Next.js 페이지 이동, 어떤 방법이 최선인가?  (0) 2025.04.04
[Next.js] Next.js + Tailwind에서 커스텀 폰트를 가장 쉽게 적용하는 방법!  (0) 2025.04.04
[Next.js] "Tailwind CSS Prettier 플러그인의 정렬 우선순위 이해하기!"  (0) 2025.03.26
[Next.js] "Tailwind CSS, 더 깔끔하고 예쁘게 정리하는 방법!"  (0) 2025.03.26

티스토리툴바