ml-{size}: 设置左外边距(margin-left)。 mx-{size}: 设置水平外边距(左右外边距)。 my-{size}: 设置垂直外边距(上下外边距)。 常见的外边距值: m-0: 设置外边距为 0。 m-1到m-64: 设置不同大小的外边距,默认是根据rem单位来设置的。 m-px: 设置外边距为 1px。 m-auto: 设置外边距为自动,常...
- container: 将内容限制在最大宽度的容器内部 - mx-auto: 实现水平居中(margin-left 和 margin-right 设置为 auto) 以上是一些常用的 Tailwind CSS 缩写及其对应的意义,覆盖了基础的布局、文本、背景、边框、弹性盒子布局、网格布局和响应式设计,有助于更快速地开发出具有良好用户体验的 Web 应用程序。
默认情况下, 针对 margin 功能类,只生成 responsive 变体。 您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 margin 属性来控制为 margin 功能生成哪些变体。 例如,这个配置也将生成 hover and focus 变体: // tailwind.config.js module.exports = { variants: { extend: { // ... + ...
甚至有人讲述了一个前端开发人员因为在构建功能方面进展缓慢而被解雇的轶事,因此 Tailwind 很糟糕。 伙计……到底是谁因为无法实现 Tailwind 类而被解雇的? 在Tailwind 之前,在某处.css .container { margin-left: auto; margin-right: auto; } 在Tailwind 之后,就在课堂上=“……” MX-auto 你确定他会被解雇...
m-56 margin: 14rem; m-60 margin: 15rem; m-64 margin: 16rem; m-72 margin: 18rem; m-80 margin: 20rem; m-96 margin: 24rem; m-auto margin: auto; -m-0 margin: 0px; -m-px margin: -1px; -m-0.5 margin: -0.125rem; -m-1 margin: -0.25rem; -m-1.5 margin: -0.375rem; -...
m-auto->margin: auto p-auto->padding: auto mx-2->margin-left: 0.5rem; margin-right: 0.5rem 对于一些 css 通用名称,tailwindcss提供了统一的规范。例如left, right, top, bottom,分别对应l, r, t, b。left-right 对应 x, top-bottom 对应 y所以产生了下面的类名: ...
This box has padding and margin. 4、布局相关工具类 flex:将元素的布局模式设置为 flexbox。 grid:将元素的布局模式设置为 CSS Grid。 items-center:将 flexbox 容器中的子元素垂直居中。 justify-between:在 flexbox 容器中,子元素之间的空间均等分布。 实例 Item 1 Item...
3. margin、padding、space 间距mr-2: 右边距为 2。ml-v,mt-v,mb-b 同理 mx-2, 左右边距为 2 my-2, 上下边距为 2 mx-auto: margin: 0 auto;padding 写法和 margin 同理space 用于父元素,作用是设置子元素之间的间距 space-x-4, 子元素之间间距 4px,space-y-4 同理...
mx-auto:x 轴方向(横向)上,外边距(margin)自动 外边距:m?-[number] m?:m-Margin、mt-MarginTop、ml-MarginLeft、mr-MarginRight、mb-MarginBottom number=number * 0.25rem=number * 4px 如:m-2 意思为 margin: 0.5rem Margin 2 Margin Left 2 Margin Right 2 Margin Top 2 Margin Bottom 2 Margin...
1. Padding和Margin类名: - p-[size]:表示添加内边距,[size]表示指定的内边距大小(例如p-4表示四个方向都添加4个单位的内边距); - m-[size]:表示添加外边距,[size]表示指定的外边距大小。 2.宽度和高度类名: - w-[size]:表示设置元素的宽度,[size]可以是像素(px)、百分比(%)或者自动(auto); - ...