tailwindCSS로 파일 업로드 버튼 스타일링

tailwindCSS로 파일 선택부분을 스타일링하고 싶었습니다. 그래서 tailwindCSS file upload Button 이라는 검색어로 

입력을 해보니 스택오버플로우에서 다음과 같이 나왔습니다.

How to style HTML file input using Tailwind CSS? - Stack Overflow

How to style HTML file input using Tailwind CSS?

다음과 같이 file이라는 클래스네임을 이용해서 디자인을 입히고 , 추가 효과를 입힌다는 것을 알게 되었습니다. 

그래서 저는 다음과 같이 적용하였습니다. 

 {!selectFile && (
          <input
            type="file"
            accept="image/*"
            onChange={onchangeSelectFile}
            className="border-2 border-slate-700 shadow-md rounded-md font-bold
            <!-- 파일업로드 버튼 배경색, 버튼 클릭시 효과(마우스 커서 변경 , 배경색 변경 -->
            file:bg-black file:text-white file:cursor-pointer file:hover:bg-slate-600
            "
          />
        )}

 

그리하여 나온 것이 이것입니다. 다음은 결과입니다.

 

[1]  클릭하기전

 

[2] 클릭한 후

 

 

tailwindCSS로 파일 업로드 버튼을 스타일링할 때는
file 클래스네임을 이용하는 구나....