Tailwind 命令备忘单-css教程-PHP中文网

Tailwind 命令备忘单

PHPz

发布： 2024-07-15 11:52:31

转载

901人浏览过

tailwind 命令备忘单

tailwind css 是一个实用程序优先的 css 框架，其中包含一些类，可以直接在标记中组合这些类来构建任何设计。

特征：

实用至上：

tailwind css 是一个实用程序优先的 css 框架，它提供低级实用程序类来构建自定义设计，而无需编写 css。这种方法允许我们实现完全自定义的组件设计，而无需编写一行自定义 css。“you are'不要浪费精力发明类名”.

内容清除：

这是从将在生产环境中使用的最终 css 文件中删除未使用的 css 类的过程。这是一个优化过程，最终的 css 尺寸更小，更易于维护并显示出更高的性能。

命令：

下划线：

underline 
underline-offset-<size>
decoration-<color>-<shade> //color for underline
decoration-<thickness> // size of underline
decoration-<style> // wavy, double

登录后复制

文字样式

text-<color>-<shade> //color of text
text-opacity-<shade> //opacity of text
text-<size> //size of text
text-<alignment> //alignment of text

登录后复制

背景颜色

bg-<color>-<shade>

登录后复制

边界半径

rounded-<size>

登录后复制

字体样式

font-<style> //mono, serif, sans
font-bold
font-thin

登录后复制

斜体：

italic

登录后复制

能见度

隐藏元素：

hidden

登录后复制

显示（与隐藏相反）：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

block

登录后复制

填充

p-<size>   /* all sides */
px-<size>  /* horizontal (left and right) */
py-<size>  /* vertical (top and bottom) */
pl-<size>  /* left */
pr-<size>  /* right */
pt-<size>  /* top */
pb-<size>  /* bottom */

登录后复制

保证金

m-<size>   /* all sides */
mx-<size>  /* horizontal (left and right) */
my-<size>  /* vertical (top and bottom) */
ml-<size>  /* left */
mr-<size>  /* right */
mt-<size>  /* top */
mb-<size>  /* bottom */

登录后复制

flexbox

flex
flex-<direction> // row or column

登录后复制

证明内容合理

justify-<option>

登录后复制

对齐项目

items-<option> //start,end,center

登录后复制

响应式设计

sm  /* small devices */
md  /* medium devices */
lg  /* large devices */
xl  /* extra large devices */

登录后复制

尺寸

h-<size>
w-<size>

登录后复制

边框

border
border-<size>
border-<color>

登录后复制

悬停状态

hover:<utility>

登录后复制

以上就是Tailwind 命令备忘单的详细内容，更多请关注php中文网其它相关文章！