This is just a single commit added to https://github.com/tailwindlabs/tailwindcss-intellisense that patches in Catppuccin.
 
 
 
Go to file
Brad Cornes ac2172caae add setting descriptions 2020-06-23 10:24:53 +01:00
.github readme wip 2020-06-22 20:53:13 +01:00
.vscode add .vscode 2020-06-11 16:53:12 +01:00
img restore readme images 2020-06-12 12:34:01 +01:00
media restructure 2020-05-03 15:57:15 +01:00
src tweak postcss cleanup 2020-06-22 12:03:45 +01:00
syntaxes restructure 2020-05-03 15:57:15 +01:00
tests restructure 2020-05-03 15:57:15 +01:00
.gitignore restructure 2020-05-03 15:57:15 +01:00
.vscodeignore update .vscodeignore 2020-06-12 13:12:29 +01:00
CHANGELOG.md fix changelog spacing 2020-06-11 16:06:39 +01:00
README.md readme wip 2020-06-22 21:13:06 +01:00
package-lock.json replace js-levenshtein with sift-string 2020-06-18 14:53:20 +01:00
package.json add setting descriptions 2020-06-23 10:24:53 +01:00
tsconfig.json restructure 2020-05-03 15:57:15 +01:00

README.md

Installation

View in 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, CSS directives, and the theme helper

  • Hover Preview
    See the complete CSS for a Tailwind class name by hovering over it

  • Linting
    Highlights errors and potential bugs in your HTML and CSS files

  • CSS Syntax Highlighting
    Provides syntax definitions so that use of Tailwind features doesnt mess up your syntax highlighting

Troubleshooting

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.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

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. For example class names which contain pseudo selectors cannot currently be used with @apply. Default: error

tailwindCSS.lint.invalidConfigPath

Unknown or invalid path used with the theme helper. Default: error

tailwindCSS.lint.cssPropertyConflict

Class names on the same HTML element which apply the same CSS property or properties. Default: warning