구성 요소에서 Tailwind를 사용하는 방법

에 대해 썼습니다. 이것은 구성 요소에서 Tailwind를 사용하는 방법에 관한 것입니다.

짧은 버전은 구성 요소에서 직접 tailwind 클래스를 사용한다는 것입니다.

const Button = (props) => 
  <button {...props} className="px-4 py-2 bg-gray-700 text-white" />

그러나 우리는 또한 우리의 구성 요소가 조금 더 많은 일을 하기를 원합니다. 우리는 더 쉽게 개발하고 UI를 더 일관성 있게 만들기 위해 고정된 색상, 크기 등으로 작업하기를 원합니다. 그렇게 하면 개발자는 다음과 같은 코드를 작성할 수 있습니다.

<Button color="red" size="lg">Save Form</Button>

항상 수업을 반복하는 대신:

<Button className="bg-red text-white px-4 py-2"/>

이를 수행하는 방법은 다음과 같습니다.

const DEFAULT = "border border-solid border-transparent";

const COLORS = {
  green: "text-white bg-green-400 hover:bg-green-500",
  red: "text-white bg-red-400 hover:bg-red-500"
};

const Button = ({ color, children, className, ...props }) => {
  className = [className, DEFAULT, COLORS[color]].join(" ");

  return (
    <button {...props} className={className}>
      {children}
    </button>
  );
};

이것은 다른 색상만 처리하는 실제 구성 요소의 단순화된 예입니다. 모든 버튼에 있는 기본 클래스 세트( DEFAULT )가 있고 다른 색상을 나타내는 객체가 있습니다( COLORS ). 누군가 red를 color 소품으로 전달하면 해당 키와 일치하는 클래스를 사용합니다. COLORS["red"] . 필요한 경우 추가 클래스를 추가하기 위해 구성 요소에 전달할 수도 있는 className 소품과 이 모든 것을 병합합니다.

// A red button with margin at the bottom
<Button color="red" className="mb-2"/>

우리는 구성 요소의 크기, 변형 및 다양한 상태에 대해 동일한 패턴을 따릅니다.

React 구성 요소에서 Tailwind를 어떻게 사용하고 있습니까?

추신 우리는 ConvertKit에서 몇 명의 풀 스택 엔지니어를 고용하고 있습니다. 여기에서 자세히 알아보기convertk.it/engineer