Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Tailwind to CSS SnippetsNew to Visual Studio Code? Get it now.
Tailwind to CSS Snippets

Tailwind to CSS Snippets

blair-c

|
5,445 installs
| (4) | Free
Tailwind classes to CSS properties code snippets
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Tailwind to CSS Snippets

Tailwind to CSS Snippets allows users to type the Tailwind classes they know, and output CSS properties and at-rules for use in traditional CSS files.

Installation

Install via the Visual Studio Code Marketplace →

Features

Tailwind class names serve as shorthand snippets for the CSS properties they apply.

Typing mb-1 presents various autocomplete options, namely the mb-1 class which adds a bottom margin of 0.25rem

Access media queries for responsive and accessible design, and other Tailwind at-rule classes.

Typing 2xl serves as a shorthand for a media query with a min-width of 1536px

Support

CSS, SCSS, and Less are currently supported.

Recommended VS Code Settings

It is recommended to set Snippet Suggestions to inline (default) or top, otherwise snippets will be hidden or below all other suggestions.

Troubleshooting

If you use the Tailwind CSS IntelliSense VS Code plugin, you may have the following CSS file association set, as recommended by its documentation:

"files.associations": {
  "*.css": "tailwindcss"
}

Remove this association for Tailwind to CSS code snippets to be properly enabled in .css files.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft