Tailwind CSS 中,间距(Spacing)是布局的重要组成部分。 间距指的是元素之间的距离,包括内边距(Padding)、外边距(Margin)、行间距(Line-Height)、字间距(Letter-Spacing)等。 Tailwind CSS 提供了一些常用的工具类,使得这些间距的设置变得更加简便且直观。 外边距(Margin) 外边距用于控制元素与其他元素之间的距离。Tai...
- container: 将内容限制在最大宽度的容器内部 - mx-auto: 实现水平居中(margin-left 和 margin-right 设置为 auto) 以上是一些常用的 Tailwind CSS 缩写及其对应的意义,覆盖了基础的布局、文本、背景、边框、弹性盒子布局、网格布局和响应式设计,有助于更快速地开发出具有良好用户体验的 Web 应用程序。
您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 margin 属性来控制为 margin 功能生成哪些变体。 例如,这个配置也将生成 hover and focus 变体: // tailwind.config.js module.exports = { variants: { extend: { // ... + margin: ['hover', 'focus'], } } } 禁用 如果您不打算...
在tailwindcss 3.x 之后,tailwindcss默认开启了JIT模式,该模式能够让我们书写动态CSS样式,不再受到静态规则集的限制。除了内置了一些常用属性值, 例如ml-2表示margin-left: 0.5rem, 有时我们需要一些特定的值,tailwindcss对这种情况提供了很好的支持,任何需要自定义值的属性,可以使用方括号来表示。例如 w-full->wid...
.-m-pxmargin: -1px; .my-0margin-top: 0; margin-bottom: 0; .mx-0margin-left: 0; margin-right: 0; .my-1margin-top: 0.25rem; margin-bottom: 0.25rem; .mx-1margin-left: 0.25rem; margin-right: 0.25rem; .my-2margin-top: 0.5rem; margin-bottom: 0.5rem; ...
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...
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 同理...
This box has padding and margin. 4、布局相关工具类 flex:将元素的布局模式设置为 flexbox。 grid:将元素的布局模式设置为 CSS Grid。 items-center:将 flexbox 容器中的子元素垂直居中。 justify-between:在 flexbox 容器中,子元素之间的空间均等分布。 实例 Item 1 Item...
在 tailwindcss 3.x 之后，tailwindcss默认开启了JIT模式，该模式能够让我们书写动态CSS样式，不再受到静态规则集的限制。除了内置了一些常用属性值, 例如ml-2 表示 margin-left: 0.5rem , 有时我们需要一些特定的值，tailwindcss对这种情况提供了很好的支持，任何需要自定义值的属性，可以使用方括号来...
margin: 0 auto; padding: 1.5rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .chat-notification-logo-wrapper { flex-shrink: 0; ...