TailwindCSS(2)-选项介绍
布局部分 让我们开始吧
我们在vscode里安装好 Tailwind CSS IntelliSense 智能提示就开始起作用了
我直接看 文档 布局部分
tips：
- 响应式 sm: md: lg: xl: 代表这种前缀下的分辨率会生效 不写就所有都生效
- Pseudo-Class: hover: focus: 等等一大堆前缀，同理
- 提取组件 : Extracting CSS components with @apply 这个是肯定要做的
Container
<div class="container mx-auto">
这个container和bootstrap不同点在不会自己居中和没有内置padding
</div>
我看了一下bootstrap container默认带了:
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
2个margin auto ，对应就是 mx-auto ,m = margin , x:left and right , auto: auto 这个比较语义化
同理 padding left right,也有了 px-{number} 只不过在这个里面的单位都rem,px-4 对应就是 4/4 = 1rem
Box Sizing
这个太熟悉了，我个人反正大部分都使用 border-box 少部分场景手动指定的
| Class | Properties |
|---|---|
| .box-border | box-sizing: border-box; |
| .box-content | box-sizing: content-box; |
Display
除了一个 .hidden 代表 display: none; 其他都非常语义化
Floats & Clear
我个人基本不用float来布局，所以直接在 tailwind.config.js 禁掉了
module.exports = {
corePlugins: {
float: false,
clear: false,
}
}
Object Fit & Object Position
这个用在img上的也不提了
Overflow
我没理解，去mdn上查一下
| Class | Properties |
|---|---|
.scrolling-touch | -webkit-overflow-scrolling: touch; |
.scrolling-auto | -webkit-overflow-scrolling: touch; |
Position & Top / Right / Bottom / Left
Sticky IE11不支持 .inset前缀 其他也没啥
Visibility
看到这个让我想起了重绘（repaint）和重流（reflow）
Z-Index
这个让我想起了 svg 里的顺序，后面一个必然在前一个上面，也没啥z-index的意思
FLEXBOX & GRID
记录2个好文:
- flex
- grid
- 加上这里的文档，也没啥难的
- grid 很强 css-tricks 很多都用 ie不能用
- flex 我个人已经用的滚瓜烂熟 手机app,小程序啥的，支持都很好的， 记得ie10 有一些bug 要用max-width来解决的 我们在这个项目里主要用flex
SPACING
Padding Margin 没啥好讲
Space Between 要注意一个选择器问题 对第一个不生效
看到支持负数
看到 --space-x-reverse --space-y-reverse 这种变量，
想起ie11好像不支持吧,特地又去查了一下 var ie不支持，感觉只有编译时，向下兼容了，postcss-custom-properties
SIZING
n/m这种百分比挺有意思的，其他注意一下单位就好
总结
总的来说 布局部分很简单，没啥注意的点 还有就是,这个的文档写的真的很好，完全可以当css新手教程来看