This is just a single commit added to https://github.com/tailwindlabs/tailwindcss-intellisense that patches in Catppuccin.
 
 
 
Go to file
Brad Cornes 9ac3fdcd5d merge 2020-06-11 16:57:12 +01:00
.vscode add .vscode 2020-06-11 16:53:12 +01:00
media restructure 2020-05-03 15:57:15 +01:00
src provide corePlugins helper when running plugins 2020-06-11 12:10:47 +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-11 16:20:03 +01:00
CHANGELOG.md fix changelog spacing 2020-06-11 16:06:39 +01:00
README.md add requirements to readme (thanks @ledenis) 2020-06-11 16:13:49 +01:00
package-lock.json v0.3.0-alpha.3 2020-05-25 20:09:55 +01:00
package.json update setting descriptions 2020-06-11 16:45:58 +01:00
tsconfig.json restructure 2020-05-03 15:57:15 +01:00

README.md

Tailwind CSS IntelliSense

Tailwind CSS class name completion for VS Code

Get it from the VS Code Marketplace →

HTML autocompletion

Requirements

This extension requires:

  • a tailwind.config.js file to be present in your project folder. You can create it with npx tailwind init.
  • tailwindcss to be installed (present in project node_modules/)

Features

Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type.

It also includes features that improve the overall Tailwind experience, including improved syntax highlighting, and CSS previews.

HTML (including Vue, JSX, PHP etc.)

CSS

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

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
}