This is just a single commit added to https://github.com/tailwindlabs/tailwindcss-intellisense that patches in Catppuccin.
|
||
---|---|---|
.vscode | ||
img | ||
src | ||
syntaxes | ||
.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 →
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
andconfig()
- Suggestions when using the
@screen
directive - Improves syntax highlighting when using
@apply
andconfig()
Examples
Class name suggestions, including support for Emmet syntax
![HTML autocompletion](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html.gif)
CSS preview when hovering over class names
![HTML hover preview](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/html-hover.gif)
Suggestions when using @apply
and config()
![CSS autocompletion](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css.gif)
Improves syntax highlighting when using @apply
and config()
Before:
![CSS syntax highlighting before](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-before.png)
After:
![CSS syntax highlighting after](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/img/css-highlighting-after.png)