diff --git a/README.md b/README.md index c30bc26..00cd2e2 100644 --- a/README.md +++ b/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 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 HTML autocompletion -Hover over a class name to preview the CSS: +#### CSS preview when hovering over class names -HTML hover preview +HTML hover preview -### CSS +#### Suggestions when using `@apply` and `config()` -CSS autocompletion +CSS autocompletion + +#### Improves syntax highlighting when using `@apply` and `config()` + +Before: + +CSS syntax highlighting before + +After: + +CSS syntax highlighting after diff --git a/img/css-highlighting-after.png b/img/css-highlighting-after.png new file mode 100644 index 0000000..86a12fb 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 0000000..2eeffdc Binary files /dev/null and b/img/css-highlighting-before.png differ