Tailwind CSS

213次阅读
没有评论

必须在模板中使用完整的class才会正常显示样式

默认断点

Tailwind
Tailwind

构建一个包含 Tailwind 的所有默认配置的完整配置文件

npx tailwindcss init --full

content:[模板路径

]

display中 inline、block、inline-block的区别

inline

inline使元素变为行内元素,拥有行内元素的特征,可与其他行内元素共享一行,height和with由内容撑开可以通过padding、margin的left和right产生边距效果。

如<span>, <a>, <label>, <input>, <img>, <strong> 和<em>

block

block使元素变为块级元素(独占一行),可以设定宽高,不设定宽度时默认撑满整行

如<div>, <p>, <h1>, <form>, <ul> 和 <li>

inline-block

内联块状元素,不独占一行的块状元素

display中flex和inline-flex

当box容器没有设定宽度时,且display为flex,box容器宽度会填冲父容器;当display为inline-flex时,box容器会包裹子容器。

display中的grid网格布局

 

评论(没有评论)
验证码