此页面需要javascript支持,请在浏览器中启用javascript

TailwindCSS(2)-选项介绍

css
阅读 

布局部分 让我们开始吧

我们在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 少部分场景手动指定的

ClassProperties
.box-borderbox-sizing: border-box;
.box-contentbox-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上查一下

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

© 2021 icebreaker 苏ICP备19002675号-2
version:1.2.2