React로 TailwindCSS 정리하기

TailwindCSS의 유틸리티 클래스는 매력적이고 사용자 친화적인 웹사이트를 빠르게 만드는 데 도움이 됩니다. React는 재사용 가능한 UI 구성 요소를 만드는 데 도움이 됩니다. Tailwind + React, 재미있을 것입니다.

그러나 Tailwind로 재사용 가능한 React 구성 요소를 어떻게 깔끔하게 만들 수 있습니까? 모르겠어요. 나는 다음과 같은 것을 시도하고 있습니다. 보여드리겠습니다(TLDR은 끝에 있습니다).

디스플레이 카드

이것은 간단한 예입니다. 우리는 <div> 를 만들고 있지만 그것을 React 컴포넌트로 포장하고 이름을 DisplayCard 로 지정합니다.

import React from 'react'

function DisplayCard({ className, children }) {
  return (
    <div className={className}>
      {children}
    </div>
  )
}

Tailwind로 스타일을 지정하고 다음과 같이 사용합니다.

<DisplayCard className='flex flex-col items-center justify-center bg-blue-300 border border-gray-300 rounded-lg w-8 h-12 p-4'>
  <h3>Heads up!</h3>
  <p>Some things you need to know.</p>
</DisplayCard>

사용자 정의 유틸리티 클래스

HTML로

Tailwind의 사용자 정의 유틸리티 클래스 덕분에 HTMLDisplayCard을 래핑하기 위해 div React 구성 요소를 만드는 것은 불필요한 추상화일 수 있습니다. Tailwind를 사용하면 사용자 정의 유틸리티 클래스를 간단히 추가할 수 있습니다.

/* tailwind.css */
.display-card {
  @apply flex flex-col items-center justify-center bg-blue-300 border border-gray-300 rounded-lg w-8 h-12 p-4
}

그리고 DisplayCard 구성 요소 대신 사용자 정의 유틸리티 클래스를 사용하여 일반 ol'<div>을 렌더링할 수 있습니다.

<div class="display-card">
  <h3>My Sunken Ship</h3>
  <p>We're lost, you need to know.</p>
</div>

리액트와 함께

평범한 ol'<div>이 대부분의 시간 동안 작동합니다. 그러나 React를 사용하면 앱 전체에서 재사용할 몇 가지 사용자 지정 구성 요소를 만들고 싶은 경우가 많습니다.

예를 들어 코드에 재사용 가능한DisplayCard 구성 요소가 필요할 수 있습니다. 이제 사용자 정의 유틸리티 클래스와 일관되게 스타일이 지정됩니다.

<DisplayCard className='display-card'>
  <h3>Forlorn Status</h3>
  <p>Searching, looking for an answer.</p>
</DisplayCard>

이것은 무의미하다?

Tailwind를 이미 알고 있다면 여기까지는 무의미하지만 Tailwind + React를 깔끔하게 하라는 것은 아닙니다.

일부 기본 스타일과 함께 DisplayCard를 사용하고 구성 요소가 사용되는 컨텍스트를 기반으로 더 많은 스타일을 추가하려면 어떻게 해야 합니까?

쉽게, 아마도? 다음과 같이 할 수 있습니다.

const defaultClass = 'display-card'

// need to add a margin to the top
<DisplayCard className={`${defaultClass} mt-8`}>
  <h3>My Display Card</h3>
  <p>Some things you need to know.</p>
</DisplayCard>

// this is used in a different part of the site, with padding & not margin
<DisplayCard className={`${defaultClass} p-32`}>
  <h4>Uh,</h4>
  <p>idk, hang the display card somewhere near the bottom of the page. just tell them they need to <a href="/black-hole">click here</a>.</p>
</DisplayCard>

좀 투박하지만...

유틸리티 클래스 캡슐화

일반DisplayCard 구성 요소에는 몇 가지 기본 스타일이 필요하지만 때로는 추가 스타일이 필요할 수도 있습니다.

따라서 먼저 Tailwind 사용자 지정 유틸리티 클래스display-card를 DisplayCard 구성 요소 내에 캡슐화해야 합니다.

function DisplayCard({ children }) {
  const defaultClass = 'display-card'

  return (
    <div className={defaultClass}>
      {children}
    </div>
  )
}

다음으로, 컴포넌트에 추가 클래스를 어떻게든 추가해야 합니다. 기본 클래스를 어떻게 설정하고 일부 추가 클래스의 가능성을 허용해야 합니까? 아마도 다음과 같습니다.

function DisplayCard({ className, children }) {
  const defaultClassName = className ? `${className} display-card` : 'display-card'

  return (
    <div className={defaultClassName}>
      {children}
    </div>
  )
}

드디어

그것은 다소 지저분해질 수 있습니다. 그래서 도우미 함수를 만들 수 있을까요? 해보자:

function makeClasses(defaultClassName, additionalClasses){
    if (defaultClassName === undefined) {
        throw Error('makeClasses function must have a string argument with default classes.')
    } else {
        return additionalClasses ? `${additionalClasses} ${defaultClassName}` : defaultClassName
    }
  }

function DisplayCard({ className, children }) {
  const defaultClassName = makeClasses('display-card', className)

  return (
    <div className={defaultClassName}>
      {children}
    </div>
  )
}

이제 기본 스타일로 캡슐화된 사용자 지정DisplayCard 클래스와 함께 display-card 구성 요소를 사용할 수 있습니다.

<DisplayCard>
  <h3>My Display Card<h3>
  <p>Some things you need to know.</p>
</DisplayCard>

그런 다음 기본DisplayCard 스타일을 유지하면서 다른 컨텍스트에서 display-card를 쉽게 재사용할 수 있습니다.

<DisplayCard className='m-8'>
  <h3>My Display Card<h3>
  <p>Some things you need to know.</p>
</DisplayCard>

마지막으로 리팩토링을 하면(권장되지 않을 수도 있습니다.):

// go crazy with it, don't even assign a variable
// just pass the makeClasses function directly to the div?

function DisplayCard({ className, children }) {
  return (
    <div className={makeClasses('display-card', className)}>
      {children}
    </div>
  )
}

피드백

그것이 최선의 방법인지는 모르겠습니다... 그냥 제가 가지고 놀아온 것입니다. 이것이 React 또는 Tailwind 또는 일반적인 프로그래밍의 규칙을 위반하거나 작동하지 않는 잘못된 구문이나 코드가 있는 경우 또는 작성이 이해가 되지 않고 명확성이 필요한 경우 의견에 알려주십시오. .