tailwind-ctp-intellisense/README.md

86 lines
3.6 KiB
Markdown
Raw Normal View History

2020-06-22 19:53:13 +00:00
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/diagnostics/.github/banner.png" alt="" />
2020-06-11 14:25:15 +00:00
2020-06-22 16:55:09 +00:00
## Installation
2020-06-11 14:25:15 +00:00
2020-06-22 20:11:54 +00:00
**[View in Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
2020-06-22 19:58:37 +00:00
2020-06-22 16:55:09 +00:00
In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation/#1-install-tailwind-via-npm) and a [Tailwind config file](https://tailwindcss.com/docs/installation/#3-create-your-tailwind-config-file-optional) named `tailwind.config.js` or `tailwind.js` in your workspace.
2020-06-11 14:25:15 +00:00
## Features
2020-06-22 16:55:57 +00:00
- **Autocomplete**
2020-06-22 16:55:09 +00:00
Intelligent suggestions for class names, [CSS directives](https://tailwindcss.com/docs/functions-and-directives/), and the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme)
2020-06-11 14:25:15 +00:00
2020-06-22 20:11:54 +00:00
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/diagnostics/.github/autocomplete.png" alt="" />
2020-06-22 19:51:16 +00:00
2020-06-22 16:55:57 +00:00
- **Hover Preview**
2020-06-22 16:55:09 +00:00
See the complete CSS for a Tailwind class name by hovering over it
2020-06-11 14:25:15 +00:00
2020-06-22 20:11:54 +00:00
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/diagnostics/.github/hover.png" alt="" />
2020-06-22 19:51:16 +00:00
2020-06-22 16:55:57 +00:00
- **Linting**
2020-06-22 16:55:09 +00:00
Highlights errors and potential bugs in your HTML and CSS files
2020-06-11 14:25:15 +00:00
2020-06-22 20:11:54 +00:00
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/diagnostics/.github/linting.png" alt="" />
2020-06-22 19:51:16 +00:00
2020-06-22 16:55:57 +00:00
- **CSS Syntax Highlighting**
2020-06-22 16:55:09 +00:00
Provides syntax definitions so that use of Tailwind features doesnt mess up your syntax highlighting
2020-06-11 14:25:15 +00:00
2020-06-22 16:55:09 +00:00
## Troubleshooting
2020-06-11 15:00:51 +00:00
## Settings
### `tailwindCSS.includeLanguages`
This setting allows you to add additional language support. The key of each entry is the new language ID and the value is any one of the extensions built-in languages, depending on how you want the new language to be treated (e.g. `html`, `css`, or `javascript`):
```json
{
"tailwindCSS.includeLanguages": {
"plaintext": "html"
}
}
```
2020-06-22 16:55:09 +00:00
### `tailwindCSS.emmetCompletions`
2020-06-11 15:00:51 +00:00
2020-06-11 15:02:15 +00:00
Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`**
2020-06-11 15:00:51 +00:00
```json
{
"tailwindCSS.emmetCompletions": true
}
```
2020-06-22 16:55:09 +00:00
### `tailwindCSS.validate`
Enable linting. Rules can be configured individually using the `tailwindcss.lint` settings:
- `ignore`: disable lint rule entirely
- `warning`: rule violations will be considered "warnings," typically represented by a yellow underline
- `error`: rule violations will be considered "errors," typically represented by a red underline
2020-06-22 20:11:54 +00:00
### `tailwindCSS.lint.invalidScreen`
Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen). **Default: `error`**
### `tailwindCSS.lint.invalidVariant`
Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants). **Default: `error`**
### `tailwindCSS.lint.invalidTailwindDirective`
Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind). **Default: `error`**
### `tailwindCSS.lint.invalidApply`
Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply). For example class names which contain pseudo selectors cannot currently be used with `@apply`. **Default: `error`**
### `tailwindCSS.lint.invalidConfigPath`
Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme). **Default: `error`**
### `tailwindCSS.lint.cssPropertyConflict`
Class names on the same HTML element which apply the same CSS property or properties. **Default: `warning`**