Tailwind CSS란?

Tailwind CSS는 유틸리티-퍼스트(Utility-First) 접근 방식을 사용하는 CSS 프레임워크로, 스타일을 빠르게 적용할 수 있는 다양한 작은 유틸리티 클래스들을 제공합니다. 이 프레임워크는 커스텀 CSS를 거의 작성하지 않고도 손쉽게 디자인을 구현할 수 있도록 해주며, 컴포넌트 기반 스타일링을 쉽게 만들고 유지할 수 있게 도와줍니다.

Utility-First란?

Utility-First는 스타일을 작은 단위의 유틸리티 클래스(예: text-center, mt-4, bg-blue-500 등)로 구성하는 스타일링 접근 방식입니다. 이 접근 방식은 CSS 코드의 반복을 줄이고, 유지보수성과 개발 속도를 높이는 데 도움이 됩니다. Tailwind CSS는 이러한 유틸리티 클래스들을 활용하여 빠르고 직관적인 스타일링을 가능하게 합니다.

Tailwind CSS 설치 과정

Tailwind CSS를 설치하고 사용하는 과정은 다음과 같습니다

1. 프로젝트 생성 및 초기화

먼저, 프로젝트를 생성하고 npm 초기화를 진행합니다.

mkdir my-project
cd my-project
npm init -y

2. Tailwind CSS 설치

Tailwind CSS와 필요한 종속성을 설치합니다.

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

• tailwindcss: Tailwind CSS 프레임워크.
• postcss: Tailwind CSS와 같은 CSS 툴들을 위한 플러그인 런타임.
• autoprefixer: CSS에 필요한 브라우저 접두사를 자동으로 추가.

3. Tailwind CSS 설정 파일 수정

tailwind.config.js 파일을 열어 콘텐츠를 지정합니다:

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Tailwind CSS를 CSS 파일에 추가

src/index.css 또는 사용할 CSS 파일에 Tailwind CSS 지시문을 추가합니다:

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

5. 프로젝트 실행

Tailwind CSS가 제대로 적용되었는지 확인하기 위해 프로젝트를 실행합니다.

npm run dev

이제 Tailwind CSS가 설치되고, 유틸리티 클래스를 활용한 스타일링을 시작할 준비가 완료되었습니다.

Tailwind CSS의 장단점

Tailwind CSS의 장점

• 빠른 개발 속도: 유틸리티 클래스들로 구성되어 있어 CSS를 작성하지 않고도 빠르게 스타일을 적용할 수 있습니다.
• 일관성 있는 디자인: 미리 정의된 클래스들을 사용하여 프로젝트 전반에 걸쳐 일관성 있는 스타일을 유지할 수 있습니다.
• 작은 파일 크기: 사용하지 않는 CSS는 자동으로 제거(Purge)되어 최종 CSS 파일의 크기를 최소화할 수 있습니다.
• 유연한 커스터마이징: Tailwind의 설정 파일을 통해 테마나 스타일을 쉽게 커스터마이징할 수 있습니다.
• 반응형 디자인 지원: 반응형 유틸리티 클래스가 기본 제공되어 모바일부터 데스크탑까지 쉽게 대응할 수 있습니다.

Tailwind CSS의 단점

• 초기 학습 곡선: Tailwind의 유틸리티 클래스가 많아 익숙해지기까지 시간이 걸릴 수 있습니다.
• 클래스 중복: HTML 코드에 많은 클래스가 중첩될 수 있어 가독성이 떨어질 수 있습니다.
• 의존성 문제: 프로젝트의 스타일링이 Tailwind에 종속되므로, 다른 CSS 프레임워크로 전환하기 어려울 수 있습니다.
• JSX의 가독성 저하: React 같은 프레임워크에서 JSX 코드가 복잡해질 수 있습니다.
• 커스터마이징 제약: 매우 구체적인 디자인 커스터마이징이 필요한 경우 Tailwind의 기본 제공 클래스만으로는 한계가 있을 수 있습니다.

VSCode 추천 익스텐션

• Tailwind CSS IntelliSense: Tailwind CSS 클래스에 대한 자동 완성 및 오류 검사를 제공하여 개발 속도를 높이고, 정확한 클래스 사용을 도와줍니다.
  • 설치 명령: ext install bradlc.vscode-tailwindcss
• PostCSS Language Support: Tailwind CSS와 함께 사용하는 PostCSS에 대한 지원을 제공합니다.
  • 설치 명령: ext install csstools.postcss
• Headwind: Tailwind CSS 클래스들을 자동으로 정렬하여 코드 가독성을 높이고 일관된 스타일링을 유지합니다.
  • 설치 명령: ext install heybourn.headwind

Tailwind CSS 설치 예제 - Vite 프로젝트 설정

1. Vite 프로젝트 생성

Vite와 함께 Tailwind CSS를 사용하는 경우, Vite 프로젝트를 다음과 같이 생성합니다:

npm create vite@latest my-project -- --template react
cd my-project

2. Tailwind CSS 설치

Tailwind CSS와 그에 필요한 의존성을 설치합니다.

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

3. 템플릿 경로 설정

tailwind.config.js 파일을 수정하여 템플릿 파일 경로를 설정합니다:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Tailwind CSS를 CSS 파일에 추가

./src/index.css 파일에 Tailwind의 디렉티브를 추가합니다:

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

5. 빌드 프로세스 실행

다음 명령어를 사용해 빌드 프로세스를 실행합니다:

npm run dev

6. Tailwind 사용 시작

이제 Tailwind의 유틸리티 클래스를 사용하여 프로젝트에 스타일을 적용할 수 있습니다.

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  );
}

Tailwind CSS는 빠르고 직관적인 유틸리티 클래스 기반의 스타일링을 통해 개발 시간을 단축하고, 일관성 있는 디자인을 유지할 수 있게 해줍니다. 초기 학습 곡선이 있긴 하지만, Tailwind CSS IntelliSense와 같은 도구를 활용하면 효율적으로 배우고 적용할 수 있습니다. 이러한 도구들을 잘 활용하여 보다 효율적인 스타일링과 유지보수를 경험해 보세요.