原子化 CSS

unocsstailwindcsshover

• unocss
• unocss: interactive
• tailwindcss: box-sizing
• tailwindcss: colors

colors 颜色列表

• 灰: slate gray zinc neutral stone
• 黄：orange amber yellow
• 绿：lime green emerald teal
• 蓝：cyan sky blue
• 紫：indigo violet purple
• 红 red fuchsia pink rose

常用属性

border 边框

• border-1
• border-solid
• border-gray-200
• border="1 solid gray-200"

padding margin space 间距

• p-1 padding: 0.25rem; /* 4px */

• p-2 padding: 0.5rem; /* 8px */

• p-1 px-1 py-1 pt-1 pr-1 pb-1 pl-1

• m-1 mx-1 my-1 mt-1 mr-1 mb-1 ml-1

• space-x-px space-x-1

• space-y-px space-y-1

width height 宽高

• w-1 w-2
• w-1/4 w-1/3 w-1/2 w-full

max min 宽高 最小/最大

• min-w-1 min-w-2
• min-w-1/4 min-w-1/3 min-w-1/2 min-w-full

size 同时设置宽高

• size-1 size-2

flex 布局

• flex
• flex-col
• flex-row
• flex-wrap
• flex-nowrap

justify 水平对齐

• justify-start 起点
• justify-end 终点
• justify-center 居中
• justify-between 两端
• justify-around 环绕均分

items 水平对齐

• items-start 起点
• items-end 终点
• items-center 居中
• items-baseline 文字基线对齐

text 文字

• text-left text-center text-right
• text-white text-black
• text-slate-50
• 溢出省略 truncate

underlie 下划线偏移

• underline-offset-4

font 字体

• 大小 text-xs text-sm text-base -lg -xl -2xl -3xl
• 加粗 font-thin -light -normal -medium -bold -extrabold -black
• 间距 tracking-tighter -tight -wide -wider -widest

line-height 行间距

• leading-3 -4 -5
• leading-tight -snug -normal -relaxed

hover 鼠标移动

• hover:bg-gray-500
• hover="bg-gray-500"

Transition 动画

(transition)[https://www.tailwindcss.cn/docs/transition-property]

Transforms

(Transforms)[https://www.tailwindcss.cn/docs/scale]

UI 示例代码

相关插件

vscode

• UnoCSS