From 9f87ea5729dd42d72e491f3ff06402c83de3d399 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 5 Nov 2024 15:10:12 +0100
Subject: [PATCH] docs(installation): improve callouts

---
 .../2.installation/1.nuxt.md                  | 19 ++++++++++++++++++-
 .../1.getting-started/2.installation/2.vue.md | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/docs/content/1.getting-started/2.installation/1.nuxt.md b/docs/content/1.getting-started/2.installation/1.nuxt.md
index 7aeb570b..8079eb80 100644
--- a/docs/content/1.getting-started/2.installation/1.nuxt.md
+++ b/docs/content/1.getting-started/2.installation/1.nuxt.md
@@ -36,6 +36,10 @@ bun add @nuxt/ui@next
 
 ::
 
+::warning
+If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next` directly in your project's root directory.
+::
+
 2. Register the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}:
 
 ```ts [nuxt.config.ts]
@@ -53,8 +57,21 @@ export default defineNuxtConfig({
 </style>
 ```
 
+::tip
+It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:
+```json
+"files.associations": {
+  "*.css": "tailwindcss"
+},
+"editor.quickSuggestions": {
+  "strings": "on"
+}
+```
+
+::
+
 ::warning
-If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next` directly in your project's root directory.
+IntelliSense works better when importing `tailwindcss` in a proper `.css` file which will be automatically detected.
 ::
 
 ## Options
diff --git a/docs/content/1.getting-started/2.installation/2.vue.md b/docs/content/1.getting-started/2.installation/2.vue.md
index fd83e0cb..d66ac899 100644
--- a/docs/content/1.getting-started/2.installation/2.vue.md
+++ b/docs/content/1.getting-started/2.installation/2.vue.md
@@ -36,6 +36,10 @@ bun add @nuxt/ui@next
 
 ::
 
+::warning
+If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next`, `vue-router` and `@unhead/vue` directly in your project's root directory.
+::
+
 2. Add the Nuxt UI Vite plugin in your `vite.config.ts`{lang="ts-type"}:
 
 ```ts [vite.config.ts]
@@ -89,8 +93,21 @@ app.mount('#app')
 </style>
 ```
 
+::tip
+It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:
+```json
+"files.associations": {
+  "*.css": "tailwindcss"
+},
+"editor.quickSuggestions": {
+  "strings": "on"
+}
+```
+
+::
+
 ::warning
-If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next`, `vue-router` and `@unhead/vue` directly in your project's root directory.
+IntelliSense works better when importing `tailwindcss` in a proper `.css` file which will be automatically detected.
 ::
 
 ## Options