5.5 KiB
![](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/tailwindcss-intellisense/.github/banner-dark.png)
Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
Installation
Install via the Visual Studio Code Marketplace →
In order for the extension to activate you must have tailwindcss
installed and a Tailwind config file named tailwind.config.js
or tailwind.js
in your workspace.
Features
Autocomplete
Intelligent suggestions for class names, as well as CSS functions and directives.
![](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/tailwindcss-intellisense/.github/autocomplete.png)
Linting
Highlights errors and potential bugs in both your CSS and your markup.
![](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/tailwindcss-intellisense/.github/linting.png)
Hover Preview
See the complete CSS for a Tailwind class name by hovering over it.
![](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/tailwindcss-intellisense/.github/hover.png)
CSS Syntax Highlighting
Provides syntax definitions so that Tailwind features are highlighted correctly.
Recommended VS Code Settings
VS Code has built-in CSS validation which may display errors when using Tailwind-specific syntax, such as @apply
. You can disable this with the css.validate
setting:
"css.validate": false
By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions
setting may improve your experience, particularly when editing Tailwind classes within JSX:
"editor.quickSuggestions": {
"strings": true
}
Extension Settings
tailwindCSS.includeLanguages
This setting allows you to add additional language support. The key of each entry is the new language ID and the value is any one of the extensions built-in languages, depending on how you want the new language to be treated (e.g. html
, css
, or javascript
):
{
"tailwindCSS.includeLanguages": {
"plaintext": "html"
}
}
tailwindCSS.emmetCompletions
Enable completions when using Emmet-style syntax, for example div.bg-red-500.uppercase
. Default: false
{
"tailwindCSS.emmetCompletions": true
}
tailwindCSS.colorDecorators
Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions.
inherit
: Color decorators are rendered ifeditor.colorDecorators
is enabled.on
: Color decorators are rendered.off
: Color decorators are not rendered.
tailwindCSS.validate
Enable linting. Rules can be configured individually using the tailwindcss.lint
settings:
ignore
: disable lint rule entirelywarning
: rule violations will be considered "warnings," typically represented by a yellow underlineerror
: rule violations will be considered "errors," typically represented by a red underline
tailwindCSS.lint.invalidScreen
Unknown screen name used with the @screen
directive. Default: error
tailwindCSS.lint.invalidVariant
Unknown variant name used with the @variants
directive. Default: error
tailwindCSS.lint.invalidTailwindDirective
Unknown value used with the @tailwind
directive. Default: error
tailwindCSS.lint.invalidApply
Unsupported use of the @apply
directive. Default: error
tailwindCSS.lint.invalidConfigPath
Unknown or invalid path used with the theme
helper. Default: error
tailwindCSS.lint.cssConflict
Class names on the same HTML element which apply the same CSS property or properties. Default: warning
Troubleshooting
If you’re having issues getting the IntelliSense features to activate, there are a few things you can check:
- Ensure that you have a Tailwind config file in your workspace and that this is named
tailwind.config.js
ortailwind.js
. Check out the Tailwind documentation for details on creating a config file. - Ensure that the
tailwindcss
module is installed in your workspace, vianpm
,yarn
, orpnpm
. Tailwind CSS IntelliSense does not currently support Yarn Plug'n'Play. - If you installed
tailwindcss
or created your config file while your project was already open in Visual Studio Code you may need to reload the editor. You can either restart VS Code entirely, or use theDeveloper: Reload Window
command which can be found in the command palette. - Make sure your VS Code settings aren’t causing your Tailwind config file to be excluded from search, for example via the
search.exclude
setting.