[{"data":1,"prerenderedAt":777},["Reactive",2],{"content-query-fpkxhgKgVJ":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":772,"_id":773,"_source":774,"_file":775,"_extension":776},"/docs/add-ons/unocss","add-ons",false,"","UnoCSS Preset - Inkline","The Inkline UnoCSS preset brings the flexibility of UnoCSS, a powerful utility-first CSS engine, to your projects, allowing you to generate atomic Inkline CSS Utility Classes on the fly.",{"type":11,"children":12,"toc":764},"root",[13,22,29,44,50,55,62,68,74,80,85,107,114,268,286,292,299,304,324,582,588,600,619,671,677,688,707,759],{"type":14,"tag":15,"props":16,"children":18},"element","h1",{"id":17},"unocss-preset",[19],{"type":20,"value":21},"text","UnoCSS Preset",{"type":14,"tag":23,"props":24,"children":26},"h2",{"id":25},"this-preset-brings-the-flexibility-of-unocss-a-powerful-utility-first-css-engine-to-your-projects-allowing-you-to-generate-atomic-inkline-css-utility-classes-on-the-fly",[27],{"type":20,"value":28},"This preset brings the flexibility of UnoCSS, a powerful utility-first CSS engine, to your projects, allowing you to generate atomic Inkline CSS Utility Classes on the fly.",{"type":14,"tag":30,"props":31,"children":32},"p",{},[33,42],{"type":14,"tag":34,"props":35,"children":39},"a",{"href":36,"rel":37},"https://unocss.dev/",[38],"nofollow",[40],{"type":20,"value":41},"UnoCSS",{"type":20,"value":43}," has made a name for itself in the realm of utility-first CSS libraries, 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":14,"tag":23,"props":45,"children":47},{"id":46},"installation",[48],{"type":20,"value":49},"Installation",{"type":14,"tag":30,"props":51,"children":52},{},[53],{"type":20,"value":54},"Follow the installation guide for your specific development environment to get started:",{"type":14,"tag":56,"props":57,"children":61},"content-link-card",{"icon":58,"title":59,"to":60},"logos:vitejs","UnoCSS Preset Installation for Vite.js","/docs/add-ons/unocss/vite",[],{"type":14,"tag":56,"props":63,"children":67},{"icon":64,"title":65,"to":66},"logos:nuxt-icon","UnoCSS Preset Installation for Nuxt","/docs/add-ons/unocss/nuxt",[],{"type":14,"tag":56,"props":69,"children":73},{"icon":70,"title":71,"to":72},"logos:webpack","UnoCSS Preset Installation for Webpack.js","/docs/add-ons/unocss/webpack",[],{"type":14,"tag":23,"props":75,"children":77},{"id":76},"usage",[78],{"type":20,"value":79},"Usage",{"type":14,"tag":30,"props":81,"children":82},{},[83],{"type":20,"value":84},"With the Inkline preset for UnoCSS, you can create CSS utility classes in the following format:",{"type":14,"tag":86,"props":87,"children":88},"ul",{},[89,99],{"type":14,"tag":90,"props":91,"children":92},"li",{},[93],{"type":14,"tag":94,"props":95,"children":96},"code-inline",{},[97],{"type":20,"value":98},"_{property}:{value}",{"type":14,"tag":90,"props":100,"children":101},{},[102],{"type":14,"tag":94,"props":103,"children":104},{},[105],{"type":20,"value":106},"_{modifier}:{property}:{value}",{"type":14,"tag":108,"props":109,"children":111},"h3",{"id":110},"examples",[112],{"type":20,"value":113},"Examples",{"type":14,"tag":115,"props":116,"children":121},"code",{"className":117,"code":119,"language":120,"meta":7},[118],"language-html","\u003Cdiv class=\"_color:red\">This div has red colored text.\u003C/div>\n\u003Cdiv class=\"_background:primary\">This div has a primary background color.\u003C/div>\n\u003Cdiv class=\"_xs:margin-top:0\">This div has a margin-top of 0 when on extra-small screens.\u003C/div>\n","html",[122],{"type":14,"tag":123,"props":124,"children":125},"pre",{},[126],{"type":14,"tag":115,"props":127,"children":128},{"__ignoreMap":7},[129,183,225],{"type":14,"tag":130,"props":131,"children":134},"span",{"class":132,"line":133},"line",1,[135,141,147,152,158,163,169,174,178],{"type":14,"tag":130,"props":136,"children":138},{"class":137},"ct-553616",[139],{"type":20,"value":140},"\u003C",{"type":14,"tag":130,"props":142,"children":144},{"class":143},"ct-914029",[145],{"type":20,"value":146},"div",{"type":14,"tag":130,"props":148,"children":149},{"class":137},[150],{"type":20,"value":151}," ",{"type":14,"tag":130,"props":153,"children":155},{"class":154},"ct-762058",[156],{"type":20,"value":157},"class",{"type":14,"tag":130,"props":159,"children":160},{"class":137},[161],{"type":20,"value":162},"=",{"type":14,"tag":130,"props":164,"children":166},{"class":165},"ct-952708",[167],{"type":20,"value":168},"\"_color:red\"",{"type":14,"tag":130,"props":170,"children":171},{"class":137},[172],{"type":20,"value":173},">This div has red colored text.\u003C/",{"type":14,"tag":130,"props":175,"children":176},{"class":143},[177],{"type":20,"value":146},{"type":14,"tag":130,"props":179,"children":180},{"class":137},[181],{"type":20,"value":182},">\n",{"type":14,"tag":130,"props":184,"children":186},{"class":132,"line":185},2,[187,191,195,199,203,207,212,217,221],{"type":14,"tag":130,"props":188,"children":189},{"class":137},[190],{"type":20,"value":140},{"type":14,"tag":130,"props":192,"children":193},{"class":143},[194],{"type":20,"value":146},{"type":14,"tag":130,"props":196,"children":197},{"class":137},[198],{"type":20,"value":151},{"type":14,"tag":130,"props":200,"children":201},{"class":154},[202],{"type":20,"value":157},{"type":14,"tag":130,"props":204,"children":205},{"class":137},[206],{"type":20,"value":162},{"type":14,"tag":130,"props":208,"children":209},{"class":165},[210],{"type":20,"value":211},"\"_background:primary\"",{"type":14,"tag":130,"props":213,"children":214},{"class":137},[215],{"type":20,"value":216},">This div has a primary background color.\u003C/",{"type":14,"tag":130,"props":218,"children":219},{"class":143},[220],{"type":20,"value":146},{"type":14,"tag":130,"props":222,"children":223},{"class":137},[224],{"type":20,"value":182},{"type":14,"tag":130,"props":226,"children":228},{"class":132,"line":227},3,[229,233,237,241,245,249,254,259,263],{"type":14,"tag":130,"props":230,"children":231},{"class":137},[232],{"type":20,"value":140},{"type":14,"tag":130,"props":234,"children":235},{"class":143},[236],{"type":20,"value":146},{"type":14,"tag":130,"props":238,"children":239},{"class":137},[240],{"type":20,"value":151},{"type":14,"tag":130,"props":242,"children":243},{"class":154},[244],{"type":20,"value":157},{"type":14,"tag":130,"props":246,"children":247},{"class":137},[248],{"type":20,"value":162},{"type":14,"tag":130,"props":250,"children":251},{"class":165},[252],{"type":20,"value":253},"\"_xs:margin-top:0\"",{"type":14,"tag":130,"props":255,"children":256},{"class":137},[257],{"type":20,"value":258},">This div has a margin-top of 0 when on extra-small screens.\u003C/",{"type":14,"tag":130,"props":260,"children":261},{"class":143},[262],{"type":20,"value":146},{"type":14,"tag":130,"props":264,"children":265},{"class":137},[266],{"type":20,"value":267},">",{"type":14,"tag":30,"props":269,"children":270},{},[271,277,279,284],{"type":14,"tag":272,"props":273,"children":274},"strong",{},[275],{"type":20,"value":276},"Note:",{"type":20,"value":278}," Ensure the values used correspond to your theme configuration in ",{"type":14,"tag":94,"props":280,"children":281},{},[282],{"type":20,"value":283},"inkline.config.ts",{"type":20,"value":285},".",{"type":14,"tag":108,"props":287,"children":289},{"id":288},"variants",[290],{"type":20,"value":291},"Variants",{"type":14,"tag":293,"props":294,"children":296},"h4",{"id":295},"breakpoint-variant",[297],{"type":20,"value":298},"Breakpoint Variant",{"type":14,"tag":30,"props":300,"children":301},{},[302],{"type":20,"value":303},"You can apply breakpoint modifiers to any utility class by prefixing the breakpoint name to the class name. The following breakpoints are available:",{"type":14,"tag":115,"props":305,"children":309},{"className":306,"code":308},[307],"language-undefined","_{breakpoint}:{property}:{value}\n",[310],{"type":14,"tag":123,"props":311,"children":312},{},[313],{"type":14,"tag":115,"props":314,"children":315},{"__ignoreMap":7},[316],{"type":14,"tag":130,"props":317,"children":318},{"class":132,"line":133},[319],{"type":14,"tag":130,"props":320,"children":321},{},[322],{"type":20,"value":323},"_{breakpoint}:{property}:{value}",{"type":14,"tag":115,"props":325,"children":328},{"className":326,"code":327,"language":120,"meta":7},[118],"\u003Cdiv class=\"_xs:margin-top:0\">This div has a margin-top of 0 when on extra-small screens.\u003C/div>\n\u003Cdiv class=\"_sm:margin-top:0\">This div has a margin-top of 0 when on small screens.\u003C/div>\n\u003Cdiv class=\"_md:margin-top:0\">This div has a margin-top of 0 when on medium screens.\u003C/div>\n\u003Cdiv class=\"_lg:margin-top:0\">This div has a margin-top of 0 when on large screens.\u003C/div>\n\u003Cdiv class=\"_xl:margin-top:0\">This div has a margin-top of 0 when on extra-large screens.\u003C/div>\n\u003Cdiv class=\"_2xl:margin-top:0\">This div has a margin-top of 0 when on extra-extra-large screens.\u003C/div>\n",[329],{"type":14,"tag":123,"props":330,"children":331},{},[332],{"type":14,"tag":115,"props":333,"children":334},{"__ignoreMap":7},[335,374,415,456,498,540],{"type":14,"tag":130,"props":336,"children":337},{"class":132,"line":133},[338,342,346,350,354,358,362,366,370],{"type":14,"tag":130,"props":339,"children":340},{"class":137},[341],{"type":20,"value":140},{"type":14,"tag":130,"props":343,"children":344},{"class":143},[345],{"type":20,"value":146},{"type":14,"tag":130,"props":347,"children":348},{"class":137},[349],{"type":20,"value":151},{"type":14,"tag":130,"props":351,"children":352},{"class":154},[353],{"type":20,"value":157},{"type":14,"tag":130,"props":355,"children":356},{"class":137},[357],{"type":20,"value":162},{"type":14,"tag":130,"props":359,"children":360},{"class":165},[361],{"type":20,"value":253},{"type":14,"tag":130,"props":363,"children":364},{"class":137},[365],{"type":20,"value":258},{"type":14,"tag":130,"props":367,"children":368},{"class":143},[369],{"type":20,"value":146},{"type":14,"tag":130,"props":371,"children":372},{"class":137},[373],{"type":20,"value":182},{"type":14,"tag":130,"props":375,"children":376},{"class":132,"line":185},[377,381,385,389,393,397,402,407,411],{"type":14,"tag":130,"props":378,"children":379},{"class":137},[380],{"type":20,"value":140},{"type":14,"tag":130,"props":382,"children":383},{"class":143},[384],{"type":20,"value":146},{"type":14,"tag":130,"props":386,"children":387},{"class":137},[388],{"type":20,"value":151},{"type":14,"tag":130,"props":390,"children":391},{"class":154},[392],{"type":20,"value":157},{"type":14,"tag":130,"props":394,"children":395},{"class":137},[396],{"type":20,"value":162},{"type":14,"tag":130,"props":398,"children":399},{"class":165},[400],{"type":20,"value":401},"\"_sm:margin-top:0\"",{"type":14,"tag":130,"props":403,"children":404},{"class":137},[405],{"type":20,"value":406},">This div has a margin-top of 0 when on small screens.\u003C/",{"type":14,"tag":130,"props":408,"children":409},{"class":143},[410],{"type":20,"value":146},{"type":14,"tag":130,"props":412,"children":413},{"class":137},[414],{"type":20,"value":182},{"type":14,"tag":130,"props":416,"children":417},{"class":132,"line":227},[418,422,426,430,434,438,443,448,452],{"type":14,"tag":130,"props":419,"children":420},{"class":137},[421],{"type":20,"value":140},{"type":14,"tag":130,"props":423,"children":424},{"class":143},[425],{"type":20,"value":146},{"type":14,"tag":130,"props":427,"children":428},{"class":137},[429],{"type":20,"value":151},{"type":14,"tag":130,"props":431,"children":432},{"class":154},[433],{"type":20,"value":157},{"type":14,"tag":130,"props":435,"children":436},{"class":137},[437],{"type":20,"value":162},{"type":14,"tag":130,"props":439,"children":440},{"class":165},[441],{"type":20,"value":442},"\"_md:margin-top:0\"",{"type":14,"tag":130,"props":444,"children":445},{"class":137},[446],{"type":20,"value":447},">This div has a margin-top of 0 when on medium screens.\u003C/",{"type":14,"tag":130,"props":449,"children":450},{"class":143},[451],{"type":20,"value":146},{"type":14,"tag":130,"props":453,"children":454},{"class":137},[455],{"type":20,"value":182},{"type":14,"tag":130,"props":457,"children":459},{"class":132,"line":458},4,[460,464,468,472,476,480,485,490,494],{"type":14,"tag":130,"props":461,"children":462},{"class":137},[463],{"type":20,"value":140},{"type":14,"tag":130,"props":465,"children":466},{"class":143},[467],{"type":20,"value":146},{"type":14,"tag":130,"props":469,"children":470},{"class":137},[471],{"type":20,"value":151},{"type":14,"tag":130,"props":473,"children":474},{"class":154},[475],{"type":20,"value":157},{"type":14,"tag":130,"props":477,"children":478},{"class":137},[479],{"type":20,"value":162},{"type":14,"tag":130,"props":481,"children":482},{"class":165},[483],{"type":20,"value":484},"\"_lg:margin-top:0\"",{"type":14,"tag":130,"props":486,"children":487},{"class":137},[488],{"type":20,"value":489},">This div has a margin-top of 0 when on large screens.\u003C/",{"type":14,"tag":130,"props":491,"children":492},{"class":143},[493],{"type":20,"value":146},{"type":14,"tag":130,"props":495,"children":496},{"class":137},[497],{"type":20,"value":182},{"type":14,"tag":130,"props":499,"children":501},{"class":132,"line":500},5,[502,506,510,514,518,522,527,532,536],{"type":14,"tag":130,"props":503,"children":504},{"class":137},[505],{"type":20,"value":140},{"type":14,"tag":130,"props":507,"children":508},{"class":143},[509],{"type":20,"value":146},{"type":14,"tag":130,"props":511,"children":512},{"class":137},[513],{"type":20,"value":151},{"type":14,"tag":130,"props":515,"children":516},{"class":154},[517],{"type":20,"value":157},{"type":14,"tag":130,"props":519,"children":520},{"class":137},[521],{"type":20,"value":162},{"type":14,"tag":130,"props":523,"children":524},{"class":165},[525],{"type":20,"value":526},"\"_xl:margin-top:0\"",{"type":14,"tag":130,"props":528,"children":529},{"class":137},[530],{"type":20,"value":531},">This div has a margin-top of 0 when on extra-large screens.\u003C/",{"type":14,"tag":130,"props":533,"children":534},{"class":143},[535],{"type":20,"value":146},{"type":14,"tag":130,"props":537,"children":538},{"class":137},[539],{"type":20,"value":182},{"type":14,"tag":130,"props":541,"children":543},{"class":132,"line":542},6,[544,548,552,556,560,564,569,574,578],{"type":14,"tag":130,"props":545,"children":546},{"class":137},[547],{"type":20,"value":140},{"type":14,"tag":130,"props":549,"children":550},{"class":143},[551],{"type":20,"value":146},{"type":14,"tag":130,"props":553,"children":554},{"class":137},[555],{"type":20,"value":151},{"type":14,"tag":130,"props":557,"children":558},{"class":154},[559],{"type":20,"value":157},{"type":14,"tag":130,"props":561,"children":562},{"class":137},[563],{"type":20,"value":162},{"type":14,"tag":130,"props":565,"children":566},{"class":165},[567],{"type":20,"value":568},"\"_2xl:margin-top:0\"",{"type":14,"tag":130,"props":570,"children":571},{"class":137},[572],{"type":20,"value":573},">This div has a margin-top of 0 when on extra-extra-large screens.\u003C/",{"type":14,"tag":130,"props":575,"children":576},{"class":143},[577],{"type":20,"value":146},{"type":14,"tag":130,"props":579,"children":580},{"class":137},[581],{"type":20,"value":267},{"type":14,"tag":293,"props":583,"children":585},{"id":584},"important-variant",[586],{"type":20,"value":587},"Important Variant",{"type":14,"tag":30,"props":589,"children":590},{},[591,593,598],{"type":20,"value":592},"You can apply the important modifiers to any utility class by suffixing the class with an exclamation mark ",{"type":14,"tag":94,"props":594,"children":595},{},[596],{"type":20,"value":597},"!",{"type":20,"value":599},":",{"type":14,"tag":115,"props":601,"children":604},{"className":602,"code":603},[307],"_{property}:{value}!\n",[605],{"type":14,"tag":123,"props":606,"children":607},{},[608],{"type":14,"tag":115,"props":609,"children":610},{"__ignoreMap":7},[611],{"type":14,"tag":130,"props":612,"children":613},{"class":132,"line":133},[614],{"type":14,"tag":130,"props":615,"children":616},{},[617],{"type":20,"value":618},"_{property}:{value}!",{"type":14,"tag":115,"props":620,"children":623},{"className":621,"code":622,"language":120,"meta":7},[118],"\u003Cdiv class=\"_margin-top:0!\">This div has a margin-top of 0 with an !important marker.\u003C/div>\n",[624],{"type":14,"tag":123,"props":625,"children":626},{},[627],{"type":14,"tag":115,"props":628,"children":629},{"__ignoreMap":7},[630],{"type":14,"tag":130,"props":631,"children":632},{"class":132,"line":133},[633,637,641,645,649,653,658,663,667],{"type":14,"tag":130,"props":634,"children":635},{"class":137},[636],{"type":20,"value":140},{"type":14,"tag":130,"props":638,"children":639},{"class":143},[640],{"type":20,"value":146},{"type":14,"tag":130,"props":642,"children":643},{"class":137},[644],{"type":20,"value":151},{"type":14,"tag":130,"props":646,"children":647},{"class":154},[648],{"type":20,"value":157},{"type":14,"tag":130,"props":650,"children":651},{"class":137},[652],{"type":20,"value":162},{"type":14,"tag":130,"props":654,"children":655},{"class":165},[656],{"type":20,"value":657},"\"_margin-top:0!\"",{"type":14,"tag":130,"props":659,"children":660},{"class":137},[661],{"type":20,"value":662},">This div has a margin-top of 0 with an !important marker.\u003C/",{"type":14,"tag":130,"props":664,"children":665},{"class":143},[666],{"type":20,"value":146},{"type":14,"tag":130,"props":668,"children":669},{"class":137},[670],{"type":20,"value":267},{"type":14,"tag":293,"props":672,"children":674},{"id":673},"print-variant",[675],{"type":20,"value":676},"Print Variant",{"type":14,"tag":30,"props":678,"children":679},{},[680,682,687],{"type":20,"value":681},"You can apply the print media modifier to any utility class by prefixing the class with ",{"type":14,"tag":94,"props":683,"children":684},{},[685],{"type":20,"value":686},"print:",{"type":20,"value":599},{"type":14,"tag":115,"props":689,"children":692},{"className":690,"code":691},[307],"_print:{property}:{value}\n",[693],{"type":14,"tag":123,"props":694,"children":695},{},[696],{"type":14,"tag":115,"props":697,"children":698},{"__ignoreMap":7},[699],{"type":14,"tag":130,"props":700,"children":701},{"class":132,"line":133},[702],{"type":14,"tag":130,"props":703,"children":704},{},[705],{"type":20,"value":706},"_print:{property}:{value}",{"type":14,"tag":115,"props":708,"children":711},{"className":709,"code":710,"language":120,"meta":7},[118],"\u003Cdiv class=\"_print:margin-top:0\">This div has a margin-top of 0 that only applies in printing mode.\u003C/div>\n",[712],{"type":14,"tag":123,"props":713,"children":714},{},[715],{"type":14,"tag":115,"props":716,"children":717},{"__ignoreMap":7},[718],{"type":14,"tag":130,"props":719,"children":720},{"class":132,"line":133},[721,725,729,733,737,741,746,751,755],{"type":14,"tag":130,"props":722,"children":723},{"class":137},[724],{"type":20,"value":140},{"type":14,"tag":130,"props":726,"children":727},{"class":143},[728],{"type":20,"value":146},{"type":14,"tag":130,"props":730,"children":731},{"class":137},[732],{"type":20,"value":151},{"type":14,"tag":130,"props":734,"children":735},{"class":154},[736],{"type":20,"value":157},{"type":14,"tag":130,"props":738,"children":739},{"class":137},[740],{"type":20,"value":162},{"type":14,"tag":130,"props":742,"children":743},{"class":165},[744],{"type":20,"value":745},"\"_print:margin-top:0\"",{"type":14,"tag":130,"props":747,"children":748},{"class":137},[749],{"type":20,"value":750},">This div has a margin-top of 0 that only applies in printing mode.\u003C/",{"type":14,"tag":130,"props":752,"children":753},{"class":143},[754],{"type":20,"value":146},{"type":14,"tag":130,"props":756,"children":757},{"class":137},[758],{"type":20,"value":267},{"type":14,"tag":760,"children":761},"style",[762],{"type":20,"value":763},".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":185,"depth":185,"links":765},[766,767,768],{"id":25,"depth":185,"text":28},{"id":46,"depth":185,"text":49},{"id":76,"depth":185,"text":79,"children":769},[770,771],{"id":110,"depth":227,"text":113},{"id":288,"depth":227,"text":291},"markdown","content:docs:add-ons:unocss:index.md","content","docs/add-ons/unocss/index.md","md",1794582261992]