tailwindCSS 배경이미지(background-image) 없애기

tailwindCSS에서 배경이미지 사용하기

https://tailwindcss.com/docs/background-image#background-images

Background Image - Tailwind CSS

div 태그에서 내가 원하는 이미지로 배경을 만들기 위해서는 tailwindCSS 문서를 읽고 진행하면 된다~

 

 

group-hover로 배경이미지 없애기

다른 element와 배경을 group으로 묶은 뒤 hover 효과로 배경이미지를 없애고 다른 요소가 나타나게 하고 싶은데, 이 배경이미지가 안 없어진다. CSS를 뜯어보니, 배경이미지가 !important로 박혀 있어서 없앨 수가 없다.

 

 

배경이미지가 없어질 수 있는 커스텀 명령어 만들기

index.css에서 배경이미지를 없애는 tailwindCSS 커스텀 명령어를 만든 다음에, group-hover에서 해당 명령어를 받아올 수 있도록 따로 설정한다.

 

\\index.css

/* Input: */
@variants group-hover, hover, focus {
	.bg-none-important {
		background-image: none !important;
	}
}

/* Output: */
.bg-none-important {
	background-image: none !important;
}
.group:hover .group-hover\:bg-none-important {
	background-image: none !important;
}
.hover\:bg-none-important:hover {
	background-image: none !important;
}
.focus\:bg-none-important:focus {
	background-image: none !important;
}

 

사용하기

평소 tailwindCSS를 사용하듯이 사용하면 된다

<div className="group-hover:bg-pz-gray group-hover:bg-none-important"> </div>