ReactJs 中的 TailwindCSS 与 Styled-Components 对比

我应该了解哪些基础知识？

顺风……更像是自举！？

等等……这看起来好像有很多课？

TailwindCSS 与 styled-components 相比有何不同？

那么，谁将捧走奖杯呢？

实用资源：

几天前，我发布了一篇新的博客文章，详细介绍了我使用 styled-components 的经验，以及它如何巧妙地将动态样式集成到 JavaScript 中，而无需使用 CSS 文件。后来，我又发现了一种将样式集成到应用程序中的方法……那就是 TailwindCSS。

之前我看到过一些关于 Tailwind CSS 的讨论，也看过很多相关的视频和帖子，但当时并没有太在意。最近又有人跟我提起它，而且我也想亲自尝试一下，以便比较一下使用体验，所以我决定用 Tailwind CSS 来搭建一个网站。

我应该了解哪些基础知识？

为了帮助您开始阅读并理解本文，您需要了解以下几点：

1. TailwindCSS 是一个包含大量预构建类的软件包，用于设置组件样式，但是，它们非常灵活，您可以用它们做任何事情！
2. 你不需要懂 CSS 就能使用 TailwindCSS。
3. TailwindCSS 使用了很多缩写，例如（pb 是 padding-bottom），所以如果您有任何疑问，请务必阅读文档并使用其搜索功能。

顺风……更像是自举！？

我必须说，我对 Tailwind 的第一印象非常好。它继承了 Bootstrap 的很多语义，并且几乎将其扩展得如此之大，以至于你完全不需要在 CSS 中使用媒体查询来切换样式差异。相反，你可以像下面这样操作：

<div class="pb-10 sm:pb-12 md:pb-8 lg:pb-4">
    Hello world
</div>

对于使用过 Material UI、Bootstrap 等样式框架的用户来说，你们应该能够理解这些不同媒体断点（sm、md、lg 等）的用法。它们本质上是在说：“当我的设备尺寸小于 small 时，应用 10 的下边距；当我的设备尺寸为 small (sm) 或更大时，应用 12 的下边距；当我的设备尺寸为 medium (md) 或更大时，应用 8 的下边距；当我的设备尺寸为 large (lg) 或更大时，应用 4 的下边距。” 我必须说，我花了一段时间才真正理解为什么没有像 Bootstrap 那样的 'xs' 断点。简单来说，任何小于 sm 的设备都会继承 Tailwind 类，而无需像上面那样设置 'pb-10' 这样的媒体断点。

等等……这看起来好像有很多课？

确实如此，这确实让我对这个框架的看法有些失望。由于每个元素都添加了大量的实用类，很容易导致类属性值过大。这很容易造成一些不必要的类遗留在不需要的元素上等等问题。一个不错的选择是使用classNames包，它可以将类名合并在一起，让你的元素格式更加简洁。

TailwindCSS 与 styled-components 相比有何不同？

我非常喜欢styled-components 的一点是，它让组件看起来非常简洁。能够创建一个样式化的 div 并像这样引用它：

const Wrapper = styled.div`
padding-bottom: 10px;
@media (min-width: 768px) {
    padding-bottom: 20px;
}
`;

const TestComponent = () => (
    <Wrapper>
        Hello world!
    </Wrapper>
);

对我来说，这能让组件代码保持简洁清晰，使组件能够专注于逻辑而非外观。你甚至可以更进一步，将样式抽象到组件域内的一个单独的 js 文件中。不过，让我们看看这在TailwindCSS中是如何实现的：

const TestComponent = () => (
    <div className="pb-10 md:pb-20">
        Hello World!
    </div>
);

正如你所见，TailwindCSS 实际上减少了我们实现相同目标所需的代码行数。这正是它采用实用类方法的初衷。它确实简化了样式元素的编写。然而，这对于样式较少的元素来说固然很好。让我们来看看样式更丰富的组件的对比：

styled-components

const Button = styled.button`
    font-size: 1rem;
    margin: 1rem;
    padding: 1rem 1rem;
    @media (min-width: 768px) {
        padding: 2rem 2rem;
    }
    border-radius: 0.25rem;
    border: 2px solid blue;
    background-color: blue;
    color: white;
`;

const TestComponent = () => (
    <>
        <Button>
            Hello world!
        </Button>
    </>
);

TailwindCSS

const TestComponent = () => (
    <div className="text-base mg-1 pt-1 pr-1 md:pt-2 md:pr-2 rounded border-solid border-2 border-light-blue-500 bg-blue-500 text-white-500">
        Hello World!
    </div>
);

从上面的对比可以看出，随着组件样式规则的增加，styled-components 的确更胜一筹。Tailwind 的实现方式在类名方面过于冗长，如果不使用像classNames这样的包，代码行就会变得比实际需要的长得多。在我看来，这是 Tailwind 最大的缺点之一。

尤其是在与多个开发人员合作的项目中，styled-components 方法可以让您轻松了解 Button 组件的样式。相比之下，使用 Tailwind 时，您很可能需要查阅文档才能理解某些实用类的具体值。

对比一下这个例子和第一个例子。Tailwind 简直就是简洁的代名词。而这个后续例子却充满了复杂性，而且极易导致代码混乱。只要几个开发者同时修改几个组件，样式就很容易被破坏或干扰，然后还得花时间删除一些辅助类才能找到根本原因。相比之下，styled-components 仍然依赖于我们自己的 CSS 修改，在我看来，这种方式更容易管理变更。

那么，谁将捧走奖杯呢？

嗯……说实话，我觉得这两者难分伯仲。它们各有优缺点，本文已经有所阐述。如果你只是想快速搭建一个不太复杂的网站或单页应用，那么 Tailwind CSS 或许是最佳选择。这主要是因为它提供了许多开箱即用的样式类设置工具。但是，如果你需要开发一个更易于维护的长期项目，我建议使用 styled-components，因为在我看来，它在样式维护方面更加“稳健”。不过，我并非这两种技术的专家，只是在实践中接触过它们，以上只是我的一些初步想法。

实用资源：

TailwindCSS：

https://tailwindcss.com/

https://www.tailwindtoolbox.com/

https://tailwindcomponents.com/

Styled-Components

https://styled-components.com/

感谢阅读！如果您使用过其中任何一款产品，或者两者都用过，请在下方评论区留言，分享您的使用体验！👇