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