https://github.com/manuelgil/vscode-tailwindcss-snippets

This extension for Visual Studio Code adds snippets for Tailwind CSS for faster development.
https://github.com/manuelgil/vscode-tailwindcss-snippets

tailwindcss vscode-extension

Last synced: 10 months ago
JSON representation

This extension for Visual Studio Code adds snippets for Tailwind CSS for faster development.

• Host: GitHub
• URL: https://github.com/manuelgil/vscode-tailwindcss-snippets
• Owner: ManuelGil
• License: mit
• Created: 2025-01-14T04:42:18.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-01-14T20:18:16.000Z (12 months ago)
• Last Synced: 2025-03-19T10:08:41.757Z (10 months ago)
• Topics: tailwindcss, vscode-extension
• Homepage: https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-tailwindcss-snippets
• Size: 11.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# Tailwind CSS Snippets for VSCode Editor

[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/imgildev.vscode-tailwindcss-snippets?style=for-the-badge&label=VS%20Marketplace&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-tailwindcss-snippets)

[![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/imgildev.vscode-tailwindcss-snippets?style=for-the-badge&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-tailwindcss-snippets)

[![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/imgildev.vscode-tailwindcss-snippets?style=for-the-badge&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-tailwindcss-snippets)

[![Visual Studio Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/imgildev.vscode-tailwindcss-snippets?style=for-the-badge&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-tailwindcss-snippets&ssr=false#review-details)

[![GitHub Repo stars](https://img.shields.io/github/stars/ManuelGil/vscode-tailwindcss-snippets?style=for-the-badge&logo=github)](https://github.com/ManuelGil/vscode-tailwindcss-snippets)

[![GitHub license](https://img.shields.io/github/license/ManuelGil/vscode-tailwindcss-snippets?style=for-the-badge&logo=github)](https://github.com/ManuelGil/vscode-tailwindcss-snippets/blob/main/LICENSE)

This extension for Visual Studio Code adds snippets for Tailwind CSS for faster development.

## Requirements

- VSCode 1.46.0 or later

## Usage

### Snippets

Type part of snippet, press `Tab` or `Enter`, and the snippet unfolds. Below is a list of the most important shortcuts.

| Title                       | Purpose                     |

| --------------------------- | --------------------------- |

| tailwind_five_stars         | 5 stars                     |

| tailwind_button_combination | Button combination          |

| tailwind_button_ghost       | Button ghost                |

| tailwind_button_loading     | Button loading              |

| tailwind_button_outline     | Button outline              |

| tailwind_button_rounded     | Button rounded              |

| tailwind_button_icon        | Button with icon            |

| tailwind_button             | Button                      |

| tailwind_checkbox           | Checkbox                    |

| tailwind_featured_list      | Featured list               |

| tailwind_form_group         | Form group                  |

| tailwind_grid_scroll_snap   | Grid snap scroll horizontal |

| tailwind_password_toggle    | Input password toggle       |

| tailwind_input_search_clear | Input search clear          |

| tailwind_input_search       | Input search                |

| tailwind_input_icon         | Input with icon             |

| tailwind_input              | Input                       |

| tailwind_grid               | Layout grid equals          |

| tailwind_link_image         | Link wrap image             |

| tailwind_loading            | Loading circle              |

| tailwind_modal_close        | Modal close                 |

| tailwind_modal              | Modal                       |

| tailwind_multi_avatar       | Multi avatar                |

| tailwind_notification       | Notification                |

| tailwind_overlay            | Overlay                     |

| tailwind_progress           | Progress bar                |

| tailwind_radio              | Radio                       |

| tailwind_rounded_icon       | Rounded icon                |

| tailwind_signup_form        | Signup form                 |

| tailwind_counter            | Simple counter              |

| tailwind_textarea           | Textarea                    |

| tailwind_toggle             | Toggle                      |

| tailwind_upload             | Upload file                 |

## Follow Me

If you enjoy using this extension, consider following me for updates on this and future projects:

[![GitHub followers](https://img.shields.io/github/followers/ManuelGil?style=for-the-badge&logo=github)](https://github.com/ManuelGil)

[![X (formerly Twitter) Follow](https://img.shields.io/twitter/follow/imgildev?style=for-the-badge&logo=x)](https://twitter.com/imgildev)

## VSXpert Template

This extension was created using [VSXpert](https://vsxpert.com), a template that helps you create Visual Studio Code extensions with ease. VSXpert provides a simple and easy-to-use structure to get you started quickly.

## Other Extensions

- [Angular File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator)

- [NestJS File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nestjs-generator)

- [T3 Stack / NextJS / ReactJS File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nextjs-generator)

- [JSON Flow](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-json-flow)

- [Auto Barrel](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel)

- [CodeIgniter 4 Spark](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-codeigniter4-spark)

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)

## Authors

- **Manuel Gil** - _Owner_ - [ManuelGil](https://github.com/ManuelGil)

See also the list of [contributors](https://github.com/ManuelGil/vscode-tailwindcss-snippets/contributors) who participated in this project.

## License

Astro DB Snippets for VSCode is licensed under the MIT License - see the [MIT License](https://opensource.org/licenses/MIT) for details.