tailwind와 Angular를 모두 사용하여 프로젝트 전체에서 버튼 스타일을 전역으로 만드는 방법

Question

저는 초보자이고 Angular 작업을 해왔고 모든 Tailwind 클래스가 인라인이고 버튼의 스타일 클래스가 거대해지고 버튼을 사용하려면 모든 곳에서 해당 클래스를 사용해야 하기 때문에 스타일링에 Tailwind를 사용하기로 결정했습니다. . 이로 인해 코드가 번거로워 보이고 유지 관리가 어려워집니다.

제 질문은 tailwind를 사용하여 버튼 스타일을 전역으로 만드는 방법입니다. button-no-bg 、 button-bg-red와 같은 여러 스타일의 버튼도 있습니다.

저는 @apply指令在Angular的styles.css

을 사용하여 정의해 보았습니다. 으아아아

코드 중복을 피하기 위해 여러 버튼 이름과 관련 클래스를 사용하여 버튼 클래스를 전역으로 만드는 방법을 알고 싶습니다. 완전한 답변이 아닌 경우 참고 자료를 공유해 주세요.

Answer 1

저는 앵글 테일윈드를 처음 접했고 이 방법이 "더 나은" 방법인지 확신할 수 없지만 또 다른 더 나은 응답을 기다리고 있습니다...

문서의 지침을 따르되 새 파일의 styles.css에서 @tailwinds를 제외하세요 styles-tailwinds.css

시간별 실행

으아아아

먼저 styles-tailwinds.css를 변경하면 src/output.css에 새 파일이 생성됩니다

angular.json을 편집하여 이 .css를 추가하면 배열 스타일이 다음과 같이 됩니다.

으아아아