布局部分让我们开始吧

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

上一篇为什么要用Tailwind CSS 下一篇Graphql 学习笔记(2)

布局部分 让我们开始吧

布局部分让我们开始吧