Tailwind CSS는 ' 분명한 ” 부동 요소 옆에 있을 때 특정 요소의 동작을 제어하는 유틸리티. 예를 들어 'clear-left' 및 'clear-right' 유틸리티 클래스를 사용하면 개발자가 지정된 요소를 컨테이너의 왼쪽 부동 또는 오른쪽 부동 요소 아래로 이동할 수 있습니다. 그러나 때때로 사용자는 특정 요소에 적용된 지우기를 비활성화하고 부동 요소 옆에 표시되도록 허용하려고 합니다. 이러한 상황에서 'clear-none' 유틸리티를 사용하여 요소의 기본값을 정의할 수 있습니다.
이 문서에서는 Tailwind CSS에서 적용된 모든 지우기를 비활성화하는 절차를 예시합니다.
Tailwind에서 적용된 모든 클리어를 비활성화하는 방법은 무엇입니까?
Tailwind에서 적용된 모든 지우기를 비활성화하려면 HTML 파일을 만들고 ' 명확한 없음 ” HTML 프로그램에서 원하는 요소가 있는 유틸리티 클래스. 이 유틸리티는 특정 요소에 적용된 모든 '지우기'를 재설정하고 기본값을 정의합니다.
통사론
< 요소 수업 = '클리어-없음' > ... 요소 >
예
이 예에서는 ' 명확한 없음 ” 유틸리티 ” 요소는 적용된 지우기를 재설정하고 왼쪽과 오른쪽에 떠 있게 합니다.
< 몸 >
< 사업부 수업 = 'h-96 mx-10 p-8 bg-sky-500' >
< 이미지 소스 = 'tailwindcss_img.png' 수업 = '플로트 왼쪽 p-3 w-28 h-24' 모든 것 = '영상' />
< 이미지 소스 = 'tailwindcss_img.png' 수업 = '플로트 오른쪽 p-3' 모든 것 = '영상' />
< 피 수업 = '클리어-없음' > Tailwind CSS 제공 '분명한' 요소 주위의 내용 래핑을 제어하는 유틸리티.
이 예는 요소에 적용된 모든 지우기를 비활성화하는 방법을 보여줍니다. 특정 요소에 적용된 클리어를 재설정하려면 '클리어-없음' 유틸리티가 사용됩니다. 피 >
사업부 >
몸 >
여기:
- “ 왼쪽으로 뜨다 ” 클래스는 컨테이너의 왼쪽에
요소를 띄웁니다.
- “ 부동 오른쪽 ” 클래스는 컨테이너의 오른쪽에
요소를 띄웁니다.
- “ 명확한 없음 ” 클래스는
요소에 적용된 모든 지우기를 비활성화하고 요소가 양쪽에 떠 있게 합니다.
산출
위의 웹 페이지에서 내용물이 컨테이너 양쪽에 떠 있는 것을 볼 수 있습니다. 적용된 모든 지우기가 지정된 요소에서 비활성화되었음을 나타냅니다.
결론
Tailwind에서 적용된 모든 클리어를 비활성화하려면 ' 명확한 없음 ” HTML 프로그램에서 원하는 요소가 있는 유틸리티 클래스. 이 유틸리티는 특정 요소에 적용된 지우기를 재설정하고 기본값을 지정합니다. 확인을 위해 웹 페이지로 이동하여 변경 사항을 봅니다. 이 문서에서는 Tailwind CSS에서 적용된 모든 지우기를 비활성화하는 예를 보여주었습니다.