diff --git a/README.md b/README.md index 27cc6e8..839b718 100644 --- a/README.md +++ b/README.md @@ -1,60 +1,26 @@ # Tailwind CSS IntelliSense -> [Tailwind CSS](https://tailwindcss.com/) class name completion for VS Code +## Installation -**[Get it from the VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)** - -HTML autocompletion - -## Requirements - -This extension requires: -- a `tailwind.config.js` file to be [present in your project folder](https://github.com/bradlc/vscode-tailwindcss/blob/master/package.json#L38). You can create it with `npx tailwind init`. -- `tailwindcss` to be installed (present in project `node_modules/`) +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. ## Features -Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type. +- **Autocomplete** + 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) -It also includes features that improve the overall Tailwind experience, including improved syntax highlighting, and CSS previews. +- **Hover Preview** + See the complete CSS for a Tailwind class name by hovering over it -### HTML (including Vue, JSX, PHP etc.) +- **Linting** + Highlights errors and potential bugs in your HTML and CSS files -- [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 Syntax Highlighting** + Provides syntax definitions so that use of Tailwind features doesn’t mess up your syntax highlighting -### CSS +## Screenshots/Examples? -- [Suggestions when using `@apply` and config helpers](#suggestions-when-using-apply-and-config) -- Suggestions when using the `@screen` directive -- Suggestions when using the `@variants` directive -- [Improves syntax highlighting when using `@apply` and config helpers](#improves-syntax-highlighting-when-using-apply-and-config-helpers) - -## Examples - -#### Class name suggestions, including support for Emmet syntax - -HTML autocompletion - -#### CSS preview when hovering over class names - -HTML hover preview - -#### Suggestions when using `@apply` and config helpers - -CSS autocompletion - -#### Improves syntax highlighting when using `@apply` and config helpers - -Before: - -CSS syntax highlighting before - -After: - -CSS syntax highlighting after +## Troubleshooting ## Settings @@ -70,7 +36,7 @@ This setting allows you to add additional language support. The key of each entr } ``` -### `tailwindcss.emmetCompletions` +### `tailwindCSS.emmetCompletions` Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`** @@ -79,3 +45,11 @@ Enable completions when using [Emmet](https://emmet.io/)-style syntax, for examp "tailwindCSS.emmetCompletions": true } ``` + +### `tailwindCSS.validate` + +Enable linting. Rules can be configured individually using the `tailwindcss.lint` settings: + +- `ignore`: disable lint rule entirely +- `warning`: rule violations will be considered "warnings," typically represented by a yellow underline +- `error`: rule violations will be considered "errors," typically represented by a red underline