TailwindCSS에서 사용자 정의 유틸리티 및 어셈블리 클래스 만들기

머리말.

안녕하세요, 제 블로그로 돌아온 것을 환영합니다.이전 기사here에서 우리는 TailwindCSS의 맞춤형 제작에 대해 토론했다.TailwindCSS의 장점 중 하나는 모든 것이 맞춤형이라는 것이다. TailwindCSS의 클래스를 어떻게 사용하는지에 대해 규칙이 없다. 본고에서 TailwindCSS에서 클래스를 어떻게 맞춤형으로 만드는지 토론할 것이다.Bootstrap (구성 요소 클래스 프레임워크) 와 달리 TailwindCSS는 유틸리티가 우선하는 프레임워크입니다.예를 들어 Bootstrap에서 카드 components 클래스가 기본적으로 스타일을 설정합니다. 이 클래스만 추가하면 카드 디자인을 만들 수 있지만, 모든 Bootstrap 사이트가 똑같아 보일지라도, 같은 구성 요소 클래스를 사용하기 때문입니다.본고에서 TailwindCSS에서 자신의 맞춤형 유틸리티 클래스와 구성 요소 클래스를 만드는 방법을 연구할 것입니다.

구성 요소 클래스와 유틸리티 클래스.

이 절에서 우리는 구성 요소 클래스와 실용 프로그램 클래스 간의 차이를 토론할 것이다.실용 프로그램으로서 우리는 먼저 무엇이 실용 프로그램인지 물어볼 것이다.좋아, 이것이 바로 우리가 이 절에서 배워야 할 내용이다.실용류TailwindCSS에서 우리는 가능한 한 많은 실용 프로그램 종류를 얻었기 때문에 우리는 그것들을 조합하여 전방 디자인에서 필요한 디자인을 실현할 수 있다.예.

<div class="p-4 text-orange-200 bg-indigo-200">  Hello there 
            </div>

출력:

위의 예는 우리가 토론하고 있는 실용 프로그램 종류의 한 예이다.우리의 전단 디자인에서 한 반은 하나의 풍격을 형성한다.
구성 요소 클래스의 좋은 예는 Bootstrap입니다. 이 예에서 사용하겠습니다.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

출력:

위에서 보듯이 이곳의 클래스는components클래스입니다. 이것은 하나의 클래스가 여러 스타일에 대응하는 것을 의미합니다. CSS클래스card를 검사하려면 7개 이상의 CSS 스타일이 있어야 이런 스타일을 형성할 수 있습니다.

TailwindCSS에서 어셈블리 클래스를 생성합니다.

많은 경우에 TailwindCSS에서 자신의 구성 요소 클래스를 만들어야 할 수도 있습니다. 가장 잘 아는 이유가 많기 때문입니다. 구성 요소 클래스가 one class, many styles 라는 것을 기억하십시오.다음은 TailwindCSS에서 사용자 정의 구성 요소를 만들어야 하는 몇 가지 이유입니다.

HTML 요소의 클래스가 너무 많습니다.

다른 HTML 요소에서 클래스가 중복되지 않도록 합니다.

코드를 깔끔하게 유지합니다.

간결한 코드를 얻기 위해 우리의 클래스와 스타일을 그룹으로 나눈다.

예를 들어, 다음은 TailwindCSS를 사용하여 만든 두 개의 버튼입니다.

<button class="px-4 py-4 text-indigo rounded m-10 bg-pink-300"> Press me </button>
<button class="px-4 py-4 text-indigo rounded m-10 bg-indigo-300"> Press me </button>

출력:

이 예에서 볼 수 있듯이 background-color를 제외하고는 모두 같은 실용 프로그램 클래스가 있기 때문에 우리는 이 단추를 처리하기 위해 구성 요소 클래스를 만들어서 자신의 조작이 반복되지 않도록 하는 것이 좋지 않겠는가?일부 기업 사이트에서 사이트의 버튼은 우리가 위의 예에서 본 색깔을 제외하고는 매우 비슷해 보인다.그래서 구성 요소 클래스를 만듭니다.이전 시간부터 이 시리즈에서 사용한 폴더가 여전히 있다고 가정하십시오. 만약 그렇지 않다면, 설치 안내서의 이 글here을 보십시오. 폴더 구조를 어떻게 설정하는지 알아보십시오.

이제 src/style.css 파일을 열고 다음 내용을 작성합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
          .btn{
       @apply px-4 py-4 text-indigo rounded m-10
}
}

이제 TailwindCSS에서 구성 요소의 스타일에 스타일을 포함하기를 원합니다. 왜 우리가 사용하는지 @layer components. 그리고 이 구성 요소를 포함하는 사용자 정의 클래스 이름 .btn 을 만들고 @apply 을 사용하여 구성 요소에 스타일을 적용합니다.그래서 현재 우리는 .btn를 우리의 클래스로 사용하고 배경색을 지정하면 이러한 스타일은 우리에게 제공될 것이다.그러니 뛰자.npm run build:css
스타일시트에서 이 구성 요소를 구축합니다.다음과 같은 이점을 누릴 수 있습니다.

<button class="btn bg-pink-300"> Press me </button>
<button class="btn bg-indigo-300"> Press me </button>

출력:

좋아해요?TailwindCSS를 사용하면 가능한 한 많은 구성 요소 클래스를 만들어서 미니 가이드를 만들 수 있습니다. 제가 좋아하는 이유 중 하나는 이 구성 요소들이 스타일시트를 만드는 데만 사용할 수 있다는 것입니다. 이것은 다음 항목에서 구성 요소 클래스를 사용하지 않기로 결정할 수 있다는 것을 의미합니다. 규칙이 없다는 것을 기억하십시오.만세!

TailwindCSS에서 고유한 유틸리티 클래스를 만듭니다.

Tailwind는 매우 전면적인 기존 유틸리티 클래스를 제공하지만, 자신만의 유틸리티 클래스를 추가해야 하는 상황에 직면할 수 있습니다.
확장 프레임워크를 결정하는 가장 좋은 방법은 당황스러울 수 있습니다. 따라서 다음은 가장 일반적인 방식으로 유틸리티를 추가하는 데 도움을 줄 수 있는 최선의 실천입니다.
열기src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .scroll-snap-none {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x;
  }
  .scroll-snap-y {
    scroll-snap-type: y;
  }
}

이 구성 요소의 예시와 같이, 우리는 이 클래스와 스타일을 유틸리티 스타일에 추가해서 @layer 유틸리티 단계에서 이 클래스를 사용할 수 있도록 해야 한다고 TailwindCSS에 말했다.
이제 다음을 수행할 수 있습니다.npm run build:css이제 우리는 우리가 습득한 지식을 가지고 사용자가 선택한 임의의 맞춤형 구성 요소와 실용 프로그램 종류를 계속 만들 수 있습니다.

결론

저희의 구성 요소와 유틸리티 클래스를 만드는 데 대한 글은 끝났습니다. TailwindCSS를 사용하면 제한 없이 사용할 수 있다는 것을 기억하십시오.다음 글은 TailwindCSS를 사용하여 프로젝트를 만들 것입니다. 따라서 제가 프로젝트를 발표할 때 알림을 받을 수 있도록 따라오세요.
Go, Javascript,TailwindCSS, 소스 오픈, 본문에 대해 궁금한 것이 있다면?너는 여기서 나를 찾을 수 있다.다음에 봐요.감사합니다.