TailwindCSS로 사용자 지정 유틸리티 추가

간혹 Tailwind에 포함되지 않은 CSS가 필요한 경우가 있습니다. CSS 필터는 간단한 예입니다. 구성 요소 이름을 지정하고 부분을 추가하고 가져오는 대신 이러한 기능이 필요한 다른 구성 요소로 구성할 수 있는 원자 유틸리티를 구축하도록 선택할 수 있습니다.

이것은 Tailwind@variants 지시문의 정확한 사용 사례입니다.
filter: grayscale(100%)를 사용하여 갤러리 섬네일의 채도를 낮추고 색상이 있는 버전을 가리키면 표시한다고 가정합니다. .gallery__thumbnail { … }와 같이 매우 구체적인 것에 대해서만 스타일을 작성하는 대신 utilities/filters.[s]css라는 파일을 추가하는 것이 좋습니다.

@variants hover, focus, responsive {
    .grayscale {
        filter: grayscale(100%);
    }

    .filter-reset {
        filter: none;
    }
}

이렇게 하면 지정한 모든 변형과 함께 해당 유틸리티가 생성됩니다. 따라서 요소에 그레이스케일 필터를 원하지만 md 중단점에서만 시작하고 색상을 다시 초점과 호버로 가져오고 싶다고 가정해 보겠습니다. 아, 그리고 약간의 전환도 좋을 것입니다. 다음과 같이 쉽게 작성할 수 있습니다.

<img class="md:grayscale md:hover:filter-reset md:focus:filter-reset transition-all duration-200 ease-in" />

연결

Documentation of @variants directive

Documentation of all available TailwindCSS variants