tailwind-ctp-intellisense/README.md

# Tailwind CSS IntelliSense

> [Tailwind CSS](https://tailwindcss.com/) class name completion for VS Code

**[Get it from the VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**

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

## Features

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.

### HTML (including Vue, JSX, PHP etc.)

- [Class name suggestions, including support for Emmet syntax](#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-preview-when-hovering-over-class-names)

### CSS

- [Suggestions 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()`](#improves-syntax-highlighting-when-using-apply-and-config)

## Examples

#### 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">

#### 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">

#### Suggestions when using `@apply` and `config()`

<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css.gif" alt="CSS autocompletion" width="750">

#### 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="400">

After:

<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-after.png" alt="CSS syntax highlighting after" width="400">
update readme 2018-08-21 12:44:52 +00:00			`# Tailwind CSS IntelliSense`
update package.json and readme 2018-08-21 12:10:52 +00:00
update readme and add changelog 2018-08-28 19:40:20 +00:00			`> [Tailwind CSS](https://tailwindcss.com/) class name completion for VS Code`
update readme 2018-08-21 12:30:26 +00:00
add marketplace link to readme 2018-08-21 21:05:37 +00:00			`[Get it from the VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)`

add anchor links to readme 2018-10-23 11:56:36 +00:00			`<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html.gif" alt="HTML autocompletion" width="750">`

update readme and add changelog 2018-08-28 19:40:20 +00:00			`## Features`
update readme 2018-08-21 12:30:26 +00:00
update readme 2018-10-23 11:54:09 +00:00			`Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type.`
update readme 2018-08-21 12:30:26 +00:00
update readme 2018-10-23 11:54:09 +00:00			`It also includes features that improve the overall Tailwind experience, including improved syntax highlighting, and CSS previews.`

			`### HTML (including Vue, JSX, PHP etc.)`

add anchor links to readme 2018-10-23 11:56:36 +00:00			`- [Class name suggestions, including support for Emmet syntax](#class-name-suggestions-including-support-for-emmet-syntax)`
update readme 2018-10-23 11:54:09 +00:00			`- 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`
add anchor links to readme 2018-10-23 11:56:36 +00:00			`- [CSS preview when hovering over class names](#css-preview-when-hovering-over-class-names)`
update readme and add changelog 2018-08-28 19:40:20 +00:00
			`### CSS`

add anchor links to readme 2018-10-23 11:56:36 +00:00			- [Suggestions when using `@apply` and `config()`](#suggestions-when-using-apply-and-config)
update readme 2018-10-23 11:54:09 +00:00			- Suggestions when using the `@screen` directive
add anchor links to readme 2018-10-23 11:56:36 +00:00			- [Improves syntax highlighting when using `@apply` and `config()`](#improves-syntax-highlighting-when-using-apply-and-config)
update readme and add changelog 2018-08-28 19:40:20 +00:00
update readme 2018-10-23 11:54:09 +00:00			`## Examples`
update readme 2018-08-21 12:30:26 +00:00
update readme 2018-10-23 11:54:09 +00:00			`#### Class name suggestions, including support for Emmet syntax`
update readme and add changelog 2018-08-28 19:40:20 +00:00
			`<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html.gif" alt="HTML autocompletion" width="750">`

update readme 2018-10-23 11:54:09 +00:00			`#### CSS preview when hovering over class names`
update readme 2018-08-21 12:30:26 +00:00
fix image sizes 2018-10-23 11:54:44 +00:00			`<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html-hover.gif" alt="HTML hover preview" width="750">`
update readme 2018-08-21 12:30:26 +00:00
update readme 2018-10-23 11:54:09 +00:00			#### Suggestions when using `@apply` and `config()`

fix image sizes 2018-10-23 11:54:44 +00:00			`<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css.gif" alt="CSS autocompletion" width="750">`
update readme 2018-10-23 11:54:09 +00:00
			#### Improves syntax highlighting when using `@apply` and `config()`

			`Before:`

fix image sizes 2018-10-23 11:54:44 +00:00			`<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-before.png" alt="CSS syntax highlighting before" width="400">`
update readme 2018-10-23 11:54:09 +00:00
			`After:`
update readme 2018-08-21 12:30:26 +00:00
fix image sizes 2018-10-23 11:54:44 +00:00			`<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-after.png" alt="CSS syntax highlighting after" width="400">`