Vite + React + TypeScript 프로젝트에 테일윈드(Tailwind) 설치하는 방법

이번 프로젝트에 타입스크립트에 이어서 야심차게 테일윈드도 도입해보려고 합니다!

조금 더 쉽고 빠르게 디자인 하기 위해 테일윈드를 선택했는데 간단히 테일윈드가 뭔지 알아보고 설치 해보겠습니다.

 

🍊 테일윈드란?

테일윈드는 클래스 기반의 유틸리티 퍼스트(Utility-First) CSS 프레임워크입니다.

기존 CSS 프레임워크(Bootstrap, Material UI)처럼 미리 만들어진 컴포넌트가 아니라 스타일링을 위한 유틸리티 클래스들만 제공하는 방식으로 동작한다.

🍊 테일윈드의 특징

• 컴포넌트가 아닌 유틸리티 클래스 제공→ class="p-4 bg-blue-500 text-white" 같은 방식으로 사용한다.
• CSS 파일을 직접 작성하지 않아도 됨→ .css 파일에서 스타일을 정의할 필요 없이, HTML이나 JSX에서 클래스 조합으로 디자인 가능하다.
• JIT (Just-In-Time) 컴파일→ 실제로 사용된 클래스만 CSS 파일에 포함되어 빌드 크기를 줄인다.
• 반응형 디자인이 쉬움→ sm:, md:, lg: 같은 접두사를 사용하여 반응형 스타일을 쉽게 적용 가능하다.

 

🍊 Vite + React + TypeScript 프로젝트에 Tailwind CSS 설치 및 적용 방법

1. Vite + React + TypeScript 프로젝트 생성

npm create vite@latest
npm install

 

 2. 테일윈드 설치

tailwindcss, postcss, autoprefixer를 개발 의존성으로 설치한다.

현재 테일윈드는 v4가 나와서 기본적인 명령어로 설치할 경우 v4로 설치가 된다.

하지만 v3을 이용할 사람(바로 나!)도 있으니 같이 적어두겠다.

• v4 설치할 경우

npm install -D tailwindcss postcss autoprefixer

• v3 설치할 경우

npm install -D tailwindcss@3 postcss autoprefixer

 

이 다음 주의 할 것 테일윈드 3버전과 4버전 사이에 바뀐 것이있다!

 

우선 3.0.0버전대를 설치하는 사람은 아래 명령어를 입력하면 된다.

npx tailwindcss init -p 명령어 실행 시 tailwind.config.js와 postcss.config.js 파일이 자동 생성된다.

npx tailwindcss init -p

 

 

그리고 4버전 이상부터는 해당 명령어가 작동하지 않는다고 한다. 

 

오류가 계속 나서 찾아본 결과 이제 tailwind.config.js파일을 사용하는 대신 CSS 파일에서 직접 사용자 정의를 정의하게 바뀌었다는 것이다. 그래서 4.0.0 버전 이상인 분들은 이다음 tailwind.config.js파일 설정 수정도 건너뛰면 된다.

자세한 사항은 아래 게시글을 참조해보자.

https://www.fdaytalk.com/npx-tailwindcss-init-npm-error-could-not-determine-executable-to-run/

 

나는 고민한 끝에 아직 레퍼런스가 많이 나오지 않은 4버전 대신 3버전을 다운받아 사용하기로 했다.

 

3) tailwind.config.js 설정 수정

content 속성을 설정하여 Tailwind가 적용될 JSX 및 TypeScript 파일을 감지하도록 설정해준다.

./src/**/*.{js,ts,jsx,tsx} → React 컴포넌트에서 Tailwind CSS를 사용할 수 있도록 경로를 추가한다.

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

 

4. 공통 CSS 파일(index.css)을 만들어 tailwind 적용시키기

Tailwind의 기본 스타일(base), 컴포넌트(components) ,유틸리티(utilities)를 불러온다.

이렇게 하면 Tailwind CSS를 JSX, TSX 에서 사용할 준비가 완료된다!

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

 

5. 공통 CSS 파일 import 해서 사용하기

일반적인 컴포넌트 구조에서는 main.tsx에 한번만 import하면 된다.

import './index.css'
....

 

 

6. 테일윈드 적용 확인

마지막으로 테일윈드가 작동하는지 확인해보자!

src/App.tsx에서 테일윈드 클래스를 사용하여 스타일을 적용해보면 아래와 같은 결과가 나와야 한다.

export default function App() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-100">
      <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
        <h1 className="text-2xl font-bold text-gray-900">Hello, Tailwind!</h1>
        <p className="text-gray-600">이것은 Tailwind CSS를 사용한 React 프로젝트입니다.</p>
        <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
          클릭하세요
        </button>
      </div>
    </div>
  );
}