UnoCSS - mrsekut-p

UnoCSS

https://gyazo.com/44cbeee67b581e7768d47e5ac4755f98

The instant on-demand atomic CSS engine.

開発者は@antfu

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

2023/1/5現在v0.48.0

UnoCSSを作った理由について

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

tailwind JITやWindi CSSよりも高速

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

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

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

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

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

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

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

code:js

rules: [

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

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

]

code:js

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の感じでスタイルを指定できる

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

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