이 문서에서는 Tailwind CSS에서 정적 유틸리티를 사용하는 방법을 설명합니다.
Tailwind에서 정적 유틸리티를 사용하는 방법은 무엇입니까?
Tailwind에서 정적 유틸리티를 사용하려면 ' 추가유틸리티() ” 기능을 'tailwind.config.js' 파일에 추가하고 원하는 정적 유틸리티를 구성합니다. 그런 다음 HTML 프로그램에서 정적 유틸리티를 사용하고 HTML 웹 페이지를 볼 때 정적 유틸리티가 제대로 작동하는지 확인하십시오.
다음 단계를 살펴보겠습니다.
1단계: 'tailwind.config.js' 파일에서 정적 유틸리티 구성
'를 엽니다. tailwind.config.js ' 파일을 열고 ' 플러그인 ' 부분. 그런 다음 ' 추가유틸리티() ” 기능을 사용하여 원하는 정적 유틸리티를 구성합니다. 예를 들어 다음과 같은 정적 유틸리티를 구성했습니다.
const 플러그인 = 요구('tailwindcss/플러그인')
모듈.내보내기 = {
내용: ['./index.html'],
플러그인: [
플러그인(기능({ addUtilities }) {
addUtilities({
'.콘텐츠 자동': {
'content-visibility': '자동',
},
'.콘텐츠 숨김': {
'content-visibility': '숨김',
},
'.bg-산호': {
배경: '산호'
},
'.skew-5deg': {
변환: 'skewY(-5deg)',
},
})
})
]
};
여기:
- “ 추가유틸리티() ” 함수는 유틸리티 클래스와 해당 스타일을 포함하는 개체를 제공하여 사용자 지정 정적 유틸리티를 등록합니다.
- “ .content-auto ” 유틸리티 클래스는 content-visibility 속성을 auto로 설정합니다.
- “ .콘텐츠 숨김 ” 유틸리티 클래스는 content-visibility 속성을 hidden으로 설정합니다.
- “ .bg-산호 ” 유틸리티 클래스는 산호색을 배경으로 설정합니다.
- “ .skew-5deg ” 유틸리티 클래스는 transform 속성을 skewY(-5deg)로 설정합니다.
2단계: HTML 프로그램에서 정적 유틸리티 사용
이제 HTML 프로그램에서 원하는 정적 유틸리티를 사용합니다.
< 사업부 수업 = 'h-스크린 bg-코랄' >
< 피 수업 = '콘텐츠 자동' >안녕하세요< / 피 >
< 피 수업 = '콘텐츠 숨김' >여기에 오신 것을 환영합니다< / 피 >
< 피 수업 = '왜곡-5deg' >텍스트 변환< / 피 >
< / 사업부 >
< / 몸 >
3단계: 출력 확인
마지막으로 HTML 프로그램을 실행하여 정적 유틸리티가 제대로 작동하는지 확인합니다.
위의 출력은 정적 유틸리티가 정의된 대로 제대로 작동하고 있음을 나타냅니다.
결론
Tailwind에서 정적 유틸리티를 사용하려면 ' 추가유틸리티() ” 기능을 'tailwind.config.js' 파일에 추가하고 원하는 정적 유틸리티를 구성합니다. 'addUtilities()' 함수 및 HTML 프로그램에서 직접 적용할 수 있는 유틸리티 클래스를 추가합니다. 이 문서에서는 Tailwind CSS에서 정적 유틸리티를 사용하는 방법을 설명했습니다.