readme wip
Brad Cornes
parent
4424186e04
commit
b65749caa8
68
README.md
68
README.md
|
|
@ -1,60 +1,26 @@
|
||||||
# Tailwind CSS IntelliSense
|
# Tailwind CSS IntelliSense
|
||||||
|
|
||||||
> [Tailwind CSS](https://tailwindcss.com/) class name completion for VS Code
|
## Installation
|
||||||
|
|
||||||
**[Get it from the VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
|
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.
|
||||||
|
|
||||||
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html.gif" alt="HTML autocompletion" width="750">
|
|
||||||
|
|
||||||
## Requirements
|
|
||||||
|
|
||||||
This extension requires:
|
|
||||||
- a `tailwind.config.js` file to be [present in your project folder](https://github.com/bradlc/vscode-tailwindcss/blob/master/package.json#L38). You can create it with `npx tailwind init`.
|
|
||||||
- `tailwindcss` to be installed (present in project `node_modules/`)
|
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type.
|
- **Autocomplete**
|
||||||
|
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)
|
||||||
|
|
||||||
It also includes features that improve the overall Tailwind experience, including improved syntax highlighting, and CSS previews.
|
- **Hover Preview**
|
||||||
|
See the complete CSS for a Tailwind class name by hovering over it
|
||||||
|
|
||||||
### HTML (including Vue, JSX, PHP etc.)
|
- **Linting**
|
||||||
|
Highlights errors and potential bugs in your HTML and CSS files
|
||||||
|
|
||||||
- [Class name suggestions, including support for Emmet syntax](#class-name-suggestions-including-support-for-emmet-syntax)
|
- **CSS Syntax Highlighting**
|
||||||
- Suggestions include color previews where applicable, for example for text and background colors
|
Provides syntax definitions so that use of Tailwind features doesn’t mess up your syntax highlighting
|
||||||
- They also include a preview of the actual CSS for that class name
|
|
||||||
- [CSS preview when hovering over class names](#css-preview-when-hovering-over-class-names)
|
|
||||||
|
|
||||||
### CSS
|
## Screenshots/Examples?
|
||||||
|
|
||||||
- [Suggestions when using `@apply` and config helpers](#suggestions-when-using-apply-and-config)
|
## Troubleshooting
|
||||||
- Suggestions when using the `@screen` directive
|
|
||||||
- Suggestions when using the `@variants` directive
|
|
||||||
- [Improves syntax highlighting when using `@apply` and config helpers](#improves-syntax-highlighting-when-using-apply-and-config-helpers)
|
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
#### Class name suggestions, including support for Emmet syntax
|
|
||||||
|
|
||||||
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html.gif" alt="HTML autocompletion" width="750">
|
|
||||||
|
|
||||||
#### CSS preview when hovering over class names
|
|
||||||
|
|
||||||
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html-hover.gif" alt="HTML hover preview" width="750">
|
|
||||||
|
|
||||||
#### Suggestions when using `@apply` and config helpers
|
|
||||||
|
|
||||||
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css.gif" alt="CSS autocompletion" width="750">
|
|
||||||
|
|
||||||
#### Improves syntax highlighting when using `@apply` and config helpers
|
|
||||||
|
|
||||||
Before:
|
|
||||||
|
|
||||||
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-before.png" alt="CSS syntax highlighting before" width="400">
|
|
||||||
|
|
||||||
After:
|
|
||||||
|
|
||||||
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-after.png" alt="CSS syntax highlighting after" width="400">
|
|
||||||
|
|
||||||
## Settings
|
## Settings
|
||||||
|
|
||||||
|
|
@ -70,7 +36,7 @@ This setting allows you to add additional language support. The key of each entr
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### `tailwindcss.emmetCompletions`
|
### `tailwindCSS.emmetCompletions`
|
||||||
|
|
||||||
Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`**
|
Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`**
|
||||||
|
|
||||||
|
|
@ -79,3 +45,11 @@ Enable completions when using [Emmet](https://emmet.io/)-style syntax, for examp
|
||||||
"tailwindCSS.emmetCompletions": true
|
"tailwindCSS.emmetCompletions": true
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### `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
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue