Tailwind JIT 모드

🚀 Tailwind JIT(Just-In-Time) 모드란?

Tailwind CSS의 JIT(Just-In-Time) 모드는 필요한 스타일을 실시간으로 즉시 생성하는 방식이다.
기존 Tailwind 방식(정적 빌드)보다 더 빠르고 유연하게 동작하며, max-[1280px] 같은 임의의 커스텀 브레이크포인트도 지원한다.

---

🔥 JIT 모드의 장점

✅ 사용한 클래스만 빌드 → 빌드 크기가 작아짐
✅ 즉시 적용 → 개발 중 빠르게 스타일 변경 가능
✅ 커스텀 값 지원 → w-[763px] 같은 임의 값 사용 가능
✅ 다양한 상태 변형 가능 → hover:[text-red-500] 같은 동적 클래스 지원

---

🎯 Tailwind JIT 모드 활성화 방법

JIT 모드는 Tailwind v3 이상에서는 기본 활성화되어 있다.
만약 Tailwind가 클래스를 잘 인식하지 않는다면, 아래 설정을 확인해야 한다.

✅ 1. tailwind.config.js에서 JIT 모드 확인

📌 JIT 모드는 mode: "jit" 설정이 필요하지 않지만, 확실하게 활성화하고 싶다면 추가할 수 있다.

module.exports = {
  mode: "jit", // JIT 모드 활성화 (필요하지 않지만 추가 가능)
  content: ["./src/**/*.{js,jsx,ts,tsx}"], // Tailwind가 적용될 파일 지정
  theme: {
    extend: {},
  },
};

• content 배열에 Tailwind를 사용할 파일 경로가 포함되어 있어야 함 (./src/**/*.{js,jsx,ts,tsx})
• JIT 모드는 Tailwind v3 이상에서는 기본 활성화이므로 mode: "jit"를 추가하지 않아도 됨

---

✅ 2. Tailwind가 JIT 모드에서 정상 작동하는지 확인

📌 터미널에서 개발 서버를 실행할 때, JIT 모드가 활성화되었는지 확인하는 방법

npm run dev

🖥 콘솔 출력 예시 (JIT 모드 활성화됨)

Rebuilding...
Done in 57ms.

✅ 스타일이 즉시 반영되면 JIT 모드가 활성화된 것!

---

🎯 JIT 모드가 제대로 작동하지 않을 때 해결 방법

🔹 1. Tailwind가 클래스를 인식하지 못하는 경우

🔍 해결 방법: content 설정에 Tailwind를 사용할 파일 경로가 올바르게 포함되어 있는지 확인

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"], // 이 설정이 없으면 Tailwind가 클래스 탐색 불가
  theme: {
    extend: {},
  },
};

🔹 2. Tailwind 버전이 낮아서 JIT 모드가 없는 경우

🔍 해결 방법: 최신 Tailwind로 업데이트

npm install -D tailwindcss@latest

🔹 Tailwind v2를 사용 중이라면 v3로 업데이트해야 JIT 모드가 기본 활성화됨

---

🚀 JIT 모드를 활용한 실전 예제

📌 JIT 모드가 활성화되면 Tailwind에서 즉시 동적 클래스를 사용할 수 있다.

<div className="w-[763px] h-[425px] bg-[#1E293B] max-[1280px]:w-[500px]">
  JIT 모드에서 동적 크기 적용!
</div>

✅ 일반 Tailwind에서는 w-[763px] 같은 임의 값이 적용되지 않지만, JIT 모드에서는 즉시 반영된다!

---

🎯 결론: JIT 모드는 필수!

💡 Tailwind JIT 모드는 속도도 빠르고, 커스텀 클래스도 자유롭게 사용할 수 있어서 최신 프로젝트에서는 기본적으로 활성화해야 한다.