Tailwind 사용 시 <progress> pseudo-element

1. 브라우저 기본 스타일 문제
   <progress> 태그는 브라우저가 기본으로 스타일을 지정해주는 요소
   이 기본 스타일은 Tailwind CSS로 쉽게 덮어쓸수 없다. 
   이유는 다음과 같다.
   채워진 부분은 실제 요소가 아니라 pseudo-element(가상 요소)인
   ::-webkit-progress-value  또는 ::-moz-progress-bar로 그려지기 때문이다.
   
   
2. Pseudo-element란?
   HTML 코드에 직접 보이지 않는, 브라우저가 내부적으로 만들어서 스타일을 적용하는 "가짜"
   일반적인 클래스만으로는 접근하기 어렵다. 
   
   
3. Tailwind의 Arbitrary Variants
   Tailwind CSS의 JIT 모드에서는 [] 안에 직접 CSS 선택자를 넣어줄 수 있다.
   아래 코드는 내 안의 ::-webkit-progress-value pseudo-element에 bg-primaryColor-900 클래스를 적용해
   라는 의미이다.
   
   
4. JIT 모드란? 
   Just-In-Time의 약자로, 나의 코드에서 실제로 사용되는 Tailwind CSS 클래스만 빌드 타임에 즉석으로 만들어주는 모드다.
   이전에는 모든 클래스를 미리 생성하고 사용하지 않는 건 나중에 제거하는 방식(purgeCSS)을 썼다면,
   JIT는 필요할 때마다 딱 만들어주니까 빌드 속도가 빨라지고 최종 CSS 파일도 훨씬 깔끔해질 수 있다고 한다.

[&::-webkit-progress-value]:bg-primaryColor-900

 

결과적으로
각 브라우저의 pseudo-element에 직접 원하는 배경색을 줄 수 있고,
<progress> 태그 자체에는 다른 스타일들이 적용되어도, 채워진 부분은 직접 지정한 primaryColor-900 색상으로 보이게 할 수 있다.

 

요약하자면,

1. 브라우저 기본 스타일을 덮어쓰기 위해 pseudo-element를 직접 타겟팅하고,

2. Tailwind CSS의 arbitrary variants 기능을 이용해서 해당 pseudo-element에 클래스를 적용

참고
Tailwind 공식 문서: https://tailwindcss.com/docs/hover-focus-and-other-states#arbitrary-variants