Tailwind: 맞춤 CSS를 @comComponents 지시문과 결합

안녕하세요 개발자 여러분,
공유하고 싶은 문제와 이를 해결한 방법을 발견했습니다. 이 기사는 나와 같은 문제를 겪은 다른 개발자에게 도움이 될 것입니다.

도전

내 과제는 아래와 같이 맞춤 CSS를 적용하면서 tailwind 구성 요소 지시문을 사용하여 재사용 가능한 구성 요소를 만드는 것이었습니다. 처음에는 불가능하고 어려운 일인 것 같습니다.

내 맞춤 CSS

.text-shadow: {
  text-shadow: none
}

.tap-highlight: {
  --webkit-tap-highlight-color: transparent
}

tailwind 구성요소 지시어

@layer components {
  @apply text-shadow tap-highlight bg-red-900 rounded-full text-base
}

해결책

인터넷에서 해결책을 검색한 후에도 제대로 작동하지 않았습니다. 그래서 tailwind 플러그인의 addUtilities
함수를 통해 유틸리티 클래스를 추가하자는 생각이 들었습니다.

const plugin = require("tailwindcss/plugin");
---- other code goes here
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-shadow": {
          textShadow: "none",
        },
        ".tap-highlight": {
          WebkitTapHighlightColor: "transparent",
        },
      });
    }),
  ],

내가 한 일은 tailwindcss/plugin을 가져오고 위와 같이 유틸리티 클래스를 추가하는 것이었습니다. 짜잔 효과가 있어요

---

읽어주셔서 감사합니다! 궁금한 점이 있으면 댓글로 알려주세요.

위 내용은 Tailwind: 맞춤 CSS를 @comComponents 지시문과 결합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!