🚀 TypeScript와 Tailwind CSS로 개발 환경 구축

안녕하세요! 👋 오늘은 프론트엔드 개발자들 사이에서 가장 사랑받는 두 가지 도구, TypeScript와 Tailwind CSS를 함께 설정하는 방법을 알아보겠습니다. 이 조합은 코드의 안정성을 높이고, 개발 속도를 향상시키는 환상적인 시너지를 발휘합니다.

---

🤔 왜 TypeScript와 Tailwind CSS를 함께 사용할까요?

두 도구의 조합이 왜 강력한지 간단히 짚고 넘어가겠습니다.

• TypeScript (TS): JavaScript에 정적 타입을 추가한 언어입니다. 컴파일 단계에서 오류를 미리 잡아낼 수 있어 코드의 안정성과 유지보수성이 크게 향상됩니다. 자동 완성 기능도 강력해져 개발 경험이 즐거워집니다. 🤓
• Tailwind CSS: 유틸리티 우선(Utility-First) CSS 프레임워크로, 미리 정의된 클래스를 HTML에 직접 적용하여 빠르고 일관된 디자인 시스템을 구축할 수 있습니다. CSS 파일을 뒤적일 필요 없이 마크업 내에서 스타일링을 완성할 수 있죠. 🎨

이 둘을 함께 사용하면, 타입의 안정성과 빠른 스타일링이라는 두 마리 토끼를 모두 잡을 수 있습니다. 컴포넌트 기반 프레임워크(React, Vue, Svelte 등)와 함께라면 그 효과는 배가 됩니다.

---

🛠️ 프로젝트 설정 시작하기 (feat. Next.js)

가장 인기 있는 프레임워크 중 하나인 Next.js를 기준으로 설정 과정을 안내해 드리겠습니다.

1. Next.js 프로젝트 생성

먼저, TypeScript가 포함된 새로운 Next.js 프로젝트를 생성합니다. 터미널을 열고 다음 명령어를 입력하세요.

npx create-next-app@latest my-ts-tailwind-app --typescript

설치 과정에서 몇 가지 질문이 나올 수 있습니다. 기본 설정을 선택하고 진행하면 my-ts-tailwind-app이라는 이름의 프로젝트 폴더가 생성됩니다.

2. Tailwind CSS 설치 및 설정 파일 생성

프로젝트 폴더로 이동한 후, Tailwind CSS와 관련 의존성 패키지(postcss, autoprefixer)를 설치합니다.

cd my-ts-tailwind-app
npm install -D tailwindcss postcss autoprefixer

이제 다음 명령어를 실행하여 Tailwind CSS 설정 파일을 생성합니다.

npx tailwindcss init -p

이 명령어를 실행하면 tailwind.config.ts (또는 .js)와 postcss.config.js 파일이 프로젝트 루트에 생성됩니다.

3. Tailwind CSS 경로 설정

tailwind.config.ts 파일을 열고, Tailwind가 스타일을 적용할 파일들의 경로를 content 배열에 추가해 줍니다. 이렇게 해야 프로덕션 빌드 시 사용되지 않는 스타일이 제거(Purge)되어 CSS 파일 크기를 최적화할 수 있습니다.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

4. 전역 CSS에 Tailwind 지시어 추가

src/app/globals.css (또는 styles/globals.css) 파일을 열어 기존 내용을 모두 지우고, Tailwind CSS의 기본 지시어(directives)를 추가합니다.

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

• @tailwind base: 브라우저의 기본 스타일을 초기화하고 Tailwind의 기본 스타일을 적용합니다.
• @tailwind components: Tailwind의 컴포넌트 클래스를 주입합니다.
• @tailwind utilities: Tailwind의 유틸리티 클래스를 주입합니다.

5. 개발 서버 실행 및 확인

이제 모든 설정이 끝났습니다! 개발 서버를 실행하여 Tailwind CSS가 잘 적용되는지 확인해 봅시다.

npm run dev

src/app/page.tsx 파일을 열고, 다음과 같이 Tailwind 클래스를 사용해 간단한 스타일을 적용해 보세요.

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600 animate-pulse">
        🚀 TS + Tailwind CSS 설정 완료! 🚀
      </h1>
      <p className="mt-4 text-lg text-gray-700">
        이제 멋진 웹사이트를 만들어 보세요! ✨
      </p>
    </main>
  );
}

브라우저에서 "TS + Tailwind CSS 설정 완료!"라는 파란색 텍스트가 깜빡이며 보인다면 성공입니다! 🎉

---

💡 알아두면 좋은 팁

• 클래스 순서 자동 정렬: prettier-plugin-tailwindcss 플러그인을 설치하면 클래스 순서를 자동으로 정렬해주어 코드의 일관성을 유지하는 데 큰 도움이 됩니다.
• 컴포넌트 추상화: 반복되는 유틸리티 클래스 조합은 별도의 컴포넌트로 만들어 재사용성을 높이세요.
• @apply 사용 최소화: 가급적 유틸리티 클래스를 직접 사용하는 것을 권장합니다. @apply는 꼭 필요한 경우에만 제한적으로 사용해야 유지보수성이 떨어지는 것을 막을 수 있습니다.
• VS Code 확장 프로그램: Tailwind CSS IntelliSense 확장 프로그램을 설치하면 클래스 이름 자동 완성, 미리보기 등 편리한 기능을 사용할 수 있어 개발 효율이 극대화됩니다.