Tailwind 命令备忘单

百变鹏仔 3个月前 (09-19) #CSS

文章标签命令

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

特征：

实用至上：

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

内容清除：

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

命令：

下划线：

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

文字样式

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

背景颜色

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

边界半径

rounded-<size></size>

字体样式

font-<style> //mono, serif, sansfont-boldfont-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

flexflex-<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>

边框

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

悬停状态

hover:<utility></utility>

文章推荐

Tailwind 命令备忘单

特征：

实用至上：

内容清除：

命令：

能见度

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写