本文主要是想整理一下tailwind css相关，在具体展开之前先对相关背景知识做下介绍。
css技术
以下资料参考这里。
css技术这里被分为三种
- Pre-/Post-processors
- CSS Frameworks
- CSS-in-JS
Pre-/Post-processors
是来增强css的工具，这里分为两种
- Pre-processors 比如sass、less，添加了css没有的特性，包括嵌套、继承、mixins等
- Post-processors 比如postcss，可以对css进一步处理，包括自动添加浏览器前缀、将转换新版css语法（类似于babel）等。
CSS Frameworks
是提前构建组件或样式的库，大致又可以分为三种
- 在元素上添加class，从而添加一组提前组织好的样式，比如bootstrap
- 本身就是封装好的组件，直接使用对应的组件而不是添加class,比如antd
- 每个class表示一个简单的样式，通过组合class而自定义样式，比如tailwind css，而且由图可见无论上升趋势还是实际使用率，后者都很受欢迎。
CSS-in-JS
用来将css集成到js的库，用js的语法用来增强css的功能，主要是用于react生态，最受欢迎的是style-components，另外css modules 解决了css不存在模块的问题，使用css-loader等可以将各个模块的class名修改为和当前组件相关的名称，避免全局冲突。
tailwind css
tailwind css的用法类似于inline css，不同的是不是直接在元素上添加样式，而是添加样式对应的className,每个className对应一个原子样式，且这种对应关系是可以配置的。
基本用法
安装等准备工作看这里,准备完后我们写了这样一个元素
<div class="text-xl font-medium text-black">ChitChat</div>
复制代码通过三个classname指定了当前元素的font-size,font-weight,color三个属性，每个classname分两部分：
前一部分指的是某个属性，具体表示的含义可能要结合第二部分内容，比如text在这里表示了font-size和color,具体取值可参考文档layout部分及以下
后一部分指的是该属性具体的值，特定的值表示的含义既包括默认的还可以在theme中配置，比如text-xl font-medium对应的默认含义分别对应
fontSize: {
xl: ['1.25rem', { lineHeight: '1.75rem' }],
},
fontWeight: {
medium: '500',
},
复制代码因此会应用以下样式
.text-xl{
font-size:1.25rem;
line-height:1.75rem;
}
.font-medium{
font-weight:500;
}
复制代码当前解决方案
本文的一开始我们讲了很多css工具，每一种工具都是为了解决某些问题而产生的，那么用tailwind css是怎么解决这些问题的呢?
tailwind css通常和postcss一起使用，对以下问题的解决方案是
- sass等预处理器对css的功能增强可以通过postcss 插件解决，比如嵌套可以用
tailwindcss/nesting,mixin可以使用postcss-mixins，其实和预处理器同时使用也是可以的，只是官方不推荐 - css module的问题，要想解决这个问题就要先回顾一下这个问题怎么来的，因为css所有的选择器都是全局的，因此如果不同地方使用了同一个class等，且对应的样式不一样就会对彼此产生影响，而在tailwind css中，每个class对应的样式是固定的，因此不存在这个问题。
- 不同状态下对应的样式，比如元素的hover状态，或者不同屏幕下，可以通过添加修饰符来解决，比如
<button class="bg-sky-600 hover:bg-sky-700 ..."> Save changes </button>
复制代码- 使用自定义样式，如果想在当前体系之外自定义，比如将多个class表示的样式进行组合，可以使用指令来解决，其中引入了层的概念对不同样式进行排序来处理优先级问题。
总结
这里我们稍微总结一下优缺点和适用场景。 优：
- 性能好，只会产生正在使用的class对应的样式
- 不需要各种class等的命名
- 代码编写量少，只需要添加对应的class，不需要编写大量css样式
- 易维护，去除了不同样式中的要硬编码，修改样式时需要修改对应的class，而不担心影响别的组件
缺：
- 需要添加大量的classname
- 对相关classname有一定的记忆负担，可以通过 ide 插件提示
适用场景： 适合新项目且团队乐于接受新事物，这个工具只是一种新的解决方案，如果技术栈转换的代价超过了新工具带来的提升，那还是不要换了。
参考
