POC를 해야하는 npm 라이브러리가 있어
간단하게 vite + react + typescript + tailwindcss 프로젝트를 생성하고
아래 공식문서를 보고 tailwindcss setting을 하려는데..
App.tsx
vite.config.ts
index.css
Browser
모든 설정을 올바르게 했음에도 tailwindcss가 적용되지 않는다….
처음엔 아무생각없이 간단한 웹서칭 + ai 를 이용하면 해결될줄알았다…
하지만 ai 는 tailwindcss 4v로 학습되지 않은 상황이었고
왠만한 웹서칭 해결 방법들로는 해결되지 않았다…
1. (대부분) vite.config.ts 올바르게 설정하였는지?
위에도 봤듯이 공식문서에서 제공하는것과 동일하게 설정하였다.
2. (대부분) index.css에 import를 올바르게 하고 main.tsx or App.tsx에서 import하였는지?
위에도 봤듯이 index.css에 import tailwindcss를 올바르게 하였고
main.tsx에서 index.css를 import하고 있는 상황이라 이것도 아니다.
서칭으로 해결이 안되자 직접 tailwindcss 깃헙 이슈를 뒤지기 시작했다…
3. [git issue] Nuxt.js에서 base레이어의 CSS 가 제대로 적용되지 않음
https://github.com/nuxt/nuxt/issues/32575#issuecomment-3102278321
대충 요약하자면 tailwind는 현재 프로젝트 작업 디렉토리안 class들만을 감지한다….
다른 작업 디렉토리는 감지하지 않으니 명시적으로 감지하게 css파일에 키워드 를 넣어야 한다는것…
@import "tailwindcss";
@source "../../components/**/*";위에서 보이듯이 @source로 class를 감지할 파일을 명시한 모습이다…
위처럼 나도 추가한 결과
@import "tailwindcss";
@source "../src/*"
된다…..
tailwindcss가 빌드할 class들이 감지되지 않던 문제였다….
그렇다면 @source 감지 범위를 더욱 넓게 설정하여 내부 컴포넌트들도 같이 class들이 감지 되는지 확인해보았다.
@import "tailwindcss";
@source "../src/**/*";
이번엔 또 안된다……
*/ glob 문법이 통하지 않는다면 파일구조가 변경될때 마다 @source키워드를 추가해야하니
이문제는 이렇게 해결할수 없다고 판단했다…
tailwindcss 공식문서를 찾아보자
https://tailwindcss.com/docs/detecting-classes-in-source-files
?? .gitignore에 명시된 파일들은 class가 감지되지 않는다는 설명이 있다…
하지만 나는 gitignore에 파일들을 넣은적이 없다….
다시한번 git관련 tailwindcss 이슈를 찾아보았다.
4. [git issue] git repository 외부 프로젝트에서 class 감지 못함
https://github.com/tailwindlabs/tailwindcss/issues/18957
이슈 자체는 나와는 관련 없는 문제 같다… 하지만 3주전 comment중 이런글이 있었다.
홈 폴더에 있는 * 규칙이 프로젝트가 홈 폴더(또는 그 하위 폴더)에 있을 때 작동하지 않는 거의 확실한 이유입니다.
.gitignore 규칙을 적용한다는 것은 주어진 파일/폴더 위에서 리포지토리 루트까지 모든 .gitignore 파일을 찾아야 함을 의미합니다. 현재 저장소 내부가 아니므로, /까지 올라가며 무시 파일을 찾아 적용합니다. 이는 git 저장소 내부가 아니더라도 수행됩니다. 프로젝트 생성 후 설치 및 테스트를 거쳐 나중에 git 저장소를 생성하는 경우가 흔하기 때문입니다. 또한 .git 폴더는 제외된 채로 내용이 복사되는 독립형 Docker 빌드 환경에서도 흔히 발생하는 현상입니다.
현재 작업 디렉터리가 프로젝트 루트라고 가정하는 것도 항상 유효하지는 않습니다(특히 모노레포 같은 환경에서는). 따라서 이는 작동 방식을 위해 우리가 타협한 부분입니다.
이를 해결하기 위해 다음과 같은 방법이 있습니다:
프로젝트용 git 저장소 생성(권장)
CSS에서 @source “…”을 사용하여 스캔할 파일을 명시적으로 나열
홈 디렉토리에 .gitignore가 *규칙이 있을때 tailwindcss가 파일을 스캔하지 않을수도 있다는 글…
어? 나 홈디렉토리 git으로 관리하고 있었는디…
당장 ~/.gitignore의 * 규칙을 제거했다.
멀끔하게 잘 되는 모습이다…
이거때문에 3시간을 날렸다.
tailwindcss의 class scanner는 현재 프로젝트 디렉토리의 .gitignore 파일을 넘어 거슬러 올라가 home(~) 디렉토리의 위치한 gitignore파일까지 영향을 받는 다는 이슈였다…
