diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md index e0ef9221..7291c839 100644 --- a/docs/content/1.getting-started/2.installation.md +++ b/docs/content/1.getting-started/2.installation.md @@ -73,16 +73,35 @@ If you do so, you'll need to add the following to your `.vscode/settings.json`: } ``` -Also, the extension won't work when writing classes in your `app.config.ts` by default. You can add the following to your `.vscode/settings.json` to fix this: +Note, the extension won't work when writing classes in your `app.config.ts` by default. + +Also, you might want IntelliSense on objects in your SFC by prefixing with `/*ui*/`. + +To enable these two features, you can add the following to your `.vscode/settings.json`: ```json [.vscode/settings.json] { "tailwindCSS.experimental.classRegex": [ ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"] + ["/\\*ui\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"], ] } ``` +An example SFC using IntelliSense (note the `/*ui*/` prefix, also works with `ref()`): + +```vue [example.vue] + + + +``` + You can also add the following to your `.vscode/settings.json` to enable IntelliSense when using the `ui` prop: ```json [.vscode/settings.json]