[React] tailwind 설치 & TrobuleShooting

Dependencies

• vites: 4.4.0
• tailwind: 3.3.3

 

 

Tailwind CSS v3.3.3을 설치하는 npm 명령어와 설정 방법은 다음과 같습니다.

1. Tailwind CSS v3.3.3 설치

npm install -D tailwindcss@3.3.3 postcss autoprefixer

2. Tailwind 설정 파일 생성

설치 후 Tailwind CSS 설정 파일을 생성하려면 다음 명령어를 실행하세요.

npx tailwindcss init -p

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

3. tailwind.config.js 설정

생성된 tailwind.config.js를 열고 아래와 같이 수정하세요.

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

content 배열에 Tailwind가 스타일을 적용할 파일 경로를 추가해야 합니다.

4. CSS 파일에 Tailwind 지시어 추가

src/index.css 또는 프로젝트의 메인 CSS 파일을 열고 다음을 추가하세요.

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

5. Vite 프로젝트 실행

모든 설정이 완료되었으면 Vite 개발 서버를 실행하세요.

npm run dev

 

 

 

VSCode에서 Tailwind IntelliSense가 추천 단어를 표시하지 않을 때 해결 방법

---

🔹 1. VSCode 재시작

가장 기본적인 해결 방법입니다.

• VSCode를 완전히 종료하고 다시 실행하세요.
• 그래도 안 되면 컴퓨터를 재부팅한 후 확인하세요.

---

🔹 2. Tailwind 설정 확인 (tailwind.config.js)

Tailwind CSS가 content 속성에서 파일을 제대로 감지해야 자동 완성이 작동합니다.

✅ 해결 방법:
tailwind.config.js 파일을 열어서 content 속성이 올바르게 설정되어 있는지 확인하세요.

js

복사편집

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

🚨 오류 예시 (잘못된 설정)

js

복사편집

content: []

이렇게 설정되어 있으면 Tailwind IntelliSense가 동작하지 않습니다.

---

🔹 3. settings.json 확인 (VSCode 설정 파일)

VSCode가 Tailwind CSS 확장을 올바르게 감지할 수 있도록 설정해야 합니다.

✅ 해결 방법:

1. Ctrl + Shift + P (Mac: Cmd + Shift + P) → "Preferences: Open Settings (JSON)" 검색 후 열기
2. 아래 설정 추가:
3. 나는 default가 아닌 해당 workspace에만 적용했다. Open workspace Setting => setting.json

json

복사편집

{ "editor.quickSuggestions": { "strings": true }, "tailwindCSS.experimental.classRegex": [ "tw`([^`]*)", // Tailwind CSS 적용 "tw\\([^)]*\\)", "tw\\.\\w+([^)]*)" ] }

---

🔹 4. Tailwind 패키지 설치 여부 확인

Tailwind CSS가 프로젝트에 설치되어 있어야 IntelliSense가 작동합니다.

✅ 해결 방법:
터미널에서 다음 명령어를 실행하여 Tailwind가 설치되어 있는지 확인하세요.

 

npm list tailwindcss

🚨 오류 메시지:

-- (empty)

이 메시지가 나온다면 Tailwind가 설치되지 않은 것입니다.

📌 해결 방법 (설치하기):

 

npm install -D tailwindcss postcss autoprefixer

설치 후 VSCode를 재시작하세요.

---

🔹 5. VSCode 확장 프로그램 재설치

1. Tailwind CSS IntelliSense 확장을 제거
   • Ctrl + Shift + X → "Tailwind CSS IntelliSense" 검색
   • 제거 후 VSCode 재시작
2. 다시 설치 후 확인

---

🔹 6. JIT 모드 활성화 (추가 해결 방법)

Tailwind CSS v3 이상에서는 **JIT 모드(Just-In-Time)**를 기본적으로 사용합니다.
VSCode가 자동 완성을 잘 감지하도록, tailwind.config.js에서 JIT 모드를 명확히 설정하세요.

js

복사편집

export default { mode: "jit", // JIT 모드 활성화 content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], };