Tailwind 命令备忘单

ID:15319 / 打印

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 </style></thickness></shade></color></size>

文字样式

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

背景颜色

bg-<color>-<shade></shade></color>

边界半径

rounded-<size></size>

字体样式

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

斜体:

italic 

能见度

隐藏元素:

hidden 

显示(与隐藏相反):

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 */ </size></size></size></size></size></size></size>

保证金

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 */ </size></size></size></size></size></size></size>

flexbox

flex flex-<direction> // row or column </direction>

证明内容合理

justify-<option></option>

对齐项目

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

响应式设计

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

尺寸

h-<size> w-<size></size></size>

边框

border border-<size> border-<color></color></size>

悬停状态

hover:<utility></utility>
上一篇: 使用 Tailwind CSS 掌握现代网页设计
下一篇: 释放现代 CSS 颜色函数的力量:历史、用途和实际应用

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。