一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情
上一篇文章 Angular 中 SASS 样式的使用中，我们已经介绍了 sass 样式的介绍。本文，我们来介绍另一个编写样式的神器 -- Tailwind。
Tailwind 宣称无需离开您的 HTML ，即可快速建立现代网站。
本人并没有结合 angular + tailwind 实际开发过，但是结合 react + tailwind 有实际的项目经验。
嗯～ OK，这就是个样式框架，加在哪个前端框架上都一样～
下面我们进入主题
支持响应式
不支持响应式的框架不是一个好的样式框架，tailwind 根据常用的设备分辨率方案，设定不同的类名。
这些类名需要记住，如果你在 DOM 元素中并没有添加，那么就不会有效果，毕竟它只是个样式而已。
sm: small -> @media(min-width: 640px) md: middle -> @media(min-width: 768px) lg: large -> @media(min-width: 1024px) xl: extra large @media(min-width: 1280px) 2xl: extra extra large @media(min-width: 1536px) 复制代码
浏览器的支持
距本文发稿前，tailwind 的版本号是v2.2.16。那么这就意味着现在版本的 tailwind 不再支持任何版本的 IE。其 2.0 以上版本的 tailwind 专为 Chrome, FireFox, Edge 和 Safari 的最新版本设计并在它们上面经过了测试。所以，如果的系统使用场景不考虑 IE 的话，可以放心使用。
IE有点凉凉;当然，如果你还是固执想使用tailwind兼容下IE11的话，使用1.9版本的tailwind
在公司内部系统可以大胆使用
Tailwind，写过之后，你就知道有多香
如何使用？
在运用 tailwind 开发，真是日長神倦。你需要记住大量的类名，或者说你应该对官网提供的类名能熟练查阅。
比如：
字体的大小：
# text-xs 代表 -> text-extra-small { font-size: 0.75rem; line-height: 1rem; } # text-sm 代表 -> text-small { font-size: 0.875rem; line-height: 1.25rem; } # text-base { font-size: 1rem; line-height: 1.5rem; } # and more ... 复制代码
font size of the root element (rem) 是指相对于根元素的字体大小的单位。比如：根元素的设置
font-size: 16px;那么0.75rem代表的就是12px
rem 在兼容不同设备上很好用
tailwind 中的样式的类名很多，使用的过程中，打开官网，对照类名进行开发。如此多次之后，你总会记下相关的类名🥱，即熟能生巧。
