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
中的样式的类名很多,使用的过程中,打开官网,对照类名进行开发。如此多次之后,你总会记下相关的类名
Tailwind 初识相关推荐
- Tailwind Typographic
排版样式 字体集合(font family) Tailwind默认采用三种网络安全的字体集合,分别是sans.serif.mono 工具类 说明 font-mono 等宽字体,每个字母宽度相等,用于模 ...
- CSS Tailwind
一般的UI中CSS框架都是内建各种预设的组件,比如按钮.卡片.警告框等,当需要通过定制化设计时,组件的高度耦合性则带来很大的弊端.Tailwind并不提供预先设计好的内建组件,而是提供了更为基础的工具 ...
- Tailwind Size
CSS元素的尺寸包括宽度width和高度height两个属性,Tailwind设置尺寸的单位包括rem.百分比.px.vw以及auto. 宽度 最小宽度 最大宽度 高度 最小高度 最大高度 宽度(wi ...
- Tailwind Background
背景滚动(background attachment) CSS提供的background-attachment属性用于设置背景图像的固定方式,比如是否随着页面滚动.简单来说,background-at ...
- Tailwind Spacing
单位(size) Tailwind间距单位采用rem,rem是相对于HTML的根元素<html>标签而言的,只需在根元素确定一个参考值,即可计算出不同rem的大小. html{ font- ...
- Tailwind Border
边框半径(border radius) border-redius属性用于为元素设置圆角边框,可使用border-*-radius设置四个方位的圆角.圆角的设置是通过使用半径实现的,当使用一个半径时可 ...
- Tailwind Input
基础输入框 无边框 无边框输入框主要使用了shadow阴影,适合在有底色的环境中使用. 无边框 <input type="text" class="relative ...
- Tailwind Base
添加基础样式 - 使用Tailwind添加全局的基础样式 全局基础样式是样式表开头的样式,用于为基础HTML元素设置有效的默认值,或应用自定义重置样式. Tailwind包括一组实用的基础样式集称为p ...
- Tailwind Button
按钮组 input group 源代码查看地址 https://codepen.io/junchow/pen/dyGowYg?editors=1000 按钮组是由多个按钮水平排列而成,实现方式可分为两 ...
最新文章
- 微信小程序 循迹功能制作
- NA-NP-IE系列实验30:CHAP 认证
- Delphi多媒体设计之TMediaPlayer组件(二)
- 这样写Java,同事直呼666
- java年份换算_java中日期的换算处理
- 【报告分享】2019Q3短视频KOL红人季度深度分析.pdf
- 远程连接linux主机_Linux远程桌面连接Windows
- 关于djangorestframework
- 判断iOS机器是否支持TouchId, FaceId
- 网页编写练习 小米闪购
- 算法——排序——冒泡排序图解动画
- Zigbee设备类型选择
- html布局属性,hTML之FLEX布局属性
- 【STM32】TCL2543CN 12位11通道ADC芯片stm驱动程序,使用32自带SPI实现
- 服务器系统做成iso镜像,把服务器做成镜像
- 解决antimalware service executable程序占用CPU过高(有效)
- 开发Python用什么工具好?
- PhotoshopCC2018软件安装教程
- JS的onBlur事件与onfocus事件
- 如果流浪地球,信息科学能做什么
热门文章
- 【华为OD】【003-求N阶方阵的和】
- 把Bing改为锁屏键
- 以太坊区块链 POA本地搭建多节点私有链
- 网络存储服务器拷贝文件夹,【群晖 DS218+ 2盘位 NAS网络存储服务器使用总结】配置|做工|指示灯|copy键_摘要频道_什么值得买...
- 学习matlab(四)——概率与数理统计
- 创建添加学生信息的vue实例
- 使用sofa-common-tools自定义日志
- 统计学习(三):分类
- 95后小伙记录一次京东Java实习校招面经,三轮技术面+HR面,已给口头offer!
- 汽车尾灯控制电路代码