text-inherit color: inherit; text-current color: currentColor; text-transparent color: transparent; text-black color: rgb(0 0 0); text-white color: rgb(255 255 255); text-slate-50 color: rgb(248 250 252); text-slate-100 color: rgb(241 245 249); text-slate-200 color: rgb(226 232...
color:颜色名称 shade:色度,取值范围为 100~900,不可对黑色或白色使用 Color Black Color White Color Red 500 Color Blue 500 Color Gray 500 Color Green 500 背景颜色:bg-[color]-[shade] BgColor White BgColor Red 500 BgColor Black 下划线颜色:underline decoration-[color]-[shade] underline:...
.text-red-100 color: #fff5f5; Aa .text-red-200 color: #fed7d7; Aa .text-red-300 color: #feb2b2; Aa .text-red-400 color: #fc8181; Aa .text-red-500 color: #f56565; Aa .text-red-600 color: #e53e3e; Aa .text-red-700 color: #c53030; Aa .text-red-800 color: #9b2c2c...
text-green-500(颜色:#48bb78;) text-green-600(颜色:#38a169;) text-green-700(颜色:#2f855a;) text-green-800(颜色:#276749;) text-green-900(颜色:#22543d;) ❝ 如果要将文本颜色更改为红色而不是绿色,可以像 text-red-500 一样更改它。如果要更改背景颜色,可以使用 bg-red-500 进行设置。
text-white:设置文本颜色为白色。 渐变背景: bg-gradient-to-r:设置渐变背景的方向为从左到右。 from-purple-500:设置渐变的起始颜色为紫色。 to-red-500:设置渐变的结束颜色为红色。 背景透明度: bg-opacity-50:设置背景颜色的透明度为 50%(半透明)。
islandZzz -- 文本颜色 islandZzz -- 边框颜色 islandZzz -- 背景颜色 islandZzz -- 背景颜色(75% 透明度) islandZzz -- 背景颜色(50% 透明度) 向右渐变(purple-500 👉 pink-500) 向左渐变(sky-500 👈 transparent)
text-inherit color: inherit; text-current color: currentColor; text-transparent color: transparent; text-black color: var(--color-black);/* #000 */ text-white color: var(--color-white);/* #fff */ text-red-50 color: var(--color-red-50);/* oklch(0.971 0.013 17.38) */ ...
.text-red { color: red; } // 无数个... 编码时在dom中直接写class名,快速实现样式 测试dom 而预置的class列表中的样式,有着一定的规律,开发者可以通过学习快速掌握,利用多个class在dom中的组合快速实现效果 ,是不是看起来有点熟悉?(死去的Bootstrap攻击我)...
而「原子化CSS」的本质是建立在设计系统的基础上。比如说在TailwindCSS中要定义颜色,需要通过类似text-red-50、text-red-100这样的类名,每个类名对应了设计系统中一种定义好的颜色: 颜色约定 字体大小、间距、布局等也是同样的道理: 字体大小约定 所以,如果公司采用了上述这套「对前端屏蔽设计系统」的开发流程,那么...
border-color: #ff4d4f; background: #ff4d4f; text-shadow: 0 -1px 0 rgb(0 0 0 / 12%); box-shadow: 0 2px #0000000b; } 以上是最常见、最常规的写法,被称作Semantic CSS(语义化 CSS)规范。在这种规范下,追求关注点分离,让结构与样式各司其职,使结构更具语义化。但这样一来,也面临着许多问题...