布局部分 让我们开始吧
我们在 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 新手教程来看