Add tailwind css intellisense fix blgo

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-01-26 02:46:50 +06:00
parent 64a519e95e
commit 4efef7962f
3 changed files with 43 additions and 33 deletions

View File

@@ -0,0 +1,42 @@
---
title: How To Fix TailwindCSS Intellisense In Nuxt3 Project
date: 26th Jan 2023
description: In Nuxt3 project tailwind css intellisense doesn't seems to work properly. In this blog I will share a workaround to fix this issue.
image: /nuxt-blog/pexels-photo-157040_gwfamn.jpg
alt: Hwo to fix tailwind intellisense in nuxt3 project
ogImage: /nuxt-blog/pexels-photo-157040_gwfamn.jpg
provider: cloudinary
tags: ['nuxt', 'vue', 'tailwind']
published: true
---
## Problems
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 [workaround](https://github.com/tailwindlabs/tailwindcss-intellisense/issues/663#issuecomment-1316788128), That I am sharing here today.
## Why It's Not working
In our nuxt project we have a `.nuxt` directory. Nuxt uses the `.nuxt/` directory in development to generate your Vue application. And if we try to look properly there is also a file called `.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 `.nuxt` directory.
## Possible Workaround
One possible solution is, In your project we call tell the extension to exclude the `.nuxt` directory. To exclude the `.nuxt` directory in your workspace,
- Create a `/.vscode` folder in your project's root level.
- Inside `.vscode` folder add a `settings.json` file
- Copy the below code to `settings.json` file
```json
// /.vscode/settings.json
{
"tailwindCSS.files.exclude": [
"**/.git/**",
"**/node_modules/**",
"**/.hg/**",
"**/.svn/**",
"**/.nuxt/**"
]
}
```
Hopefully now tailwind intellisense start working properly.