在Twitter上，我经常看到使用尾风的人以及他们如何爱上它。我对当前的工作流程（样式组件）非常满意，但是，我终于决定尝试一下，看看该工具是否适合我。本文是我使用尾风后几天后自己的判决。

我主要使用React.js和样式组件。因此，本文是关于在React.js开发的背景下进行样式组件和逆风之间的比较。

tldr

长话短说，我决定坚持使用样式的组件，不要使用尾风。总体而言，我喜欢尾风缩短的CSS属性。写作的速度比原始CSS快。但是，我不喜欢您必须在类属性中写所有这些类的事实。它可以使JSX难以阅读，并且可以进行诸如动态样式之类的操作。

风格组件赢得了胜利

1.可读性

我首先意识到使用尾风时很难读取JSX。使用常规的CSS策略，您可以提供有意义的类名称，例如class =“ todos-wrapper”。这有助于一眼就能理解结构。使用样式组件，这甚至更好，因为您为（例如）提供了唯一的名称。这使维护工作更加容易，尤其是在使用旧代码时。

// 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语句，这可能有点棘手。虽然您可以通过编写外部功能来处理IF语句，但我个人更喜欢样式组件方法，因为所有样式逻辑都会在一个地方发生，并且在结构和样式之间可以更清楚地分离。

// 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.黑暗模式支持

添加主题（例如黑暗模式）并不是很容易使用尾风。当然，尾风具有暗模式功能，但是在每个元素中添加“深色：边框白色”属性并不是真正有效的。

定义一个专用变量（例如“ BorderColor”），然后根据您的主题更改该变量的值更容易。当您以后想添加更多主题时，这尤其更好。您所要做的就是为“ BorderColor”赋予新价值，而您根本不需要触摸JSX或CSS（请参阅theprovider of Styledled-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具有预定义的实用程序课程，而您不必编写普通的CSS。这是Tailwind的重要组成部分，我实际上很喜欢这种体验。但是，样式组件在此方面不远。是的，您必须编写普通的CSS，但您仍然可以通过制作自己的公用事业风格来减少开发时间。就像尾风一样，您可以制作常见的样式组件，例如容器，文本片，影子灯等，并随时随地调用它。当然，您需要初始开发时间，但是我敢肯定，在准备10〜20个经常使用的样式集后，它会得到回报。

结论：我选择样式组件

也许将来将通过tailwind解决上述一些问题。但是，这并不意味着这种问题不会再次发生。当您想通过造型或与其他工具集成在一起时，您可能没有直接的解决方案。因此，我目前的结论是坚持使用样式的组件，而不是冲向逆风（至少目前）。

如何结束论点

可悲的是，开发人员争论哪种工具更好。这种争论似乎并没有停止。但是不用担心。已经有一个“完美”解决方案。如果您结合了尾风和样式组件，就不会有争论 - > https://www.npmjs.com/package/tailwind-styled-components
*我不使用此软件包，但让您知道它存在。

这确实是有道理的，因为尾风和样式组件实际上正在解决不同的问题。为什么不结合它们而不是互相选择。

也许我太陌生了

上面的意见只有在我使用尾风2天之后才提出。因此，我很有可能在某个时候错过了。如果您对逆风有不同的看法，请在评论中写下。我很乐意向经验丰富的开发人员学习。