You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)
一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第19天,点击查看活动详情
上一篇文章 Angular 中 SASS 样式的使用中,我们已经介绍了
sass
样式的介绍。本文,我们来介绍另一个编写样式的神器 --Tailwind
。Tailwind 宣称无需离开您的 HTML ,即可快速建立现代网站。
本人并没有结合
angular + tailwind
实际开发过,但是结合react + tailwind
有实际的项目经验。嗯~ OK,这就是个样式框架,加在哪个前端框架上都一样~
下面我们进入主题
支持响应式
不支持响应式的框架不是一个好的样式框架,
tailwind
根据常用的设备分辨率方案,设定不同的类名。这些类名需要记住,如果你在
DOM
元素中并没有添加,那么就不会有效果,毕竟它只是个样式而已。浏览器的支持
距本文发稿前,
tailwind
的版本号是v2.2.16
。那么这就意味着现在版本的tailwind
不再支持任何版本的IE
。其2.0
以上版本的tailwind
专为Chrome, FireFox, Edge 和 Safari
的最新版本设计并在它们上面经过了测试。所以,如果的系统使用场景不考虑IE
的话,可以放心使用。如何使用?
在运用
tailwind
开发,真是日長神倦。你需要记住大量的类名,或者说你应该对官网提供的类名能熟练查阅。比如:
字体的大小:
tailwind
中的样式的类名很多,使用的过程中,打开官网,对照类名进行开发。如此多次之后,你总会记下相关的类名🥱,即熟能生巧。【完】✅
The text was updated successfully, but these errors were encountered: