[{"data":1,"prerenderedAt":217},["ShallowReactive",2],{"category-data-tailwindcss":3},[4],{"id":5,"title":6,"body":7,"description":203,"extension":204,"meta":205,"navigation":212,"ogImage":207,"path":213,"seo":214,"stem":215,"__hash__":216},"content/blogs/2. fix-tailwindcss-intellisense-in-nuxt3.md","How To Fix TailwindCSS Intellisense In Nuxt3 Project",{"type":8,"value":9,"toc":198},"minimark",[10,15,27,31,50,54,63,90,191,194],[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://github.com/tailwindlabs/tailwindcss-intellisense/issues/663#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/"," 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/tailwind.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],{},"/.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","// /.vscode/settings.json\n{\n  \"tailwindCSS.files.exclude\": [\"**/.git/**\", \"**/node_modules/**\", \"**/.hg/**\", \"**/.svn/**\", \"**/.nuxt/**\"]\n}\n","json","",[35,98,99,108,115,185],{"__ignoreMap":96},[100,101,104],"span",{"class":102,"line":103},"line",1,[100,105,107],{"class":106},"shSDL","// /.vscode/settings.json\n",[100,109,111],{"class":102,"line":110},2,[100,112,114],{"class":113},"sCdxs","{\n",[100,116,118,122,126,129,133,136,139,143,145,148,150,153,155,157,159,162,164,166,168,171,173,175,177,180,182],{"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}," [",[100,137,128],{"class":138},"seVfx",[100,140,142],{"class":141},"s-mGx","**/.git/**",[100,144,128],{"class":138},[100,146,147],{"class":113},", ",[100,149,128],{"class":138},[100,151,152],{"class":141},"**/node_modules/**",[100,154,128],{"class":138},[100,156,147],{"class":113},[100,158,128],{"class":138},[100,160,161],{"class":141},"**/.hg/**",[100,163,128],{"class":138},[100,165,147],{"class":113},[100,167,128],{"class":138},[100,169,170],{"class":141},"**/.svn/**",[100,172,128],{"class":138},[100,174,147],{"class":113},[100,176,128],{"class":138},[100,178,179],{"class":141},"**/.nuxt/**",[100,181,128],{"class":138},[100,183,184],{"class":113},"]\n",[100,186,188],{"class":102,"line":187},4,[100,189,190],{"class":113},"}\n",[16,192,193],{},"Hopefully now tailwind intellisense start working properly.",[195,196,197],"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":199},[200,201,202],{"id":13,"depth":117,"text":14},{"id":29,"depth":117,"text":30},{"id":52,"depth":117,"text":53},"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",{"date":206,"image":207,"alt":208,"tags":209,"published":212},"26th Jan 2023","/blogs-img/blog2.jpg","Hwo to fix tailwind intellisense in nuxt3 project",[210,211],"nuxt","tailwindcss",true,"/blogs/fix-tailwindcss-intellisense-in-nuxt3",{"title":6,"description":203},"blogs/2. fix-tailwindcss-intellisense-in-nuxt3","7ZGcJhWiVqLVOv2RrI7i56paOO-EQuvfqBkBlJrh6uE",1770700754615]