이 게시물은 Tailwind CSS에서 '기본 스타일'을 추가할 수 있는 모든 측면을 보여줍니다.
Tailwind에서 '기본' 스타일을 추가하는 방법은 무엇입니까?
'Tailwind CSS'는 전체 HTML 콘텐츠 또는 특정 요소에 '기본' 스타일을 추가하는 다음 세 가지 방법과 함께 제공됩니다.
하나씩 살펴보겠습니다.
전제 조건
실제 구현으로 이동하기 전에 먼저 '기본 스타일'을 추가하는 데 사용되는 'Linuxhint'라는 새로 생성된 프로젝트를 살펴보십시오.
프로젝트 파일 구조
이제 'index.html' 파일로 이동하여 HTML 코드를 살펴보십시오.
< HTML >< 머리 >
< 링크 헥사 = '/dist/output.css' 친척 = '스타일시트' >
< / 머리 >
< 몸 >
< h2 수업 = '밑줄 텍스트-가운데 글꼴-굵은 텍스트-분홍색-600' > Linuxhint에 오신 것을 환영합니다! < / h2 >< br >
< h3 수업 = '텍스트 중앙 글꼴-굵은 텍스트–주황색-600' > 가이드: Tailwind에서 기본 스타일 추가 < / h3 >< br >
< / 몸 >
위의 코드 라인에서:
산출
위 코드의 출력은 다음과 같습니다.
이제 논의된 방법을 사용하여 기본 스타일을 추가하여 위의 HTML 코드를 사용자 지정합니다. Tailwind 'CSS' 방법부터 시작하겠습니다.
방법 1: CSS를 사용하여 Tailwind에서 '기본 스타일' 추가
특정 HTML 요소에 기본 스타일을 추가하는 가장 간단하고 쉬운 방법은 프로젝트의 기본 CSS 파일에 추가하는 것입니다. 주어진 단계에 따라 이 작업을 실제로 수행해 봅시다.
1단계: CSS 파일 열기
먼저 기본 CSS 파일을 엽니다. 스타일.css 내장된 tailwind 'base', 'components' 및 'utilities' 레이어를 포함하는 '
2단계: CSS 추가
다음으로 '
' 및 '' HTML 요소에 '기본' 스타일을 추가합니다. @적용하다 '의 도움으로 '기본' 레이어의 지시문 @층 ” 키워드. '@layer' 키워드는 지정된 '기본' 레이어에 정의된 클래스를 추가합니다. @레이어 베이스 {
h2 {
@apply text-3xl;
}
h3 {
@apply 텍스트-xl;
}
}
h2 {
@apply text-3xl;
}
h3 {
@apply 텍스트-xl;
}
}
위의 코드 라인에서 ' 글꼴 크기 ” 클래스는 '
' 및 '' 요소에 적용되어 각각 지정된 크기까지 확대됩니다.
파일을 저장(Ctrl + S)합니다.
3단계: 출력
이제 라이브 서버에서 코드를 실행하고 다음과 같이 출력을 확인합니다.
여기서 출력은 Tailwind 'Font Size' 클래스가 기본 레이어의 지정된 요소에 성공적으로 적용되었음을 보여줍니다.
메모 : 다른 모든 Tailwind CSS 클래스에 동일한 접근 방식이 사용됩니다.
방법 2: 플러그인을 사용하여 Tailwind에서 '기본 스타일' 추가
'기본' 스타일을 추가하는 또 다른 유용한 방법은 ' 플러그인 '를 사용하고 ' 추가베이스() ' 기능. 이 기능은 “ 베이스 ” 레이어 지시어. 이 함수는 Tailwind 'tailwind.config.js' 파일에서 사용됩니다. 실질적으로 해봅시다.
1단계: 'addBase()' 함수 정의
먼저 ' tailwind.config.js ” 구성 파일을 만들고 플러그인에서 기본 스타일을 추가하고 “addBase()” 함수를 호출합니다.
파일을 저장합니다.
2단계: 출력
마지막으로 주어진 HTML 코드를 실행하고 출력을 확인합니다.
보시다시피 'addBase()' 함수에 JavaScript 객체로 정의된 Tailwind 'Font Size' 클래스가 지정된 HTML 요소에 적용됩니다.
결론
Tailwind 기본 스타일은 ' CSS ' 기본 CSS 파일의 클래스와 ' 플러그인 ' 와 더불어 ' 추가베이스() ” 구성 파일의 기능. 'CSS' 방식은 '기본' 레이어에서만 기본 스타일을 정의하고 지정된 요소에 자동으로 구현하기 때문에 가장 간단한 방식으로 간주됩니다. 반면에 '플러그인' 섹션은 tailwind.config.js ” 파일에는 기본 스타일을 JavaScript 개체로 정의하는 “addBase()” 함수가 필요합니다. 이 게시물은 Tailwind CSS에서 기본 스타일을 추가할 수 있는 모든 측면을 설명했습니다.