diff --git a/README.md b/README.md index 839b718dc14b5039abe8416027f3c0a3ec73057e..27cc6e8c480bc703fa2c9a987bd60aac0b73250a 100644 --- a/README.md +++ b/README.md @@ -1,74 +1,105 @@ # Tailwind CSS IntelliSense ## Installation - In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation/#1-install-tailwind-via-npm) and a [Tailwind config file](https://tailwindcss.com/docs/installation/#3-create-your-tailwind-config-file-optional) named `tailwind.config.js` or `tailwind.js` in your workspace. +## Installation ## Features +## Installation - **Autocomplete** + +## Installation Intelligent suggestions for class names, [CSS directives](https://tailwindcss.com/docs/functions-and-directives/), and the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme) +## Installation - **Hover Preview** +## Installation See the complete CSS for a Tailwind class name by hovering over it +- `tailwindcss` to be installed (present in project `node_modules/`) +## Features + +In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation/#1-install-tailwind-via-npm) and a [Tailwind config file](https://tailwindcss.com/docs/installation/#3-create-your-tailwind-config-file-optional) named `tailwind.config.js` or `tailwind.js` in your workspace. # Tailwind CSS IntelliSense + +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 helpers](#suggestions-when-using-apply-and-config) +## Features -# Tailwind CSS IntelliSense +## Features # Tailwind CSS IntelliSense +## Features -# Tailwind CSS IntelliSense -# Tailwind CSS IntelliSense +## Features ## Installation -# Tailwind CSS IntelliSense +## Features In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation/#1-install-tailwind-via-npm) and a [Tailwind config file](https://tailwindcss.com/docs/installation/#3-create-your-tailwind-config-file-optional) named `tailwind.config.js` or `tailwind.js` in your workspace. -# Tailwind CSS IntelliSense +HTML autocompletion + +## Features ## Features -# Tailwind CSS IntelliSense +## Features - **Autocomplete** -# Tailwind CSS IntelliSense +## Features Intelligent suggestions for class names, [CSS directives](https://tailwindcss.com/docs/functions-and-directives/), and the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme) -# Tailwind CSS IntelliSense +## Features - **Hover Preview** -# Tailwind CSS IntelliSense +## Features See the complete CSS for a Tailwind class name by hovering over it +- **Autocomplete** +- **Autocomplete** # Tailwind CSS IntelliSense - +- **Autocomplete** -## Installation -In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation/#1-install-tailwind-via-npm) and a [Tailwind config file](https://tailwindcss.com/docs/installation/#3-create-your-tailwind-config-file-optional) named `tailwind.config.js` or `tailwind.js` in your workspace. -``` +CSS syntax highlighting after - +# Tailwind CSS IntelliSense - **Autocomplete** - +# Tailwind CSS IntelliSense Intelligent suggestions for class names, [CSS directives](https://tailwindcss.com/docs/functions-and-directives/), and the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme) # Tailwind CSS IntelliSense +- **Hover Preview** + +# Tailwind CSS IntelliSense See the complete CSS for a Tailwind class name by hovering over it { -- **Hover Preview** +# Tailwind CSS IntelliSense + "plaintext": "html" + } } ``` -### `tailwindCSS.validate` +### `tailwindcss.emmetCompletions` -Enable linting. Rules can be configured individually using the `tailwindcss.lint` settings: +Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`** -## Installation # Tailwind CSS IntelliSense + See the complete CSS for a Tailwind class name by hovering over it -## Installation -- `error`: rule violations will be considered "errors," typically represented by a red underline + "tailwindCSS.emmetCompletions": true +} +```