tailwindcss의 이동 값으로 중단점 값을 덮어씁니다.

Question

아직 어디서도 발견하지 못한 문제가 있습니다.

모바일에서 패딩이나 여백을 사용하고 더 큰 화면에서 해당 패딩/여백을 변경하려는 경우 모바일에 설정한 기본 값은 동일하게 유지되며 재정의는 해당 지점의 특정 값을 깨지 않습니다.

디버거에서 볼 수 있는 내용은 다음과 같습니다. py-3 값을 볼 수 있듯이 이는 md 중단점에 적용되는 py-0을 유지하고 재정의합니다.

---

모바일 버전입니다

---

이것은 데스크탑 버전입니다

---

이것은 내 코드입니다. py-3 和 md:py-0 버튼에 적용됩니다:

으아아아

저는 확장/테마 교체 없이 클래식 next.js 설치를 위해 taildwindcss를 사용합니다. 내 CSS 파일에는 이러한 클래스를 재정의할 수 있는 위치가 없습니다.

제가 놓친 게 있나요?

편집: 내 py-0 前面： md:!py-0에 "!"를 적용해 보았지만 여전히 동일합니다. !important 키워드가 올바르게 추가되더라도 여전히 재정의됩니다.

Answer 1

!important 할당은 다음을 재정의합니다(따라서 일반적인 상황에서는 취재)@media { }

.py-3 { } 正确显示，无需需要 !important가 없이 올바르게 표시되도록 .py-3 { }를 가져옵니다.