如何理性看待Tailwind和styled-components争宠React

用户3806669

发布于 2021-03-25 15:08:11

3.1K2

发布于 2021-03-25 15:08:11

点击上方“前端三元同学”，选择“设为星标”

第一时间关注技术干货！

几天前，我发表了一篇新的博文，详细介绍了我使用styled-components的经验，以及如何将动态样式整合到 js 域中，避免使用 CSS 文件。后来我发现了另一种将样式整合到应用程序中的方法... 那就是 TailwindCSS。

我以前看过一些关于这个的讨论，也看过很多关于 TailwindCSS 的视频和帖子，但是没有多想。因此，既然有人再次告诉我这件事，我也想尝试一下，这样我就可以比较我的经历了。我决定利用TailwindCSS建立一个网站。

Tailwind初识

为了让你开始并理解本文，以下几点非常重要：

TailwindCSS 是一个充满预构建类的包，可以对组件进行样式化，但是，它们非常灵活，您可以用它们做任何事情
你不需要知道 CSS 就可以使用 TailwindCSS
TailwindCSS 使用了大量的缩写，例如(pb 是 padding-bottom) ，所以当你不确定的时候，阅读文档并使用它的搜索功能是很重要的

Tailwind更像是bootstrap吗？

我不得不说我对TailwindCSS的最初印象是挺不错的。它使用了很多引导程序的语义，并且几乎扩展了很多，以至于你永远不必使用直接的 CSS 中的媒体查询来切换样式的差异。相反，你可以这样做:

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

对于那些以前使用过样式框架的人，如 Material UI，Bootstrap 等。你需要了解这些不同的媒体断点(sm、md、lg 等)的用法。

这基本上相当于是在说:

当我的设备尺寸小于sm时，设置padding-bottom 为 10 ;
当我的设备尺寸很小(sm)或更大时，设置padding-bottom 为12 ;
当我的设备大小为中等(md)或更大时，设置padding-bottom 为8 ;
当我的设备大小比较大(lg)或更大时，设置padding-bottom 为4。

我必须说，我花了一段时间才真正理解这样一种技术，即不存在x断点，这是你通常会在 bootstrap 中找到的例子。简单地说，任何低于 sm 的设备都会继承TailwindCSS类，而不会像上面的 “pb-10” 那样有一个媒体断点。

Tailwind会造成大量的class类吗？

Tailwind 确实会使你的标签看上去有很多的 className，这点确实够扫兴的。在每个元素上都添加大量的 class 类最终容易导致巨大的 class 属性值，也容易导致无用的class留存在不需要的元素上等等现象。有一种很好的处理办法就是使用一个 classNames 包，用来将这些类名都组合在一起，并且允许你将元素的格式设置得更清晰一些

例如这个样子：

module.exports = {
  theme: {
    // ...
    fontSize: {
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.25rem' }],
      base: ['1rem', { lineHeight: '1.5rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1' }],
      '8xl': ['6rem', { lineHeight: '1' }],
      '9xl': ['8rem', { lineHeight: '1' }],
    },
  },
}

与styled-components相比，Tailwind如何？

关于 styled-components，我真正喜欢的一点是它使你的组件看起来非常得简单。比如你能够创建一个样式化的 div 并引用它：

import styled from 'styled-components'

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

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

在我看来，这种方式使得组件保持干净和整洁，允许我们在写组件时更注重逻辑而不是外观。你甚至可以更进一步将样式抽出成一个单独的 js 文件，抽象成组件的作用域。然而，让我们看看这个在 Tailwind 中是什么样子的：

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

正如你看到的，Tailwind 实际上减少了我们为实现相同目标而编写代码的行数。这就是有效的 class 类方法的意图。它确实简化了样式化元素的编写，然而，这对于我们的元素来说是非常友好的，因为它只有少数几个样式。让我们来看看样式更为复杂的组件的比较：

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>
    </>
);

Tailwind

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却使得 className 如何冗长，而且如果不使用 className 类名这样的包的话，它确实会使我们的代码行比应有的长很多。在我看来，这是 Tailwind 最大的败笔之一。

特别是，如果你在进行多人开发，那么 styled-components 可以使你很轻松得读取一个组件的样式。与 Tailwind 相比，你可能必须要在文档中查找一些工具类来理解这些值的含义

将这个例子与第一个例子比较，Tailwind 只是号称简单，后续的例子只包含了复杂而且高风险的代码。只是让多个开发人员同时处理少数几个组件样式，却很容易出现问题，然后他们需要花更多的时间去找出根本因素，从而删除特定的工具类。在我看来，与仍然依赖原始的CSS更改的styled-components相比，管理起来容易得多