布局部分让我们开始吧

我们在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 禁掉了

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新手教程来看

TailwindCSS(2)-选项介绍

布局部分 让我们开始吧