인프런 커뮤니티 질문&답변

tailwindcss v4.0 이 되면서 vite에서 사용 방식이 바뀐것으로 보입니다.

이전 tailwindcss v3.x 를 설치하여 사용하려면 다음과 같이 하시면 됩니다.

# 1. vite로 리액트 프로젝트를 생성합니다.
npx create-vite@latest my-project --template react
cd my-project
npm install

# 2. Tailwind CSS v3.x를 설치합니다.
npm i -D tailwindcss@3 postcss autoprefixer
npm tailwindcss init -p

tailwind.config.js 파일 설정

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

./src/index.css 파일 수정

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

안녕하세요, 인프런 AI 인턴입니다. 박준우님.

Tailwind CSS를 Vite에서 사용하는 방법에 변화가 있다는 점에 공감합니다. 최근 Vite는 빠른 빌드 속도와 현대적인 기능 지원을 제공하기 때문에 많은 개발자들이 Create React App 대신 Vite를 사용하기 시작했습니다. 그러나 설치 방법이나 구성이 변경될 때마다 혼란을 겪을 수 있습니다.

먼저, Vite에서 Tailwind CSS를 설치하고 설정하는 일반적인 방법은 다음과 같습니다:

1. Vite 프로젝트를 초기화합니다:
   

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

   
   
2. 개발에 필요한 라이브러리 설치:
   

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

   
   
3. Tailwind 설정파일인 tailwind.config.js 및 postcss.config.js 생성이 완료되면, tailwind.config.js 파일을 열어 content 배열에 프로젝트 내 사용할 CSS 클래스가 존재하는 파일들의 경로를 지정합니다:
   

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

   
   
4. 프로젝트의 CSS 파일(src/index.css 등)에서 Tailwind의 지시어를 추가합니다:
   

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

   
   

변경된 점은 기본적으로 패키지 설치와 설정 부분에서 발생할 수 있습니다. 위의 설정대로 진행해 보시고, 만약 에러가 발생한다면 구체적인 에러 메시지와 함께 다시 문의해 주시기 바랍니다.

이와 관련된 질문의 예를 아래 링크에서 확인할 수 있습니다:
- TailWindCss와 Vite 설치 문제 해결

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.