내가 TailwindCSS를 좋아하고 당신도 좋아해야 하는 이유!

테일윈드란?

Tailwind가 정확히 무엇인지부터 살펴보겠습니다.

Tailwind는 순전히 CSS입니다. 일련의 클래스 이름을 사용하여 프런트 엔드 웹 애플리케이션의 스타일을 지정하기 위한 라이브러리입니다. 이러한 클래스 이름은 바로 가기 역할을 하며 단일 클래스 이름의 스타일을 지정하기 위해 전체 CSS 블록을 작성하는 시간을 절약할 수 있습니다.

다음은 크기, 배경색, 패딩, 플렉스 및 간격에 대해 스타일이 지정되는 DIV의 빠른 샘플입니다.
<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">

어디에 유용합니까?

Tailwind는 정적 웹 사이트, 모바일 친화적인 웹 사이트, 구성 요소 기반 라이브러리 및 프레임워크에 유용합니다.

구성 요소 스타일링

저는 React에서 구성 요소의 스타일을 지정할 때 순풍을 좋아합니다. 구성 요소에 스타일을 설정하고 해당 구성 요소에 대한 참조를 호출할 때마다 매번 완벽하게 스타일이 지정된 구성 요소를 얻습니다. 아래 예에서 여러 번 호출되는 프로젝트 항목의 스타일을 지정하는 위치를 확인할 수 있습니다.

그렇다면 hover:scale-150 flex flex-col items-center text-center는 정확히 무엇을 의미합니까?

hover:scale-150 섹션은 가리키면 항목 크기가 150% 증가하도록 CSS에 추가되는 클래스입니다.

flex 클래스는 CSS flexbox 디자인을 사용하도록 이 div를 설정합니다

.

flex-col 클래스는 flexbox를 기본 행 패턴에서 열 패턴으로 변경하여 항목을 서로 잘 쌓도록 합니다

.

items-center 클래스는 모든 항목을 div

의 중앙에 정렬하고 정렬하도록 설정합니다.

text-center는 텍스트를 가운데 정렬로 설정합니다

.

이 구성 요소를 호출할 때마다 내 앱에서 이 구성 요소의 새 인스턴스에 동일한 스타일이 적용됩니다. 그리고 나중에 이 스타일을 변경하기로 선택하면 개별 구성 요소에서만 변경하면 내 사이트의 모든 인스턴스화된 구성 요소에 즉시 적용됩니다.

내가 테일윈드를 좋아하는 이유

구성 요소 클래스 그룹화

구성 요소에 엄청나게 긴 클래스 이름을 넣지 않도록 Tailwind에서 구성 요소 클래스를 그룹화할 수 있습니다. 기본 tailwind 가져오기를 넣는 기본 CSS 파일에서 @apply를 사용하여 PostCSS를 통해 이 작업을 수행합니다.

이 버튼의 스타일을 지정하는 두 가지 방법을 살펴보겠습니다.

기본 Tailwind 버튼 스타일링:

<div>
   <button class="px-3 py-3 bg-blue-200 shadow-lg transition ease-in-out duration-300 rounded-lg whitespace-nowrap font-semibold;">I'm a button</button>
</div>

그룹화된 구성 요소 클래스

@tailwind base;
@tailwind components;
@tailwind utilities;
.bluebtn {
  @apply px-3 py-3 bg-blue-200 shadow-lg transition ease-in-out duration-300 rounded-lg whitespace-nowrap font-semibold;
}

그런 다음 HTML을 더 깨끗하고 읽기 쉽게 유지하는 다음과 같은 표준 클래스를 사용하여 HTML에서 버튼을 호출할 수 있습니다.

<div>
     <button class="bluebtn">I'm a button</button>
</div>

이를 통해 여러 버튼을 생성할 수 있으며 다른 모든 TailwindCSS 클래스를 추가하려면 "bluebtn"클래스를 할당하기만 하면 됩니다.

코드샌드박스 놀이터

여기에서 Tailwind 바로 플레이할 수 있습니다. 버튼을 녹색으로 변경하고 반올림을 제거해 보십시오.

CodeSandbox

결론

Tailwind 덕분에 프론트 엔드 생활이 훨씬 쉬워졌습니다. 저는 구성 요소 기반 라이브러리 및 프레임워크에서 많은 일을 합니다. TailwindCSS를 사용하면 간단한 구성 요소에 대한 스타일을 작성하고 이를 1회 또는 1,000회 렌더링하고 매우 사용하기 쉬운 CSS 라이브러리에서 동일한 스타일을 얻을 수 있습니다. 절대적으로 필요한 경우가 아니면 더 이상 전통적인 CSS를 작성하지 않습니다. 또한 TailwindCSS 때문에 SASS 및 CSS-In-JS 사용을 중단했습니다.

아직 시도하지 않으셨다면 위의 링크를 사용하여 5분 이상 시간을 내어 가지고 놀고 몇 가지 스타일을 추가해 보시기를 권장합니다.