update readme
parent
6991b22acf
commit
6907071536
39
README.md
39
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
|
||||
|
||||
<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 |
Loading…
Reference in New Issue