diff --git a/README.md b/README.md
index c30bc26f4d11b3b878c1e8b1d467228cee14ad85..00cd2e27f71541fa2e32ef221a1fd2cb829aafa5 100644
--- a/README.md
+++ b/README.md
@@ -6,28 +6,43 @@ **[Get it from the VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
 
 ## Features
 
-### Markup
+Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type.
+
+It also includes features that improve the overall Tailwind experience, including improved syntax highlighting, and CSS previews.
 
-- class name suggestions, including support for Emmet
+### 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="333">
+
+#### Suggestions when using `@apply` and `config()`
+
+<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/html-hover.gif" alt="HTML hover preview" width="750">
+<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-before.png" alt="CSS syntax highlighting before" width="750">
 
-### CSS
+After:
 
-<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-highlighting-after.png" alt="CSS syntax highlighting after" width="750">

diff --git a/img/css-highlighting-after.png b/img/css-highlighting-after.png
new file mode 100644
index 0000000000000000000000000000000000000000..86a12fb8596e001e2c68d171733cb7950d66335c
Binary files /dev/null and b/img/css-highlighting-after.png differ

diff --git a/img/css-highlighting-before.png b/img/css-highlighting-before.png
new file mode 100644
index 0000000000000000000000000000000000000000..2eeffdc19d7293136e52f9426eb66456d0c1abb4
Binary files /dev/null and b/img/css-highlighting-before.png differ