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 and config()
• Suggestions when using the @screen directive
• Improves syntax highlighting when using @apply and config()

Examples

Class name suggestions, including support for Emmet syntax

CSS preview when hovering over class names

Suggestions when using @apply and config()

Improves syntax highlighting when using @apply and config()

Before:

After:

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/)