## 배경 Dependabot PR #101이 picomatch 보안 bump에 Tailwind v3→v4 메이저를 묶어 올렸으나, v4는 단순 의존성 bump가 아니라 설정/빌드 파이프라인 마이그레이션이 필요해 분리·단독 작업으로 전환한다(#101은 닫음). > picomatch는 전부 devDependencies(빌드 툴)에만 존재해 배포 번들에 영향 없음. 관련 보안 경보도 없어 긴급도 낮음. ## 작업 범위 - [ ] `tailwindcss` ^3.4.17 → ^4.x, PostCSS 플러그인 분리(`@tailwindcss/postcss`) 또는 `@tailwindcss/vite` 도입 - [ ] `postcss.config.js` / `tailwind.config.js` → v4 방식 정리 (CSS-first `@theme`, `@config` 호환 검토) - [ ] `@tailwind` 디렉티브 → `@import "tailwindcss"` 로 교체 - `src/styles/option.css`, `src/styles/shadow.css`, `src/styles/index.css` - [ ] **shadcn/ui (Radix) 토큰/색상 변수**가 v4에서 정상 동작하는지 확인 (HSL CSS 변수, `tailwindcss-animate` 등) - [ ] **Shadow DOM(content script) 스타일 주입**이 v4에서 깨지지 않는지 확인 (이 프로젝트 핵심 — `ShadowRootContext`) - [ ] 색상 커스터마이징 기능(옵션 페이지) 회귀 확인 ## 검증 - [ ] `npm run build` 통과 (TS check + Vite 빌드) - [ ] `npm run lint` / `npm run test` 통과 - [ ] `dist/`를 unpacked로 로드해 팝오버 대시보드·옵션 페이지 스타일 육안 확인 ## 참고 - 공식 업그레이드 가이드: https://tailwindcss.com/docs/upgrade-guide - 별도 브랜치(`chore/tailwind-v4` 등)에서 단독 PR로 진행
배경
Dependabot PR #101이 picomatch 보안 bump에 Tailwind v3→v4 메이저를 묶어 올렸으나, v4는 단순 의존성 bump가 아니라 설정/빌드 파이프라인 마이그레이션이 필요해 분리·단독 작업으로 전환한다(#101은 닫음).
작업 범위
tailwindcss^3.4.17 → ^4.x, PostCSS 플러그인 분리(@tailwindcss/postcss) 또는@tailwindcss/vite도입postcss.config.js/tailwind.config.js→ v4 방식 정리 (CSS-first@theme,@config호환 검토)@tailwind디렉티브 →@import "tailwindcss"로 교체src/styles/option.css,src/styles/shadow.css,src/styles/index.csstailwindcss-animate등)ShadowRootContext)검증
npm run build통과 (TS check + Vite 빌드)npm run lint/npm run test통과dist/를 unpacked로 로드해 팝오버 대시보드·옵션 페이지 스타일 육안 확인참고
chore/tailwind-v4등)에서 단독 PR로 진행