[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$d-lsaUu0-g":3},{"id":4,"title":5,"author":6,"body":7,"created_at":81,"description":36,"extension":82,"featured_image":83,"meta":84,"navigation":85,"path":86,"published":85,"seo":87,"slug":13,"stem":88,"tags":89,"updated_at":81,"__hash__":92},"blog\u002Fblog\u002Fwhy-i-love-unocss.md","Why I love UnoCSS","faizi",{"type":8,"value":9,"toc":76},"minimark",[10,14,19,23,27,30,72],[11,12,5],"h1",{"id":13},"why-i-love-unocss",[15,16,18],"h2",{"id":17},"some-backstory","Some backstory",[20,21,22],"p",{},"I am a simple guy. I see something interesting; I try to learn more about it. I came across html, css in 2019; I learnt it. I saw javascript in 2020; I learnt it. I came accross tailwind; I immediately learnt it and used it before my colleagues even knew about it. Then 2 years ago, I came accross something which changed the way I think about CSS entirely. No, I’m not talking about Bootstrap. Even though I did learn it before Tailwind, I never exactly liked it. What i’m talking about is far more versatile, flexible and simple in implementation and usage. Ladies and gentlemen, I introduce you to UnoCSS.",[15,24,26],{"id":25},"lets-have-a-look","Let's have a look",[20,28,29],{},"UnoCSS has all of the features of TailwaindCSS….plus more. Take a look at the following code sample:",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-html shiki shiki-themes github-light github-dark","\u003Ca class=\"bg-stone-200 text-stone-900 px-4 py-2 rounded-lg\">Link\u003C\u002Fa>\n","html","",[38,39,40],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,64,67,69],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sVt8B","\u003C",[41,50,52],{"class":51},"s9eBZ","a",[41,54,56],{"class":55},"sScJk"," class",[41,58,59],{"class":47},"=",[41,61,63],{"class":62},"sZZnC","\"bg-stone-200 text-stone-900 px-4 py-2 rounded-lg\"",[41,65,66],{"class":47},">Link\u003C\u002F",[41,68,52],{"class":51},[41,70,71],{"class":47},">\n",[73,74,75],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":77,"depth":77,"links":78},2,[79,80],{"id":17,"depth":77,"text":18},{"id":25,"depth":77,"text":26},"2025-04-04","md","\u002Fwhy-i-love-unocss-banner.png.png",{},true,"\u002Fblog\u002Fwhy-i-love-unocss",{"title":5,"description":36},"blog\u002Fwhy-i-love-unocss",[90,91],"intro","welcome","g4puYJ3qKnX-N0k1WvdR309IWVzTp7xesKHKIc3yv1A"]