UnoCSS
UnoCSS: The instant on-demand Atomic CSS engine
CSS框架
2021-10-27 重新构想原子化 CSS
Atomic CSS
Presets
Uno
預設
目前等同於Wind Presets
一系列流行框架的超集
如Tailwind CSS和Windi CSS皆可使用
Attributify
樣式值改為寫在標籤的屬性裡
code:html
<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
Button
</button>
<button
bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
text="sm white"
font="mono light"
p="y-2 x-4"
border="2 rounded blue-200"
Button
</button>
預設提供可寫的屬性值為 ['bg', 'flex', 'grid', 'border', 'text', 'font', 'class', 'className', 'p', 'm', 'animate']
flex、grid 和 border 等屬性提供 ~ 用於宣告
border="~ red"
cherryful/unocss-ui: A simple Vue3 component library based on Unocss.
工具
CssToUnocss