|
| 1 | +# Tailwind CSS IntelliSense |
| 2 | + |
| 3 | +> [Tailwind CSS](https://tailwindcss.com/) class name completion for VS Code |
| 4 | +
|
| 5 | +**[Get it from the VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)** |
| 6 | + |
| 7 | +<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html.gif" alt="HTML autocompletion" width="750"> |
| 8 | + |
| 9 | +## Features |
| 10 | + |
| 11 | +Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type. |
| 12 | + |
| 13 | +It also includes features that improve the overall Tailwind experience, including improved syntax highlighting, and CSS previews. |
| 14 | + |
| 15 | +### HTML (including Vue, JSX, PHP etc.) |
| 16 | + |
| 17 | +- [Class name suggestions, including support for Emmet syntax](#class-name-suggestions-including-support-for-emmet-syntax) |
| 18 | + - Suggestions include color previews where applicable, for example for text and background colors |
| 19 | + - They also include a preview of the actual CSS for that class name |
| 20 | +- [CSS preview when hovering over class names](#css-preview-when-hovering-over-class-names) |
| 21 | + |
| 22 | +### CSS |
| 23 | + |
| 24 | +- [Suggestions when using `@apply` and `config()`](#suggestions-when-using-apply-and-config) |
| 25 | +- Suggestions when using the `@screen` directive |
| 26 | +- [Improves syntax highlighting when using `@apply` and `config()`](#improves-syntax-highlighting-when-using-apply-and-config) |
| 27 | + |
| 28 | +## Examples |
| 29 | + |
| 30 | +#### Class name suggestions, including support for Emmet syntax |
| 31 | + |
| 32 | +<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html.gif" alt="HTML autocompletion" width="750"> |
| 33 | + |
| 34 | +#### CSS preview when hovering over class names |
| 35 | + |
| 36 | +<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html-hover.gif" alt="HTML hover preview" width="750"> |
| 37 | + |
| 38 | +#### Suggestions when using `@apply` and `config()` |
| 39 | + |
| 40 | +<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css.gif" alt="CSS autocompletion" width="750"> |
| 41 | + |
| 42 | +#### Improves syntax highlighting when using `@apply` and `config()` |
| 43 | + |
| 44 | +Before: |
| 45 | + |
| 46 | +<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-before.png" alt="CSS syntax highlighting before" width="400"> |
| 47 | + |
| 48 | +After: |
| 49 | + |
| 50 | +<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-after.png" alt="CSS syntax highlighting after" width="400"> |
0 commit comments