Skip to content

Commit 6907071

Browse files
author
Brad Cornes
committed
update readme
1 parent 6991b22 commit 6907071

File tree

3 files changed

+27
-12
lines changed

3 files changed

+27
-12
lines changed

README.md

+27-12
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,43 @@
66

77
## Features
88

9-
### Markup
9+
Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type.
1010

11-
- class name suggestions, including support for Emmet
11+
It also includes features that improve the overall Tailwind experience, including improved syntax highlighting, and CSS previews.
12+
13+
### HTML (including Vue, JSX, PHP etc.)
14+
15+
- Class name suggestions, including support for Emmet syntax
16+
- Suggestions include color previews where applicable, for example for text and background colors
17+
- They also include a preview of the actual CSS for that class name
1218
- CSS preview when hovering over class names
1319

1420
### CSS
1521

16-
- class name suggestions when using `@apply`
17-
- suggestions when using the `config` helper
18-
- suggestions when using the `@screen` directive
19-
- improves syntax highlighting when using `@apply` and `config()`
22+
- Suggestions when using `@apply` and `config()`
23+
- Suggestions when using the `@screen` directive
24+
- Improves syntax highlighting when using `@apply` and `config()`
2025

21-
## GIFs
26+
## Examples
2227

23-
### HTML
28+
#### Class name suggestions, including support for Emmet syntax
2429

2530
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html.gif" alt="HTML autocompletion" width="750">
2631

27-
Hover over a class name to preview the CSS:
32+
#### CSS preview when hovering over class names
2833

29-
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html-hover.gif" alt="HTML hover preview" width="750">
34+
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html-hover.gif" alt="HTML hover preview" width="333">
3035

31-
### CSS
36+
#### Suggestions when using `@apply` and `config()`
37+
38+
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css.gif" alt="CSS autocompletion" width="333">
39+
40+
#### Improves syntax highlighting when using `@apply` and `config()`
41+
42+
Before:
43+
44+
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-before.png" alt="CSS syntax highlighting before" width="750">
45+
46+
After:
3247

33-
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css.gif" alt="CSS autocompletion" width="750">
48+
<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-after.png" alt="CSS syntax highlighting after" width="750">

img/css-highlighting-after.png

33.6 KB
Loading

img/css-highlighting-before.png

32.5 KB
Loading

0 commit comments

Comments
 (0)