点击上方“前端三元同学”，选择“设为星标”
第一时间关注技术干货！
几天前，我发表了一篇新的博文，详细介绍了我使用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 包，用来将这些类名都组合在一起，并且允许你将元素的格式设置得更清晰一些
例如这个样子：
代码语言：javascript复制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相比，管理起来容易得多
styled-components和Tailwind哪个更优秀？
老实说，我不认为这两者是相辅相成的。这两者都有它们各自的优点和缺点，并且在本文也进行了验证。
我想说的是，如果你正在想办法寻求一种快速的方式快速建站或生成一个单页面（即不复杂的页面），那么 Tailwind 可能非常适合你。这主要是因为你可以从该框架中获得大量的实用的 class 来设计样式。
但是，如果你的目标是开发一个更长期的项目，并且要求容易维护，那么我建议采用styled-components，因为在我看来，它们在维护样式时具有更“健壮”的感觉。然而，我并不是这两方面的专家，我只是简单地构建了这两种技术，这些也是我最初的想法。
友情链接
- TailwindCSS[1]
- styled-components[2]
引用链接
[1]
TailwindCSS: https://tailwindcss.com/
[2]
styled-components: https://styled-components.com/
创作不易，请各位给加个星标，点赞、在看 支持哦！
