Tailwind에서 'overflow-auto' 및 'overflow-scroll'을 사용하는 방법은 무엇입니까?

예
이 예에서는 다음을 적용합니다. '오버플로 자동' 에 대한 유틸리티

• '오버플로 자동' 클래스는 스크롤바를 추가하는 데 사용됩니다. 컨테이너에 저장하고 스크롤이 필요할 때만 표시합니다.
• 'bg-퍼플-300' 클래스는 보라색을 컨테이너의 배경색으로 설정합니다.
• 'p-4' 클래스는 컨테이너의 모든 면에 4단위의 패딩을 설정합니다.
• 'mx-16' 클래스는 컨테이너의 x축에 16단위의 여백을 적용합니다.
• 'mt-5' 클래스는 컨테이너 상단에 5단위의 여백을 적용합니다.
• 'h-32' 클래스는 컨테이너의 높이를 32 단위로 설정합니다.
• '텍스트 정렬' 클래스는 컨테이너 내부 콘텐츠의 텍스트를 정당화합니다.

산출


---





---

위의 출력은 텍스트가 오버플로될 때 세로 스크롤 막대를 보여줍니다. 이는 '오버플로 자동' 유틸리티가 요소에 성공적으로 적용되었습니다.

Tailwind에서 'overflow-scroll'을 사용하는 방법은 무엇입니까?

이 유틸리티는 스크롤 막대를 컨테이너에 추가하고 스크롤이 필요하지 않은 경우에도 항상 표시합니다. 또한 모든 방향으로 스크롤할 수 있습니다. Tailwind에서 'overflow-scroll'을 사용하려면 HTML 프로그램을 만들고 '오버플로 스크롤' HTML 프로그램의 특정 요소에 대한 유틸리티 클래스.





통사론

< 요소 수업 = '오버플로 스크롤 ...' > ... 요소 >

예
이 예에서는 다음을 적용합니다. '오버플로 스크롤' 에 대한 유틸리티

컨테이너: < 몸 >

< 사업부 수업 = '오버플로 스크롤 bg-보라색-300 p-4 mx-16 mt-5 h-32 텍스트 정렬' >

Tailwind CSS는 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' 등과 같은 다양한 'overflow' 유틸리티를 제공합니다. 이러한 유틸리티는 특정 요소가 컨테이너를 초과하는 콘텐츠를 처리하는 방법을 결정합니다. 크기. 각 유틸리티는 고유한 기능을 제공하지만 최종 목표는 동일하게 유지됩니다. 즉, 선택한 요소의 오버플로 동작을 제어하는 ​​것입니다.

< / 사업부 >

< / 몸 >

여기서, '오버플로 스크롤' 클래스는 스크롤바를 추가하는 데 사용됩니다.

컨테이너 및 항상 보여줍니다.

산출



위의 출력에서 ​​세로 및 가로 스크롤바를 모두 볼 수 있습니다. 이는 '오버플로 스크롤' 유틸리티가 요소에 성공적으로 적용되었습니다.

결론

Tailwind에서 'overflow-auto' 및 'overflow-scroll'을 사용하려면 다음을 추가해야 합니다. '오버플로 자동' 그리고 '오버플로 스크롤' 유틸리티 클래스를 HTML 프로그램의 원하는 요소에 추가합니다. 두 유틸리티 클래스 모두 지정된 요소에 스크롤 막대를 추가합니다. 그러나 'overflow-auto' 클래스는 스크롤이 필요할 때만 스크롤바를 보여주고 'overflow-scroll' 클래스는 스크롤이 필요하지 않아도 항상 스크롤바를 보여줍니다. 이 글에서는 Tailwind에서 'overflow-auto' 및 'overflow-scroll'을 사용하는 방법을 설명했습니다.