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相比，管理起来容易得多
styled-components和Tailwind哪个更优秀？
老实说，我不认为这两者是相辅相成的。这两者都有它们各自的优点和缺点，并且在本文也进行了验证。
我想说的是，如果你正在想办法寻求一种快速的方式快速建站或生成一个单页面（即不复杂的页面），那么 Tailwind 可能非常适合你。这主要是因为你可以从该框架中获得大量的实用的 class 来设计样式。
但是，如果你的目标是开发一个更长期的项目，并且要求容易维护，那么我建议采用styled-components，因为在我看来，它们在维护样式时具有更“健壮”的感觉。然而，我并不是这两方面的专家，我只是简单地构建了这两种技术，这些也是我最初的想法。
