8f45144eb7 | ||
---|---|---|
.github/ISSUE_TEMPLATE | ||
.vscode | ||
packages | ||
types | ||
.gitignore | ||
README.md | ||
esbuild.js | ||
lerna.json | ||
package-lock.json | ||
package.json |
README.md
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.config.cjs
in your workspace.
Features
Autocomplete
Intelligent suggestions for class names, as well as CSS functions and directives.
Linting
Highlights errors and potential bugs in both your CSS and your markup.
Hover Preview
See the complete CSS for a Tailwind class name by hovering over it.
Tailwind CSS Language Mode
An alternative to VS Code's built-in CSS language mode which maintains full CSS IntelliSense support even when using Tailwind-specific at-rules. Syntax definitions are also provided so that Tailwind-specific syntax is highlighted correctly in all CSS contexts.
Recommended VS Code Settings
files.associations
Use the files.associations
setting to tell VS Code to always open .css
files in Tailwind CSS mode:
"files.associations": {
"*.css": "tailwindcss"
}
editor.quickSuggestions
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:
"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.files.exclude
Configure glob patterns to exclude from all IntelliSense features. Inherits all glob patterns from the files.exclude
setting. Default: ["**/.git/**", "**/node_modules/**", "**/.hg/**", "**/.svn/**"]
tailwindCSS.emmetCompletions
Enable completions when using Emmet-style syntax, for example div.bg-red-500.uppercase
. Default: false
tailwindCSS.classAttributes
The HTML attributes for which to provide class completions, hover previews, linting etc. Default: class
, className
, ngClass
tailwindCSS.colorDecorators
Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions. Default: true
Note that
editor.colorDecorators
must be enabled for color decorators to be shown.
tailwindCSS.showPixelEquivalents
Show px
equivalents for rem
CSS values in completions and hovers. Default: true
tailwindCSS.rootFontSize
Root font size in pixels. Used to convert rem
CSS values to their px
equivalents. See tailwindCSS.showPixelEquivalents
. Default: 16
tailwindCSS.hovers
Enable hovers. Default: true
tailwindCSS.suggestions
Enable autocomplete suggestions. Default: true
tailwindCSS.codeActions
Enable code actions. Default: true
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
tailwindCSS.lint.recommendedVariantOrder
Class variants not in the recommended order (applies in JIT mode only). Default: warning
tailwindCSS.inspectPort
Enable the Node.js inspector agent for the language server and listen on the specified port. Default: null
Experimental Extension Settings
Experimental settings may be changed or removed at any time.
tailwindCSS.experimental.configFile
Default: null
By default the extension will automatically use the first tailwind.config.js
or tailwind.config.cjs
file that it can find to provide Tailwind CSS IntelliSense. Use this setting to manually specify the config file(s) yourself instead.
If your project contains a single Tailwind config file you can specify a string value:
"tailwindCSS.experimental.configFile": ".config/tailwind.config.js"
For projects with multiple config files use an object where each key is a config file path and each value is a glob pattern (or array of glob patterns) representing the set of files that the config file applies to:
"tailwindCSS.experimental.configFile": {
"themes/simple/tailwind.config.js": "themes/simple/**",
"themes/neon/tailwind.config.js": "themes/neon/**"
}
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
. 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
. - Make sure your VS Code settings aren’t causing your Tailwind config file to be hidden/ignored, for example via the
files.exclude
orfiles.watcherExclude
settings. - Take a look at the language server output by running the
Tailwind CSS: Show Output
command from the command palette. This may show errors that are preventing the extension from activating.