[{"data":1,"prerenderedAt":286},["Reactive",2],{"content-query-atHmg0JnF0":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"image":10,"date":15,"slug":16,"tags":17,"featured":19,"layout":20,"body":21,"_type":281,"_id":282,"_source":283,"_file":284,"_extension":285},"/blog/2023-06-06/inkline-preset-for-unocss","2023-06-06",false,"","On-demand CSS Utility Classes with UnoCSS - Inkline","Discover the Inkline Preset for UnoCSS, a world where you can write custom CSS utility classes on the fly, without being limited by pre-defined stylesheets. You can now create and apply utility classes right where you need them!",{"src":11,"alt":12,"width":13,"height":14},"/assets/images/blog/inkline-preset-for-unocss.webp","On-demand CSS Utility Classes with UnoCSS",1280,600,"2023-06-06T00:00:00.000Z","inkline-preset-for-unocss",[18],"news",true,"blog-article",{"type":22,"children":23,"toc":279},"root",[24,33,50,60,65,134,204,225,257,269,274],{"type":25,"tag":26,"props":27,"children":29},"element","h1",{"id":28},"on-demand-inkline-css-utility-classes-with-unocss",[30],{"type":31,"value":32},"text","On-demand Inkline CSS Utility Classes with UnoCSS",{"type":25,"tag":34,"props":35,"children":36},"p",{},[37,39,48],{"type":31,"value":38},"Hello, everyone! I'm thrilled to share an exciting new update with you: the Inkline Preset for ",{"type":25,"tag":40,"props":41,"children":45},"a",{"href":42,"rel":43},"https://unocss.dev/",[44],"nofollow",[46],{"type":31,"value":47},"UnoCSS",{"type":31,"value":49},"! You can now create and apply utility classes instantly, right where you need them - directly in your markup.",{"type":25,"tag":34,"props":51,"children":52},{},[53,58],{"type":25,"tag":40,"props":54,"children":56},{"href":42,"rel":55},[44],[57],{"type":31,"value":47},{"type":31,"value":59}," has made a name for itself in the realm of utility-first CSS libraries as a strong competitor to Tailwind and Windi, and we at Inkline are all for it. With UnoCSS's unique approach to CSS utility classes and Inkline's focus on delivering a seamless Vue.js Design System, this is an integration that packs a punch!",{"type":25,"tag":34,"props":61,"children":62},{},[63],{"type":31,"value":64},"What I find particularly exciting about this integration is the added level of control and speed it brings. It allows for on-the-go styling that matches your Design System configuration and CSS Variables, as simple as using the format:",{"type":25,"tag":66,"props":67,"children":72},"code",{"className":68,"code":70,"language":71,"meta":7},[69],"language-html","\u003Cdiv class=\"_property:value _modifier:property:value\">\u003C/div>\n","html",[73],{"type":25,"tag":74,"props":75,"children":76},"pre",{},[77],{"type":25,"tag":66,"props":78,"children":79},{"__ignoreMap":7},[80],{"type":25,"tag":81,"props":82,"children":85},"span",{"class":83,"line":84},"line",1,[86,92,98,103,109,114,120,125,129],{"type":25,"tag":81,"props":87,"children":89},{"class":88},"ct-553616",[90],{"type":31,"value":91},"\u003C",{"type":25,"tag":81,"props":93,"children":95},{"class":94},"ct-914029",[96],{"type":31,"value":97},"div",{"type":25,"tag":81,"props":99,"children":100},{"class":88},[101],{"type":31,"value":102}," ",{"type":25,"tag":81,"props":104,"children":106},{"class":105},"ct-762058",[107],{"type":31,"value":108},"class",{"type":25,"tag":81,"props":110,"children":111},{"class":88},[112],{"type":31,"value":113},"=",{"type":25,"tag":81,"props":115,"children":117},{"class":116},"ct-952708",[118],{"type":31,"value":119},"\"_property:value _modifier:property:value\"",{"type":25,"tag":81,"props":121,"children":122},{"class":88},[123],{"type":31,"value":124},">\u003C/",{"type":25,"tag":81,"props":126,"children":127},{"class":94},[128],{"type":31,"value":97},{"type":25,"tag":81,"props":130,"children":131},{"class":88},[132],{"type":31,"value":133},">",{"type":25,"tag":66,"props":135,"children":138},{"className":136,"code":137,"language":71,"meta":7},[69],"\u003Cdiv class=\"_display:flex _justify-content:center _background:primary _color:white\">\n    I'm a centered blue flex div with white text.\n\u003C/div>\n",[139],{"type":25,"tag":74,"props":140,"children":141},{},[142],{"type":25,"tag":66,"props":143,"children":144},{"__ignoreMap":7},[145,178,187],{"type":25,"tag":81,"props":146,"children":147},{"class":83,"line":84},[148,152,156,160,164,168,173],{"type":25,"tag":81,"props":149,"children":150},{"class":88},[151],{"type":31,"value":91},{"type":25,"tag":81,"props":153,"children":154},{"class":94},[155],{"type":31,"value":97},{"type":25,"tag":81,"props":157,"children":158},{"class":88},[159],{"type":31,"value":102},{"type":25,"tag":81,"props":161,"children":162},{"class":105},[163],{"type":31,"value":108},{"type":25,"tag":81,"props":165,"children":166},{"class":88},[167],{"type":31,"value":113},{"type":25,"tag":81,"props":169,"children":170},{"class":116},[171],{"type":31,"value":172},"\"_display:flex _justify-content:center _background:primary _color:white\"",{"type":25,"tag":81,"props":174,"children":175},{"class":88},[176],{"type":31,"value":177},">\n",{"type":25,"tag":81,"props":179,"children":181},{"class":83,"line":180},2,[182],{"type":25,"tag":81,"props":183,"children":184},{"class":88},[185],{"type":31,"value":186},"    I'm a centered blue flex div with white text.\n",{"type":25,"tag":81,"props":188,"children":190},{"class":83,"line":189},3,[191,196,200],{"type":25,"tag":81,"props":192,"children":193},{"class":88},[194],{"type":31,"value":195},"\u003C/",{"type":25,"tag":81,"props":197,"children":198},{"class":94},[199],{"type":31,"value":97},{"type":25,"tag":81,"props":201,"children":202},{"class":88},[203],{"type":31,"value":133},{"type":25,"tag":34,"props":205,"children":206},{},[207,209,215,217,223],{"type":31,"value":208},"Let's dive into how you can ",{"type":25,"tag":40,"props":210,"children":212},{"href":211},"/docs/add-ons/unocss",[213],{"type":31,"value":214},"get started and learn more",{"type":31,"value":216},". You can find a new dedicated ",{"type":25,"tag":218,"props":219,"children":220},"em",{},[221],{"type":31,"value":222},"Add-ons",{"type":31,"value":224}," section, with detailed installation guides for different setups:",{"type":25,"tag":226,"props":227,"children":228},"ul",{},[229,239,248],{"type":25,"tag":230,"props":231,"children":232},"li",{},[233],{"type":25,"tag":40,"props":234,"children":236},{"href":235},"/docs/add-ons/unocss/vite",[237],{"type":31,"value":238},"Inkline Preset for UnoCSS with Vite",{"type":25,"tag":230,"props":240,"children":241},{},[242],{"type":25,"tag":40,"props":243,"children":245},{"href":244},"/docs/add-ons/unocss/nuxt",[246],{"type":31,"value":247},"Inkline Preset for UnoCSS with Nuxt.js",{"type":25,"tag":230,"props":249,"children":250},{},[251],{"type":25,"tag":40,"props":252,"children":254},{"href":253},"/docs/add-ons/unocss/webpack",[255],{"type":31,"value":256},"Inkline Preset for UnoCSS with Webpack",{"type":25,"tag":34,"props":258,"children":259},{},[260,262,267],{"type":31,"value":261},"The power of Inkline combined with the flexibility of ",{"type":25,"tag":40,"props":263,"children":265},{"href":42,"rel":264},[44],[266],{"type":31,"value":47},{"type":31,"value":268}," brings you unparalleled development speed for your application. It opens up a world where you can write custom CSS utility classes on the fly, without being limited by pre-defined stylesheets.",{"type":25,"tag":34,"props":270,"children":271},{},[272],{"type":31,"value":273},"Happy coding!",{"type":25,"tag":275,"children":276},"style",[277],{"type":31,"value":278},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}",{"title":7,"searchDepth":180,"depth":180,"links":280},[],"markdown","content:blog:2023-06-06:inkline-preset-for-unocss.md","content","blog/2023-06-06/inkline-preset-for-unocss.md","md",1794582262156]