UnoCSS

The instant on-demand atomic CSS engine.

開発者は@antfu

website

github

Tailwind CSSと同列の立ち位置な感じかmrsekut

2023/1/5現在v0.48.0

Reimagine Atomic CSS

UnoCSSを作った理由について

高速でかつ、カスタム定義を柔軟にできるようにするために、UnoCSSを作った

tailwind JITやWindi CSSよりも高速

Tailwind CSSは遅い、それを高速にしたのがWindi CSS

utility cssを定義してcssを自動生成するとどうしても不要な定義ができてしまう

TailwindではPurgeCSSでこれを取り除いている(prodのみ)

On-demand wayによって、速くなる

scanとgenerateのフェーズを入れ替える

しかし、Windi CSSはカスタム定義が柔軟でない

正規表現でカスタムルールを定義できる

javascript

rules: [

[/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],

[/^p-(\d+)$/, (match) => ({ padding: `${match[1] / 4}rem` })],

]

attributify modeがある

javascript

function App() {

return (

<button

bg="blue-400 hover:blue-500 dark:blue-500"

text="sm white"

font="mono light"

p="y-2 x-4"

border="2 rounded blue-200"

>

Hello World

</button>

);

}

propertyの感じでスタイルを指定できる

https://azukiazusa.dev/blog/atomic-css-engine-unocss/

>UnoCSS は Windi CSS、Tailwind CSS それと Twind に影響を受けた機能を持っています。

>UnoCSS の提供している機能は Windi CSS に近い感じですね。Tailwind CSS や Windi CSS と比較した点はカスタムルールの作りやすさという点があげられます。