Tailwind CSS 中,间距(Spacing)是布局的重要组成部分。 间距指的是元素之间的距离,包括内边距(Padding)、外边距(Margin)、行间距(Line-Height)、字间距(Letter-Spacing)等。 Tailwind CSS 提供了一些常用的工具类,使得这些间距的设置变得更加简便且直观。 外边距(Margin) 外边距用于控制元素与其他元素之间的距离。Tai...
.px-2padding-left: 0.5rem; padding-right: 0.5rem; .py-3padding-top: 0.75rem; padding-bottom: 0.75rem; .px-3padding-left: 0.75rem; padding-right: 0.75rem; .py-4padding-top: 1rem; padding-bottom: 1rem; .px-4padding-left: 1rem; padding-right: 1rem; ...
py-72padding-top: 18rem; padding-bottom: 18rem; py-80padding-top: 20rem; padding-bottom: 20rem; py-96padding-top: 24rem; padding-bottom: 24rem; py-pxpadding-top: 1px; padding-bottom: 1px; px-0padding-left: 0px; padding-right: 0px; ...
base: 基础层级,定义一些基础属性如 margin、padding 等 components: 在这个层级创建可复用的样式块,如 card 等 utilities: 工具层级,如 layout、flex、grid 等指定层级,使用已有样式@layer: 指定样式具体在哪一层级, 如 base、component、utilities @apply: 使用 TailwindCSS 现有类名...
将CSS看作一套可重用的样式“工具”或模块,每个类只对应一个特定的样式效果,同时可以自定义,比如:我定义当前页面的bg-blue-500对应的颜色定制为yellow,类似于送人时候,送两个果篮,一个果篮想放青苹果🍏,另外一个想放红苹果🍎。 TailwindCSS Star
p-6代表padding: 1.5rem; /* 24px */ bg-white代表background-color: white; 对于用惯了「语义化CSS」的开发者,一时是很难接受「原子化CSS」的。在他们看来,这就是开历史的倒车,还得额外记忆各种类名的含义。 之所以造成这种误解,是因为这里有个很重要的因素被忽略了 —— 设计系统。
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所以产生了下面的类名: ...
0x01 概述 (1)简介 Tailwind CSS 官网:https://www.tailwindcss.cn/ Tailwind CSS 是一个 CSS 框架,使用初级“工具”类创建布局 如 Bootstrap 等传统 CSS 框架,其使用的类通常与组件直接相关;然而,Tailwind 则采用了
/* Input */.btn{@applypy-2;@applyp-4;}/* Output */.btn{padding-top:0.5rem;padding-bottom:0.5rem;padding:1rem;} 您还可以将@apply声明与常规 CSS 声明混合使用: /* Input */.btn{transform:translateY(-1px);@applybg-black;}/* Output */.btn{background-color:#000;transform:translateY(...
p-6代表padding: 1.5rem; /* 24px */ bg-white代表background-color: white; 对于用惯了「语义化CSS」的开发者,一时是很难接受「原子化CSS」的。在他们看来,这就是开历史的倒车,还得额外记忆各种类名的含义。 之所以造成这种误解,是因为这里有个很重要的因素被忽略了 —— 设计系统。