[웹개발 100일] Day 1 - Vite 환경에 Tailwindcss 설치 및 실행 (Tailwind 버전 오류 해결)

 
 
 

 
 

🚀 요약

작업 시간: 2시간반
✅ Vite + React + TypeScript 프로젝트 설정
✅ ESLint & Prettier, Tailwind 설치 및 설정
 
 

🚀 React + Vite 환경에 Tailwind 설치하기

와 첫날부터 진이 다 빠진다.
머리에서 스팀 나오고 있지만 생각만 1년 넘게 했던 개인 프로젝트의 첫 발을 디딘 거 같아서 의미 있는 시간이었다 😇
 
 
다 새로 써보는 라이브러리들이라 일단 챗지피티가 시키는 순서대로 환경구축하고 있는데 Tailwind 설치 및 실행에만 2시간이 걸렸다;
지피티가 계속 터미널에서 tailwindcss를 실행하게 했지만, 무슨 방법을 써도 제대로 라이브러리 설치도 안 되는 것 같고 당연히 실행도 되지 않았다 🫠
 
 
문제의 라인 🙃👊💥

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

 

에러 메세지

npm error could not determine executable to run npm error A complete log of this run can be found in: (로그 파일 주소)

 

 

 

스택 오버플로우에서 찾은 답변으로는 내가 설치한 tailwind가 4버전이어서 생긴 문제인 듯했다.

3으로 낮춰주면 정상적으로 실행된다.

npm install tailwindcss@3

Error: 'could not determine executable to run' when initializing Tailwind CSS with shadcn/ui

 

 

그대로 4버전을 사용하고 싶은 경우 Using Vite 섹션의 내용대로 따라하면 된다.

다만 init 명령을 실행하지 않기 때문에 tailwind.config.js 등 각종 설정 파일이 자동으로 생기지 않음.

Installing with Vite - Installation

 

 

postcss.config.js에 다음 코드 추가

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

 

 

tailwind.config.js의 content에 항목 추가

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

App.tsx로 테스트

import "./App.css";

function App() {
  return (
    <>
      <div className="flex items-center justify-center h-[100px] bg-gray-100">
        <h1 className="text-3xl font-bold text-blue-500">Hello, world!</h1>
      </div>
    </>
  );
}

export default App;

 
 
잘 적용된다 🥹

 

 

+

제대로 작동하지 않을 경우 tailwindcss import 해놓은 index.css에 아래 코드도 추가

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