[{"data":1,"prerenderedAt":374},["Reactive",2],{"blog-post-/blogs/fix-tailwindcss-intellisense-in-nuxt3":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"image":11,"alt":12,"ogImage":11,"tags":13,"published":16,"body":17,"_type":368,"_id":369,"_source":370,"_file":371,"_extension":372,"sitemap":373},"/blogs/fix-tailwindcss-intellisense-in-nuxt3","blogs",false,"","How To Fix TailwindCSS Intellisense In Nuxt3 Project","In Nuxt3 project tailwind css intellisense doesn't seems to work properly. In this blog I will share a workaround to fix this issue.","26th Jan 2023","/blogs-img/blog2.jpg","Hwo to fix tailwind intellisense in nuxt3 project",[14,15],"nuxt","tailwindcss",true,{"type":18,"children":19,"toc":363},"root",[20,29,46,52,89,95,114,164,352,357],{"type":21,"tag":22,"props":23,"children":25},"element","h3",{"id":24},"problems",[26],{"type":27,"value":28},"text","Problems",{"type":21,"tag":30,"props":31,"children":32},"p",{},[33,35,44],{"type":27,"value":34},"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 ",{"type":21,"tag":36,"props":37,"children":41},"a",{"href":38,"rel":39},"https://github.com/tailwindlabs/tailwindcss-intellisense/issues/663#issuecomment-1316788128",[40],"nofollow",[42],{"type":27,"value":43},"workaround",{"type":27,"value":45},", That I am sharing here today.",{"type":21,"tag":22,"props":47,"children":49},{"id":48},"why-its-not-working",[50],{"type":27,"value":51},"Why It's Not working",{"type":21,"tag":30,"props":53,"children":54},{},[55,57,64,66,72,74,80,82,87],{"type":27,"value":56},"In our nuxt project we have a ",{"type":21,"tag":58,"props":59,"children":61},"code",{"className":60},[],[62],{"type":27,"value":63},".nuxt",{"type":27,"value":65}," directory. Nuxt uses the ",{"type":21,"tag":58,"props":67,"children":69},{"className":68},[],[70],{"type":27,"value":71},".nuxt/",{"type":27,"value":73}," directory in development to generate your Vue application. And if we try to look properly there is also a file called ",{"type":21,"tag":58,"props":75,"children":77},{"className":76},[],[78],{"type":27,"value":79},".nuxt/tailwind.config.cjs",{"type":27,"value":81},", So tailwind find to config file in the same project, one is in your root directory and another one is in you ",{"type":21,"tag":58,"props":83,"children":85},{"className":84},[],[86],{"type":27,"value":63},{"type":27,"value":88}," directory.",{"type":21,"tag":22,"props":90,"children":92},{"id":91},"possible-workaround",[93],{"type":27,"value":94},"Possible Workaround",{"type":21,"tag":30,"props":96,"children":97},{},[98,100,105,107,112],{"type":27,"value":99},"One possible solution is, In your project we call tell the extension to exclude the ",{"type":21,"tag":58,"props":101,"children":103},{"className":102},[],[104],{"type":27,"value":63},{"type":27,"value":106}," directory. To exclude the ",{"type":21,"tag":58,"props":108,"children":110},{"className":109},[],[111],{"type":27,"value":63},{"type":27,"value":113}," directory in your workspace,",{"type":21,"tag":115,"props":116,"children":117},"ul",{},[118,132,153],{"type":21,"tag":119,"props":120,"children":121},"li",{},[122,124,130],{"type":27,"value":123},"Create a ",{"type":21,"tag":58,"props":125,"children":127},{"className":126},[],[128],{"type":27,"value":129},"/.vscode",{"type":27,"value":131}," folder in your project's root level.",{"type":21,"tag":119,"props":133,"children":134},{},[135,137,143,145,151],{"type":27,"value":136},"Inside ",{"type":21,"tag":58,"props":138,"children":140},{"className":139},[],[141],{"type":27,"value":142},".vscode",{"type":27,"value":144}," folder add a ",{"type":21,"tag":58,"props":146,"children":148},{"className":147},[],[149],{"type":27,"value":150},"settings.json",{"type":27,"value":152}," file",{"type":21,"tag":119,"props":154,"children":155},{},[156,158,163],{"type":27,"value":157},"Copy the below code to ",{"type":21,"tag":58,"props":159,"children":161},{"className":160},[],[162],{"type":27,"value":150},{"type":27,"value":152},{"type":21,"tag":165,"props":166,"children":170},"pre",{"className":167,"code":168,"language":169,"meta":7,"style":7},"language-json shiki shiki-themes dracula","// /.vscode/settings.json\n{\n  \"tailwindCSS.files.exclude\": [\n    \"**/.git/**\",\n    \"**/node_modules/**\",\n    \"**/.hg/**\",\n    \"**/.svn/**\",\n    \"**/.nuxt/**\"\n  ]\n}\n","json",[171],{"type":21,"tag":58,"props":172,"children":173},{"__ignoreMap":7},[174,186,196,228,253,274,295,316,334,343],{"type":21,"tag":175,"props":176,"children":179},"span",{"class":177,"line":178},"line",1,[180],{"type":21,"tag":175,"props":181,"children":183},{"style":182},"--shiki-default:#6272A4",[184],{"type":27,"value":185},"// /.vscode/settings.json\n",{"type":21,"tag":175,"props":187,"children":189},{"class":177,"line":188},2,[190],{"type":21,"tag":175,"props":191,"children":193},{"style":192},"--shiki-default:#F8F8F2",[194],{"type":27,"value":195},"{\n",{"type":21,"tag":175,"props":197,"children":199},{"class":177,"line":198},3,[200,206,212,217,223],{"type":21,"tag":175,"props":201,"children":203},{"style":202},"--shiki-default:#8BE9FE",[204],{"type":27,"value":205},"  \"",{"type":21,"tag":175,"props":207,"children":209},{"style":208},"--shiki-default:#8BE9FD",[210],{"type":27,"value":211},"tailwindCSS.files.exclude",{"type":21,"tag":175,"props":213,"children":214},{"style":202},[215],{"type":27,"value":216},"\"",{"type":21,"tag":175,"props":218,"children":220},{"style":219},"--shiki-default:#FF79C6",[221],{"type":27,"value":222},":",{"type":21,"tag":175,"props":224,"children":225},{"style":192},[226],{"type":27,"value":227}," [\n",{"type":21,"tag":175,"props":229,"children":231},{"class":177,"line":230},4,[232,238,244,248],{"type":21,"tag":175,"props":233,"children":235},{"style":234},"--shiki-default:#E9F284",[236],{"type":27,"value":237},"    \"",{"type":21,"tag":175,"props":239,"children":241},{"style":240},"--shiki-default:#F1FA8C",[242],{"type":27,"value":243},"**/.git/**",{"type":21,"tag":175,"props":245,"children":246},{"style":234},[247],{"type":27,"value":216},{"type":21,"tag":175,"props":249,"children":250},{"style":192},[251],{"type":27,"value":252},",\n",{"type":21,"tag":175,"props":254,"children":256},{"class":177,"line":255},5,[257,261,266,270],{"type":21,"tag":175,"props":258,"children":259},{"style":234},[260],{"type":27,"value":237},{"type":21,"tag":175,"props":262,"children":263},{"style":240},[264],{"type":27,"value":265},"**/node_modules/**",{"type":21,"tag":175,"props":267,"children":268},{"style":234},[269],{"type":27,"value":216},{"type":21,"tag":175,"props":271,"children":272},{"style":192},[273],{"type":27,"value":252},{"type":21,"tag":175,"props":275,"children":277},{"class":177,"line":276},6,[278,282,287,291],{"type":21,"tag":175,"props":279,"children":280},{"style":234},[281],{"type":27,"value":237},{"type":21,"tag":175,"props":283,"children":284},{"style":240},[285],{"type":27,"value":286},"**/.hg/**",{"type":21,"tag":175,"props":288,"children":289},{"style":234},[290],{"type":27,"value":216},{"type":21,"tag":175,"props":292,"children":293},{"style":192},[294],{"type":27,"value":252},{"type":21,"tag":175,"props":296,"children":298},{"class":177,"line":297},7,[299,303,308,312],{"type":21,"tag":175,"props":300,"children":301},{"style":234},[302],{"type":27,"value":237},{"type":21,"tag":175,"props":304,"children":305},{"style":240},[306],{"type":27,"value":307},"**/.svn/**",{"type":21,"tag":175,"props":309,"children":310},{"style":234},[311],{"type":27,"value":216},{"type":21,"tag":175,"props":313,"children":314},{"style":192},[315],{"type":27,"value":252},{"type":21,"tag":175,"props":317,"children":319},{"class":177,"line":318},8,[320,324,329],{"type":21,"tag":175,"props":321,"children":322},{"style":234},[323],{"type":27,"value":237},{"type":21,"tag":175,"props":325,"children":326},{"style":240},[327],{"type":27,"value":328},"**/.nuxt/**",{"type":21,"tag":175,"props":330,"children":331},{"style":234},[332],{"type":27,"value":333},"\"\n",{"type":21,"tag":175,"props":335,"children":337},{"class":177,"line":336},9,[338],{"type":21,"tag":175,"props":339,"children":340},{"style":192},[341],{"type":27,"value":342},"  ]\n",{"type":21,"tag":175,"props":344,"children":346},{"class":177,"line":345},10,[347],{"type":21,"tag":175,"props":348,"children":349},{"style":192},[350],{"type":27,"value":351},"}\n",{"type":21,"tag":30,"props":353,"children":354},{},[355],{"type":27,"value":356},"Hopefully now tailwind intellisense start working properly.",{"type":21,"tag":358,"props":359,"children":360},"style",{},[361],{"type":27,"value":362},"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":7,"searchDepth":188,"depth":188,"links":364},[365,366,367],{"id":24,"depth":198,"text":28},{"id":48,"depth":198,"text":51},{"id":91,"depth":198,"text":94},"markdown","content:blogs:2. fix-tailwindcss-intellisense-in-nuxt3.md","content","blogs/2. fix-tailwindcss-intellisense-in-nuxt3.md","md",{"loc":4},1718272702035]