mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-02-02 05:08:03 +01:00
docs(installation): add IntelliSense section
This commit is contained in:
@@ -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"}
|
: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 <Partial<Config>> {
|
||||||
|
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
|
## Options
|
||||||
|
|
||||||
| Key | Default | Description |
|
| Key | Default | Description |
|
||||||
|
|||||||
Reference in New Issue
Block a user