diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md index 35dd9331..a7d631b0 100644 --- a/docs/content/1.getting-started/2.installation.md +++ b/docs/content/1.getting-started/2.installation.md @@ -38,6 +38,53 @@ As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) a :u-button{icon="i-simple-icons-stackblitz" label="Play on StackBlitz" size="lg" to="https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue" target="_blank"} +## IntelliSense + +If you're using VSCode, you can install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension to get autocompletion for the classes. + +You can read more on how to set it up on the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/tailwind/editor-support) module documentation, but to summarize, you'll need to add the following to your `settings.json`: + +```json [settings.json] +{ + "files.associations": { + "*.css": "tailwindcss" + }, + "editor.quickSuggestions": { + "strings": true + } +} +``` + +You can write your `tailwind.config` in TypeScript as such: + +```ts [tailwind.config.ts] +import type { Config } from 'tailwindcss' + +export default > { + content: [ + 'docs/content/**/*.md' + ] +} +``` + +If you do so, you'll need to add the following to your `settings.json`: + +```json [settings.json] +{ + "tailwindCSS.experimental.configFile": "tailwind.config.ts" +} +``` + +Also, the extension won't work when writing classes in your `app.config.ts` by default. You can add the following to your `settings.json` to fix this: + +```json [settings.json] +{ + "tailwindCSS.experimental.classRegex": [ + ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"] + ] +} +``` + ## Options | Key | Default | Description |