[{"data":1,"prerenderedAt":236},["ShallowReactive",2],{"blog-post-\u002Fblogs\u002Ffix-tailwindcss-intellisense-in-nuxt3":3},{"id":4,"title":5,"alt":6,"body":7,"date":223,"description":224,"extension":225,"image":226,"meta":227,"navigation":228,"ogImage":226,"path":229,"published":228,"seo":230,"stem":231,"tags":232,"__hash__":235},"blog\u002Fblogs\u002F2. fix-tailwindcss-intellisense-in-nuxt3.md","How To Fix TailwindCSS Intellisense In Nuxt3 Project","Hwo to fix tailwind intellisense in nuxt3 project",{"type":8,"value":9,"toc":218},"minimark",[10,15,27,31,50,54,63,90,211,214],[11,12,14],"h3",{"id":13},"problems","Problems",[16,17,18,19,26],"p",{},"I had a Nuxt3 and TailwindCSS project. which was opened in VsCode. But the problem was, in my project the tailwind intellisense didn't working properly. I tried to reinstall the vscode tailwind extension but the problem didn't solve properly. Later after doing some research I found a ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-intellisense\u002Fissues\u002F663#issuecomment-1316788128",[24],"nofollow","workaround",", That I am sharing here today.",[11,28,30],{"id":29},"why-its-not-working","Why It's Not working",[16,32,33,34,38,39,42,43,46,47,49],{},"In our nuxt project we have a ",[35,36,37],"code",{},".nuxt"," directory. Nuxt uses the ",[35,40,41],{},".nuxt\u002F"," directory in development to generate your Vue application. And if we try to look properly there is also a file called ",[35,44,45],{},".nuxt\u002Ftailwind.config.cjs",", So tailwind find to config file in the same project, one is in your root directory and another one is in you ",[35,48,37],{}," directory.",[11,51,53],{"id":52},"possible-workaround","Possible Workaround",[16,55,56,57,59,60,62],{},"One possible solution is, In your project we call tell the extension to exclude the ",[35,58,37],{}," directory. To exclude the ",[35,61,37],{}," directory in your workspace,",[64,65,66,74,85],"ul",{},[67,68,69,70,73],"li",{},"Create a ",[35,71,72],{},"\u002F.vscode"," folder in your project's root level.",[67,75,76,77,80,81,84],{},"Inside ",[35,78,79],{},".vscode"," folder add a ",[35,82,83],{},"settings.json"," file",[67,86,87,88,84],{},"Copy the below code to ",[35,89,83],{},[91,92,97],"pre",{"className":93,"code":94,"language":95,"meta":96,"style":96},"language-json shiki shiki-themes dracula","\u002F\u002F \u002F.vscode\u002Fsettings.json\n{\n  \"tailwindCSS.files.exclude\": [\n    \"**\u002F.git\u002F**\",\n    \"**\u002Fnode_modules\u002F**\",\n    \"**\u002F.hg\u002F**\",\n    \"**\u002F.svn\u002F**\",\n    \"**\u002F.nuxt\u002F**\"\n  ]\n}\n","json","",[35,98,99,108,115,136,152,164,176,188,199,205],{"__ignoreMap":96},[100,101,104],"span",{"class":102,"line":103},"line",1,[100,105,107],{"class":106},"shSDL","\u002F\u002F \u002F.vscode\u002Fsettings.json\n",[100,109,111],{"class":102,"line":110},2,[100,112,114],{"class":113},"sCdxs","{\n",[100,116,118,122,126,129,133],{"class":102,"line":117},3,[100,119,121],{"class":120},"sY8FZ","  \"",[100,123,125],{"class":124},"sLL85","tailwindCSS.files.exclude",[100,127,128],{"class":120},"\"",[100,130,132],{"class":131},"s0Tla",":",[100,134,135],{"class":113}," [\n",[100,137,139,143,147,149],{"class":102,"line":138},4,[100,140,142],{"class":141},"seVfx","    \"",[100,144,146],{"class":145},"s-mGx","**\u002F.git\u002F**",[100,148,128],{"class":141},[100,150,151],{"class":113},",\n",[100,153,155,157,160,162],{"class":102,"line":154},5,[100,156,142],{"class":141},[100,158,159],{"class":145},"**\u002Fnode_modules\u002F**",[100,161,128],{"class":141},[100,163,151],{"class":113},[100,165,167,169,172,174],{"class":102,"line":166},6,[100,168,142],{"class":141},[100,170,171],{"class":145},"**\u002F.hg\u002F**",[100,173,128],{"class":141},[100,175,151],{"class":113},[100,177,179,181,184,186],{"class":102,"line":178},7,[100,180,142],{"class":141},[100,182,183],{"class":145},"**\u002F.svn\u002F**",[100,185,128],{"class":141},[100,187,151],{"class":113},[100,189,191,193,196],{"class":102,"line":190},8,[100,192,142],{"class":141},[100,194,195],{"class":145},"**\u002F.nuxt\u002F**",[100,197,198],{"class":141},"\"\n",[100,200,202],{"class":102,"line":201},9,[100,203,204],{"class":113},"  ]\n",[100,206,208],{"class":102,"line":207},10,[100,209,210],{"class":113},"}\n",[16,212,213],{},"Hopefully now tailwind intellisense start working properly.",[215,216,217],"style",{},"html pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .sY8FZ, html code.shiki .sY8FZ{--shiki-default:#8BE9FE}html pre.shiki code .sLL85, html code.shiki .sLL85{--shiki-default:#8BE9FD}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}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);}",{"title":96,"searchDepth":110,"depth":110,"links":219},[220,221,222],{"id":13,"depth":117,"text":14},{"id":29,"depth":117,"text":30},{"id":52,"depth":117,"text":53},"26th Jan 2023","In Nuxt3 project tailwind css intellisense doesn't seems to work properly. In this blog I will share a workaround to fix this issue.","md","\u002Fblogs-img\u002Fblog2.jpg",{},true,"\u002Fblogs\u002Ffix-tailwindcss-intellisense-in-nuxt3",{"title":5,"description":224},"blogs\u002F2. fix-tailwindcss-intellisense-in-nuxt3",[233,234],"nuxt","tailwindcss","uOf3KNv1McjaTwKt8GNLPTKj_V1pVjYZ_G-VCijfLgw",1777303145413]