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