Home

tailwind-ctp-intellisense @b6dbe71797d8f41e5fcdcfaeee2cc1d5787bcb30 - refs - log -
-
https://git.jolheiser.com/tailwind-ctp-intellisense.git
Tailwind intellisense + Catppuccin
tailwind-ctp-intellisense / packages / tailwindcss-intellisense
..
drwxrwxrwx
163 B
.github/
drwxrwxrwx
77 B
.vscode/
drwxrwxrwx
36 B
media/
drwxrwxrwx
206 B
src/
drwxrwxrwx
52 B
syntaxes/
drwxrwxrwx
53 B
tests/
-rw-r--r--
25 B
.gitignore
-rwxr-xr-x
148 B
.vscodeignore
-rw-r--r--
5.7 kB
CHANGELOG.md
-rw-r--r--
5.5 kB
README.md
-rw-r--r--
972 kB
package-lock.json
-rwxr-xr-x
7.5 kB
package.json
-rwxr-xr-x
273 B
tsconfig.json

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.

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.

CSS Syntax Highlighting

Provides syntax definitions so that Tailwind features are highlighted correctly.

VS Code has built-it 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.

tailwindCSS.validate

Enable linting. Rules can be configured individually using the tailwindcss.lint settings:

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: