update readme

master
Brad Cornes 2018-10-23 12:54:09 +01:00
parent 6991b22acf
commit 6907071536
3 changed files with 27 additions and 12 deletions

View File

@ -6,28 +6,43 @@
## Features
### Markup
Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type.
- class name suggestions, including support for Emmet
It also includes features that improve the overall Tailwind experience, including improved syntax highlighting, and CSS previews.
### HTML (including Vue, JSX, PHP etc.)
- Class name suggestions, including support for Emmet syntax
- Suggestions include color previews where applicable, for example for text and background colors
- They also include a preview of the actual CSS for that class name
- CSS preview when hovering over class names
### CSS
- class name suggestions when using `@apply`
- suggestions when using the `config` helper
- suggestions when using the `@screen` directive
- improves syntax highlighting when using `@apply` and `config()`
- Suggestions when using `@apply` and `config()`
- Suggestions when using the `@screen` directive
- Improves syntax highlighting when using `@apply` and `config()`
## GIFs
## Examples
### HTML
#### 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">
Hover over a class name to preview the CSS:
#### 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">
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html-hover.gif" alt="HTML hover preview" width="333">
### CSS
#### Suggestions when using `@apply` and `config()`
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css.gif" alt="CSS autocompletion" width="750">
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css.gif" alt="CSS autocompletion" width="333">
#### Improves syntax highlighting when using `@apply` and `config()`
Before:
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-before.png" alt="CSS syntax highlighting before" width="750">
After:
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-after.png" alt="CSS syntax highlighting after" width="750">

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB