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
中的样式的类名很多,使用的过程中,打开官网,对照类名进行开发。如此多次之后,你总会记下相关的类名辰,即熟能生巧。
【完】✅