Vite 기반 React 프로젝트에 Tailwind CSS 적용하기

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 개발을 빠르고 쉽게 만들 수 있습니다. 정말 빠르게 개발할 수 있다는 점에서 개인적으로 tailwindcss를 선호하는 편입니다.

 

본 글에서는 Vite 기반의 React 프로젝트에서 Tailwind CSS를 적용하는 방법에 대해 설명합니다.

 

Vite 프로젝트 생성 및 기본 설정

먼저 Vite기반의 React 프로젝트를 생성해야하는데, 아래 글을 참고하시면 좋습니다.

Bun 설치 및 React 프로젝트 생성하기

 

 

bun create vite react-todo-app

 

프로젝트 생성 후, 정상적으로 만들어졌는지 확인을 위해 앱을 실행해봅시다. (여기서는 패키지 매니저로 bun을 사용하였습니다. 취향에 맞게 npm, yarn, pnpm 등을 사용하시면 됩니다)

cd react-todo-app
bun install
bun dev

 

Tailwind CSS 설치 및 설정

프로젝트에 Tailwind CSS를 설치하려면 다음 명령어를 실행합니다.

# npm을 사용하는 경우
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# yarn을 사용하는 경우
yarn add --dev tailwindcss postcss autoprefixer
tailwindcss init -p

# bun을 사용하는 경우
bun add --dev tailwindcss postcss autoprefixer
tailwindcss init -p

 

tailwindcss init -p 명령어에 의해, tailwind.config.js 설정 파일이 생성됩니다. 이후 아래와 같이 content 값에 tailwindcss가 적용될 범위를 지정해줍니다.

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

 

여기서는 index.html과 src 폴더 내의 모든 JavaScript, TypeScript, JSX, TSX 파일을 대상으로 설정하였습니다. (범위에 벗어나는 소스에서 tailwindcss를 사용하려고하면 사용할 수 없으므로 자신의 프로젝트에 맞게 제대로 설정해야 합니다)

 

글로벌 CSS 파일 Tailwind import

src 폴더에 index.css 파일을 열어서 아래 구문을 추가합니다.

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

 

위 코드는 Tailwind의 기본 스타일(base), 컴포넌트 스타일(components), 그리고 유틸리티 스타일(utilities)을 적용하기 위해 import 하는 것이므로 반드시 필요합니다.

 

Tailwind CSS 사용해보기

설정은 모두 완료되었습니다. 이제 자신의 app에 tailwindcss를 적용하여 제대로 스타일이 입혀지는지 확인해봅시다.

export default function App() {
  return (
    <div className="w-screen h-screen bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center">
      <div className="max-w-[640px] w-full h-[70vh] bg-white rounded mx-auto p-10">
        <h1 className="font-bold text-center text-3xl">React To Do App</h1>
      </div>
    </div>
  );
}

 

tailwindcss으로 스타일링