This is just a single commit added to https://github.com/tailwindlabs/tailwindcss-intellisense that patches in Catppuccin.
eb0b8e55be | ||
---|---|---|
.vscode | ||
img | ||
media | ||
src | ||
syntaxes | ||
tests | ||
.gitignore | ||
.vscodeignore | ||
CHANGELOG.md | ||
README.md | ||
package-lock.json | ||
package.json | ||
tsconfig.json |
README.md
Tailwind CSS IntelliSense
Tailwind CSS class name completion for VS Code
Get it from the VS Code Marketplace →
Requirements
This extension requires:
- a
tailwind.config.js
file to be present in your project folder. You can create it withnpx tailwind init
. tailwindcss
to be installed (present in projectnode_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.)
- Class name suggestions, including support for Emmet syntax
- Suggestions include color previews where applicable, for example for text and background colors
- They also include a preview of the actual CSS for that class name
- CSS preview when hovering over class names
CSS
- Suggestions when using
@apply
and config helpers - Suggestions when using the
@screen
directive - Suggestions when using the
@variants
directive - Improves syntax highlighting when using
@apply
and config helpers
Examples
Class name suggestions, including support for Emmet syntax
CSS preview when hovering over class names
Suggestions when using @apply
and config helpers
Improves syntax highlighting when using @apply
and config helpers
Before:
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
}