[{"data":1,"prerenderedAt":596},["ShallowReactive",2],{"navigation_docs":3,"-guide-linting":52,"-guide-linting-surround":591},[4,21,42],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Guide","i-lucide-book-open","\u002Fguide","2.guide",[27,32,37],{"title":28,"path":29,"stem":30,"icon":31},"Writing blocks","\u002Fguide\u002Fwriting-blocks","2.guide\u002F1.writing-blocks","i-lucide-square-pen",{"title":33,"path":34,"stem":35,"icon":36},"Type checking","\u002Fguide\u002Ftype-checking","2.guide\u002F2.type-checking","i-lucide-shield-check",{"title":38,"path":39,"stem":40,"icon":41},"Linting","\u002Fguide\u002Flinting","2.guide\u002F3.linting","i-lucide-list-checks",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"API","i-lucide-code","\u002Fapi","3.api",[48],{"title":49,"path":50,"stem":51,"icon":44},"Core","\u002Fapi\u002Fcore","3.api\u002F1.core",{"id":53,"title":38,"body":54,"description":582,"extension":583,"links":584,"meta":585,"navigation":586,"path":39,"seo":587,"stem":40,"__hash__":590},"docs\u002F2.guide\u002F3.linting.md",{"type":55,"value":56,"toc":577},"minimark",[57,81,86,105,329,340,344,351,371,452,460,464,485,573],[58,59,60,61,69,70,75,76,80],"p",{},"Tailwind ESLint rules—such as those in\n",[62,63,68],"a",{"href":64,"rel":65,"target":67},"https:\u002F\u002Fgithub.com\u002Fschoero\u002Feslint-plugin-better-tailwindcss",[66],"nofollow","_blank","eslint-plugin-better-tailwindcss","\nor ",[62,71,74],{"href":72,"rel":73,"target":67},"https:\u002F\u002Fgithub.com\u002Ffrancoismassart\u002Feslint-plugin-tailwindcss",[66],"eslint-plugin-tailwindcss","—validate\nand sort utility classes in code. The ESLint integration passes each entry in\nthe ",[77,78,79],"code",{},"\u003Ctailwind>"," block through your configured rules and writes reports and\nauto-fixes directly back into the YAML.",[82,83,85],"h2",{"id":84},"setup","Setup",[58,87,88,89,92,93,96,97,96,101,104],{},"Requires ESLint 9 or 10 with flat config (",[77,90,91],{},"eslint.config.js","). Spread\n",[77,94,95],{},"tailwindBlock.configs.recommended"," ",[98,99,100],"strong",{},"after",[77,102,103],{},"eslint-plugin-vue",", then\nadd your Tailwind rules:",[106,107,112],"pre",{"className":108,"code":109,"filename":91,"language":110,"meta":111,"style":111},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import betterTailwindcss from 'eslint-plugin-better-tailwindcss'\nimport pluginVue from 'eslint-plugin-vue'\nimport tailwindBlock from 'vue-tailwind-block\u002Feslint'\n\nexport default [\n  ...pluginVue.configs['flat\u002Frecommended'],\n  ...tailwindBlock.configs.recommended,\n  {\n    ...betterTailwindcss.configs.stylistic,\n    settings: {\n      'better-tailwindcss': { entryPoint: 'src\u002Fstyle.css' },\n    },\n  },\n]\n","js","",[77,113,114,140,156,173,180,192,221,241,247,267,280,311,317,323],{"__ignoreMap":111},[115,116,119,123,127,130,134,137],"span",{"class":117,"line":118},"line",1,[115,120,122],{"class":121},"s7zQu","import",[115,124,126],{"class":125},"sTEyZ"," betterTailwindcss ",[115,128,129],{"class":121},"from",[115,131,133],{"class":132},"sMK4o"," '",[115,135,68],{"class":136},"sfazB",[115,138,139],{"class":132},"'\n",[115,141,143,145,148,150,152,154],{"class":117,"line":142},2,[115,144,122],{"class":121},[115,146,147],{"class":125}," pluginVue ",[115,149,129],{"class":121},[115,151,133],{"class":132},[115,153,103],{"class":136},[115,155,139],{"class":132},[115,157,159,161,164,166,168,171],{"class":117,"line":158},3,[115,160,122],{"class":121},[115,162,163],{"class":125}," tailwindBlock ",[115,165,129],{"class":121},[115,167,133],{"class":132},[115,169,170],{"class":136},"vue-tailwind-block\u002Feslint",[115,172,139],{"class":132},[115,174,176],{"class":117,"line":175},4,[115,177,179],{"emptyLinePlaceholder":178},true,"\n",[115,181,183,186,189],{"class":117,"line":182},5,[115,184,185],{"class":121},"export",[115,187,188],{"class":121}," default",[115,190,191],{"class":125}," [\n",[115,193,195,198,201,204,207,210,213,215,218],{"class":117,"line":194},6,[115,196,197],{"class":132},"  ...",[115,199,200],{"class":125},"pluginVue",[115,202,203],{"class":132},".",[115,205,206],{"class":125},"configs[",[115,208,209],{"class":132},"'",[115,211,212],{"class":136},"flat\u002Frecommended",[115,214,209],{"class":132},[115,216,217],{"class":125},"]",[115,219,220],{"class":132},",\n",[115,222,224,226,229,231,234,236,239],{"class":117,"line":223},7,[115,225,197],{"class":132},[115,227,228],{"class":125},"tailwindBlock",[115,230,203],{"class":132},[115,232,233],{"class":125},"configs",[115,235,203],{"class":132},[115,237,238],{"class":125},"recommended",[115,240,220],{"class":132},[115,242,244],{"class":117,"line":243},8,[115,245,246],{"class":132},"  {\n",[115,248,250,253,256,258,260,262,265],{"class":117,"line":249},9,[115,251,252],{"class":132},"    ...",[115,254,255],{"class":125},"betterTailwindcss",[115,257,203],{"class":132},[115,259,233],{"class":125},[115,261,203],{"class":132},[115,263,264],{"class":125},"stylistic",[115,266,220],{"class":132},[115,268,270,274,277],{"class":117,"line":269},10,[115,271,273],{"class":272},"swJcz","    settings",[115,275,276],{"class":132},":",[115,278,279],{"class":132}," {\n",[115,281,283,286,289,291,293,296,299,301,303,306,308],{"class":117,"line":282},11,[115,284,285],{"class":132},"      '",[115,287,288],{"class":272},"better-tailwindcss",[115,290,209],{"class":132},[115,292,276],{"class":132},[115,294,295],{"class":132}," {",[115,297,298],{"class":272}," entryPoint",[115,300,276],{"class":132},[115,302,133],{"class":132},[115,304,305],{"class":136},"src\u002Fstyle.css",[115,307,209],{"class":132},[115,309,310],{"class":132}," },\n",[115,312,314],{"class":117,"line":313},12,[115,315,316],{"class":132},"    },\n",[115,318,320],{"class":117,"line":319},13,[115,321,322],{"class":132},"  },\n",[115,324,326],{"class":117,"line":325},14,[115,327,328],{"class":125},"]\n",[330,331,332,333,96,335,96,337,339],"important",{},"Always place ",[77,334,95],{},[98,336,100],{},[77,338,200],{},".\nESLint only runs one processor per file extension. The integration wraps\nthe Vue processor inside its own, allowing both Vue template linting and\nYAML block linting to run seamlessly.",[82,341,343],{"id":342},"auto-fixes","Auto-fixes",[58,345,346,347,350],{},"Running ",[77,348,349],{},"eslint --fix"," applies rule fixes directly inside the YAML block:",[352,353,354,361],"ul",{},[355,356,357,360],"li",{},[98,358,359],{},"Class ordering",": Classes are sorted into official Tailwind order.",[355,362,363,366,367,370],{},[98,364,365],{},"Line wrapping",": Rules that enforce maximum line length (such as\n",[77,368,369],{},"better-tailwindcss\u002Fenforce-max-line-length",") automatically convert long\nsingle-line strings into indented YAML list items.",[372,373,374,411],"code-group",{},[106,375,380],{"className":376,"code":377,"filename":378,"language":379,"meta":111,"style":111},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","root:\n  - p-4 flex bg-white\n  - \"@md:flex underline\"\n","Before","yaml",[77,381,382,390,398],{"__ignoreMap":111},[115,383,384,387],{"class":117,"line":118},[115,385,386],{"class":272},"root",[115,388,389],{"class":132},":\n",[115,391,392,395],{"class":117,"line":142},[115,393,394],{"class":132},"  -",[115,396,397],{"class":136}," p-4 flex bg-white\n",[115,399,400,402,405,408],{"class":117,"line":158},[115,401,394],{"class":132},[115,403,404],{"class":132}," \"",[115,406,407],{"class":136},"@md:flex underline",[115,409,410],{"class":132},"\"\n",[106,412,415],{"className":376,"code":413,"filename":414,"language":379,"meta":111,"style":111},"root:\n  - flex bg-white p-4\n  - \"underline\"\n  - \"@md:flex\"\n","After eslint --fix",[77,416,417,423,430,441],{"__ignoreMap":111},[115,418,419,421],{"class":117,"line":118},[115,420,386],{"class":272},[115,422,389],{"class":132},[115,424,425,427],{"class":117,"line":142},[115,426,394],{"class":132},[115,428,429],{"class":136}," flex bg-white p-4\n",[115,431,432,434,436,439],{"class":117,"line":158},[115,433,394],{"class":132},[115,435,404],{"class":132},[115,437,438],{"class":136},"underline",[115,440,410],{"class":132},[115,442,443,445,447,450],{"class":117,"line":175},[115,444,394],{"class":132},[115,446,404],{"class":132},[115,448,449],{"class":136},"@md:flex",[115,451,410],{"class":132},[453,454,455,456,459],"note",{},"ESLint checks each entry as a JavaScript string. Any entry containing escape\nsequences that would alter its meaning (such as ",[77,457,458],{},"content-['\\201C']",") is\nsafely preserved as written.",[82,461,463],{"id":462},"custom-rule-matching","Custom Rule Matching",[58,465,466,467,470,471,474,475,478,479,481,482,276],{},"By default, any rule with ",[77,468,469],{},"tailwind"," in its identifier (including\n",[77,472,473],{},"better-tailwindcss\u002F*"," and ",[77,476,477],{},"tailwindcss\u002F*",") is applied to ",[77,480,79],{},"\nblocks. To match additional rules or custom plugins, use ",[77,483,484],{},"createConfig",[106,486,488],{"className":108,"code":487,"filename":91,"language":110,"meta":111,"style":111},"import tailwindBlock from 'vue-tailwind-block\u002Feslint'\n\nexport default [\n  ...tailwindBlock.createConfig({ rules: [\u002Ftailwind\u002F, 'my-custom-plugin\u002Fclass-names'] }),\n]\n",[77,489,490,504,508,516,569],{"__ignoreMap":111},[115,491,492,494,496,498,500,502],{"class":117,"line":118},[115,493,122],{"class":121},[115,495,163],{"class":125},[115,497,129],{"class":121},[115,499,133],{"class":132},[115,501,170],{"class":136},[115,503,139],{"class":132},[115,505,506],{"class":117,"line":142},[115,507,179],{"emptyLinePlaceholder":178},[115,509,510,512,514],{"class":117,"line":158},[115,511,185],{"class":121},[115,513,188],{"class":121},[115,515,191],{"class":125},[115,517,518,520,522,524,527,530,533,536,538,541,544,546,548,551,553,556,558,561,564,567],{"class":117,"line":175},[115,519,197],{"class":132},[115,521,228],{"class":125},[115,523,203],{"class":132},[115,525,484],{"class":526},"s2Zo4",[115,528,529],{"class":125},"(",[115,531,532],{"class":132},"{",[115,534,535],{"class":272}," rules",[115,537,276],{"class":132},[115,539,540],{"class":125}," [",[115,542,543],{"class":132},"\u002F",[115,545,469],{"class":136},[115,547,543],{"class":132},[115,549,550],{"class":132},",",[115,552,133],{"class":132},[115,554,555],{"class":136},"my-custom-plugin\u002Fclass-names",[115,557,209],{"class":132},[115,559,560],{"class":125},"] ",[115,562,563],{"class":132},"}",[115,565,566],{"class":125},")",[115,568,220],{"class":132},[115,570,571],{"class":117,"line":182},[115,572,328],{"class":125},[574,575,576],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":111,"searchDepth":142,"depth":142,"links":578},[579,580,581],{"id":84,"depth":142,"text":85},{"id":342,"depth":142,"text":343},{"id":462,"depth":142,"text":463},"Check and fix the classes in a block with your Tailwind ESLint rules.","md",null,{},{"icon":41},{"title":588,"description":589},"Lint tailwind blocks with ESLint","Run eslint-plugin-better-tailwindcss on tailwind YAML blocks: put classes in Tailwind order, wrap long lines and fix them inside the YAML.","kcZkxoO9mKugaKKKXZIrBhv0Lh3lVuySMvbn_pe23RM",[592,594],{"title":33,"path":34,"stem":35,"description":593,"icon":36,"children":-1},"Typed classes in the editor and in vue-tsc.",{"title":49,"path":50,"stem":51,"description":595,"icon":44,"children":-1},"Compile a block from your own code.",1791485568741]