Merge pull request #6 from nurRiyad/blog/2-tailwind-fix
Add tailwind css intellisense fix blgo
This commit is contained in:
Al Asad Nur Riyad
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@@ -8,5 +8,5 @@
|
|||||||
"**/.svn/**",
|
"**/.svn/**",
|
||||||
"**/.nuxt/**"
|
"**/.nuxt/**"
|
||||||
],
|
],
|
||||||
"cSpell.words": ["Nuxt"]
|
"cSpell.words": ["Nuxt", "Tailwindcss"]
|
||||||
}
|
}
|
||||||
|
|||||||
42
content/blogs/2. fix-tailwindcss-intellisense-in-nuxt3.md
Normal file
42
content/blogs/2. fix-tailwindcss-intellisense-in-nuxt3.md
Normal 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.
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
---
|
|
||||||
title: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
|
|
||||||
date: 1st Jan 2023
|
|
||||||
description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat,
|
|
||||||
image: /nuxt-blog/pexels-photo-157040_gwfamn.jpg
|
|
||||||
alt: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
|
|
||||||
ogImage: /nuxt-blog/pexels-photo-157040_gwfamn.jpg
|
|
||||||
provider: cloudinary
|
|
||||||
tags: ['javascript', 'vue', 'typescript']
|
|
||||||
published: true
|
|
||||||
---
|
|
||||||
|
|
||||||
## Details
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
## Desldkf
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
Reference in New Issue
Block a user