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