- divide: 分隔符 (border-color, border-style, border-width) - divide-x: 水平分隔符 (border-color, border-style, border-width) - divide-y: 垂直分隔符 (border-color, border-style, border-width) -border-collapse: 设置边框是否合并 2. Flexbox 尺寸和排列 - flex-wrap: 等同于 flex-flow 中...
通过border-value 设定线宽,颜色的设置也很简单:border-颜色-数值。 border-t|b|l|r: 上|下|左|右边框. 如 border-t-2 即 border-top-width: 2px; border-x|y:横向|纵向 边框 不加value 时,默认 value 为 1px边框类型 border-solid 即 border-style: solid; border-dashed 即 border-style: dashed...
原子化CSS(Atomic/Utility-First CSS) 先说「语义化CSS」,他很好理解,以下面这个class举例: 复制 .chat-notification{display:flex;max-width:24rem;margin:0auto;padding:1.5rem;border-radius:0.5rem;background-color:#fff;box-shadow:020px25px-5pxrgba(0,0,0,0.1),010px10px-5pxrgba(0,0,0,0.04);...
比如说在TailwindCSS中要定义颜色,需要通过类似text-red-50、text-red-100这样的类名,每个类名对应了设计系统中一种定义好的颜色: 颜色约定 字体大小、间距、布局等也是同样的道理: 字体大小约定 所以,如果公司采用了上述这套「对前端屏蔽设计系统」的开发流程,那么TailwindCSS无疑会增加前端的负担。这种负担的增加体...
在Tailwind CSS 中,每个原子类代表一个具体的样式属性和值,实现了单一职责的原则。这意味着更改一个样式属性只需要修改相应的原子类,而不会影响其他样式。这有助于降低样式重构的风险,因为开发者可以更精准地控制和理解样式的变化。 2.3 愉悦的编码体验
针对上面提到的问题,Tailwind 允许我们在单个 CSS 文件中使用它们的类名: .header { @apply bg-red-200 w-4 text-gray-400 rounded-sm border-2; } 比如说项目中的按钮都是存在通用的圆角、内边距、字体等,这样我们就可以封装出这样一个类: .btn { ...
原子化CSS(Atomic/Utility-First CSS) 先说「语义化CSS」,他很好理解,以下面这个class举例: 代码语言:javascript 复制 .chat-notification{display:flex;max-width:24rem;margin:0auto;padding:1.5rem;border-radius:0.5rem;background-color:#fff;box-shadow:020px 25px-5pxrgba(0,0,0,0.1),010px 10px-5px...
在CSS文件中,定义after-arrow类名的样式。使用::after伪元素来创建箭头,并设置其样式。 代码语言:txt 复制 .after-arrow::after { content: ""; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 0; height: 0; border-top: 0.5rem solid transparent; border-bottom...
bootstrap 降低了定制性,你很难依靠 bootstrap 去定制一个自己的类,虽然 bootstrap 也有部分原子化的类名,但那只是常用的一些 css 属性。 Tailwind CSS 完全自由,你可以玩出自己的花样,你甚至可以通过 Tailwind CSS,打造一套属于自己的类似 bootstrap 这样的 ui 框架。
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; } .chat-notification-logo { ...