update readme

README.md

@@ -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 `@apply` and `config()`
-- suggestions when using the `config` helper
+- Suggestions when using the `@screen` directive
-- suggestions when using the `@screen` directive
+- Improves syntax highlighting when using `@apply` and `config()`
-- 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">