Tailwind در مقابل styled-components در React.js

در توییتر، من دائماً افرادی را می بینم که از Tailwind استفاده می کنند و چگونه عاشق آن شدند. من از جریان کار فعلی خود (اجزای سبک) تا حد زیادی راضی بودم، با این حال، در نهایت تصمیم گرفتم آن را امتحان کنم و ببینم آیا این ابزار برای من مناسب است یا خیر. این مقاله حکم خودم پس از چند روز استفاده از Tailwind است.

من عمدتا از React.js و styled-components استفاده می کنم. بنابراین این مقاله در مورد مقایسه بین styled-components و Tailwind در زمینه توسعه React.js است.

به طور خلاصه، من تصمیم گرفتم به کامپوننت های استایلد بچسبم و از Tailwind استفاده نکنم. به طور کلی، من ویژگی های کوتاه شده CSS Tailwind را دوست داشتم. نوشتن آن بسیار سریعتر از CSS اصلی است. با این حال، این واقعیت را دوست نداشتم که شما باید همه آن کلاس ها را در ویژگی class بنویسید. می‌تواند خواندن JSX را سخت کند و برای انجام کاری مانند استایل پویا کمتر انعطاف‌پذیر باشد.

1. خوانایی

چیزی که من ابتدا متوجه شدم این است که خواندن JSX هنگام استفاده از Tailwind دشوار است. با استراتژی CSS معمولی، نام کلاس های معنی دار مانند class=”todos-wrapper” را می دهید. این فقط با یک نگاه به ساختار کمک می کند. با styled-components، این حتی بهتر است زیرا شما به هر برچسب مانند نام منحصر به فردی می دهید. این کار تعمیر و نگهداری را آسان تر می کند، به خصوص زمانی که با کدهای قدیمی کار می کنید.

// with Tailwind

export const MainPage = () => {
  <div className="bg-white rounded px-5 pt-1 pb-7">
  // todo elements
  </div>
}

// with styled-components

export const MainPage = () => {
  return <TodosWrapper>
  // todo elements
  </TodosWrapper>;
}

const TodosWrapper = styled.div`
  background-color: white;
  border-radius: 0.3rem;
  padding: 8px 12px 12px 18px;
`;

2. یک ظاهر طراحی پویا

یک ظاهر طراحی پویا چیز دیگری است که من رویکرد مولفه های سبک را ترجیح می دهم. فرض کنید می خواهید یک فرم ورودی را به صورت پویا بر اساس معتبر بودن یا نبودن مقدار ورودی استایل دهید. در این صورت شما 3 شرط مانند «خالی»، «نامعتبر» و «معتبر» را می خواهید. با Tailwind، باید با تغییر مستقیم ویژگی کلاس، این شرایط را مدیریت کنید. این بدان معناست که شما باید دستور if را در رشته ویژگی class بنویسید، که نوشتن آن کمی دشوار است. در حالی که می‌توانید با نوشتن یک تابع بیرونی برای مدیریت دستور if آن را تمیزتر کنید، من شخصاً رویکرد styled-components را ترجیح می‌دهم زیرا تمام منطق استایل در یک مکان اتفاق می‌افتد و جداسازی واضح‌تری بین ساختار و استایل ایجاد می‌کند.

// with Tailwind

const MainPage = (props) => {
  const getFormState = {
    // some logic to return form state
  }

  const getBorderColor = (formState: string) => {
    if (formState === 'empty') return "border-gray-300";
    if (formState === 'invalid') return "border-red-400";
    return "border-green-400";
  };

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={handleChangeEmail}
        className={`${getBorderColor(
          getFormState()
        )} border border-gray-300 px-3 py-2 rounded w-full`}
      />
    </div>
  );
};

// with styled-components

const MainPage = () => {
    const getFormState = {
      // some logic to return form state
    }

    return (
      <div>
        <EmailForm
          type="email"
          value={email}
          onChange={onChangeEmail}
          placeholder="example@mail.com"
          formState={getFormState()}
        />
      </div>
    );
};

const EmailForm = styled.input`
  padding: 0.7rem 1rem
  ${(props) => {
    switch (props.formState) {
      case 'invalid':
        return 'border-color: red';
      case 'valid':
        return 'border-color: green';
      default:
        return 'border-color: gray';
    }
  }}
`;

3. پشتیبانی از حالت تاریک

افزودن تم هایی مانند حالت تاریک با Tailwind واقعاً آسان نیست. مطمئنا، Tailwind دارای ویژگی Dark Mode است اما افزودن ویژگی “dark:border-white” به هر عنصر واقعا کارآمد نیست.

ساده تر است که یک متغیر اختصاصی مانند “borderColor” تعریف کنید و سپس مقدار آن متغیر را بر اساس موضوعی که در آن قرار دارید تغییر دهید. این کار به خصوص زمانی بهتر است که بخواهید بعداً تم های بیشتری اضافه کنید. تنها کاری که باید انجام دهید این است که ارزش جدیدی به “borderColor” بدهید و اصلاً نیازی به لمس JSX یا CSS ندارید (لطفاً به ThemeProvider of styled-components مراجعه کنید).
https://styled-components.com/docs/advanced

// With styled-components

const MainPage = () => {
  return <EmailForm />;
}

export const EmailForm = styled.input`
  // With ThemeProvider, you can access to theme variable from any styled components without prop drilling.
  border: 1px solid ${(props) => props.theme.borderColor};
`;

موافقم که زمان توسعه عموماً با Tailwind سریعتر است. با این حال، بیشتر به این دلیل است که Tailwind دارای کلاس های کاربردی از پیش تعریف شده است و شما مجبور نیستید CSS ساده بنویسید. این بخش بزرگ Tailwind است و من واقعاً از این تجربه خوشم آمد. با این حال، styled-components در این مورد عقب نیست. بله، شما باید یک CSS ساده بنویسید، اما همچنان می‌توانید با ایجاد سبک‌های کاربردی خود، زمان توسعه را کاهش دهید. درست مانند Tailwind، می توانید اجزای سبک معمولی مانند Container، TextLarge، ShadowLight و غیره را بسازید و هر زمان که بخواهید آن را فراخوانی کنید. البته، شما به زمان توسعه اولیه نیاز دارید، اما من مطمئن هستم که پس از تهیه 10 تا 20 ست سبک پرکاربرد، نتیجه خواهد داد.

شاید برخی از مسائل فوق در آینده توسط Tailwind مورد توجه قرار گیرد. با این حال، به این معنی نیست که این نوع مسائل دیگر تکرار نخواهد شد. این احتمال وجود دارد که وقتی می خواهید کارهای غیرعادی را با یک ظاهر طراحی انجام دهید یا با ابزارهای دیگر ادغام کنید، ممکن است راه حل ساده ای نداشته باشید. بنابراین نتیجه‌گیری فعلی من این است که به مولفه‌های مدل‌دهی شده پایبند باشم و به سمت Tailwind عجله نکنم (حداقل در حال حاضر).

این غم انگیز است که می بینیم توسعه دهندگان در مورد اینکه کدام ابزار بهتر است بحث می کنند. به نظر نمی رسد این نوع مشاجره متوقف شود. اما نگران نباشید. در حال حاضر یک راه حل “کامل” وجود دارد. اگر Tailwind و styled-components را ترکیب کنید، هیچ استدلالی وجود نخواهد داشت -> https://www.npmjs.com/package/tailwind-styled-components
*من از این بسته استفاده نمی کنم اما به شما اطلاع می دهم که وجود دارد.

این واقعا منطقی است زیرا Tailwind و کامپوننت های styled در واقع مشکلات مختلفی را حل می کنند. چرا آنها را به جای انتخاب یکدیگر ترکیب نکنید.

نظر فوق فقط پس از استفاده از Tailwind به مدت 2 روز ساخته شده است. بنابراین بسیار محتمل است که نقطه ای را از دست بدهم. اگر دیدگاه متفاوتی در مورد Tailwind دارید، لطفاً در کامنت بنویسید. خوشحال می شوم از برنامه نویسان با تجربه یاد بگیرم.