Tailwind CSS Snippets

This Visual Studio Code extension provides a comprehensive set of Tailwind CSS snippets to speed up your development workflow.

Requirements

• Visual Studio Code version 1.46.0 or higher

Installation

1. Download and install Visual Studio Code.
2. Open the Extensions view (Ctrl+Shift+X on Windows/Linux or ⌘+Shift+X on macOS).
3. Search for Tailwind CSS Snippets or install it directly from the Visual Studio Marketplace.
4. Reload the editor window to activate the extension.

Snippet Usage

Type part of a snippet prefix, then press Tab or Enter to expand it. The following table lists available snippet prefixes and their respective purposes:

Prefix	Description
tailwind_five_stars	5-star rating display
tailwind_button_combination	Button combination
tailwind_button_ghost	Ghost button
tailwind_button_loading	Loading button
tailwind_button_outline	Outline button
tailwind_button_rounded	Rounded button
tailwind_button_icon	Button with icon
tailwind_button	Standard button
tailwind_checkbox	Checkbox input
tailwind_featured_list	Featured items list
tailwind_form_group	Grouped form elements
tailwind_grid_scroll_snap	Horizontally scrollable grid
tailwind_password_toggle	Toggleable password field
tailwind_input_search_clear	Search input with clear
tailwind_input_search	Search input field
tailwind_input_icon	Input field with icon
tailwind_input	Standard input field
tailwind_grid	Grid layout
tailwind_link_image	Image wrapped in a link
tailwind_loading	Loading indicator
tailwind_modal_close	Modal with close button
tailwind_modal	Modal window
tailwind_multi_avatar	Grouped avatars
tailwind_notification	Notification component
tailwind_overlay	Overlay element
tailwind_progress	Progress bar
tailwind_radio	Radio button
tailwind_rounded_icon	Rounded icon container
tailwind_signup_form	Signup form layout
tailwind_counter	Counter component
tailwind_textarea	Textarea field
tailwind_toggle	Toggle switch
tailwind_upload	File upload component

Contributing

Contributions to the Tailwind CSS Snippets are welcome and appreciated. To contribute:

1. Fork the GitHub repository.

2. Create a new branch for your feature or fix:

   git checkout -b feature/your-feature

3. Make your changes, commit them, and push to your fork.

4. Submit a Pull Request targeting the main branch.

Before contributing, please review the Contribution Guidelines for coding standards, testing, and commit message conventions. If you encounter a bug or wish to request a new feature, please open an Issue.

Changelog

For a complete list of changes, see the CHANGELOG.md.

Authors

• Manuel Gil - Owner - @ManuelGil

For a complete list of contributors, please refer to the contributors page.

Follow Me

• GitHub:
• X (formerly Twitter):

Other Extensions

• Auto Barrel Automatically generates and maintains barrel (index.ts) files for your TypeScript projects.

• Angular File Generator Generates boilerplate and navigates your Angular (9→20+) project from within the editor, with commands for components, services, directives, modules, pipes, guards, reactive snippets, and JSON2TS transformations.

• NestJS File Generator Simplifies creation of controllers, services, modules, and more for NestJS projects, with custom commands and Swagger snippets.

• NestJS Snippets Ready-to-use code patterns for creating controllers, services, modules, DTOs, filters, interceptors, and more in NestJS.

• T3 Stack / NextJS / ReactJS File Generator Automates file creation (components, pages, hooks, API routes, etc.) in T3 Stack (Next.js, React) projects and can start your dev server from VSCode.

• Drizzle ORM Snippets Collection of code snippets to speed up Drizzle ORM usage, defines schemas, migrations, and common database operations in TypeScript/JavaScript.

• CodeIgniter 4 Spark Scaffolds controllers, models, migrations, libraries, and CLI commands in CodeIgniter 4 projects using Spark, directly from the editor.

• CodeIgniter 4 Snippets Snippets for accelerating development with CodeIgniter 4, including controllers, models, validations, and more.

• CodeIgniter 4 Shield Snippets Snippets tailored to CodeIgniter 4 Shield for faster authentication and security-related code.

• Mustache Template Engine - Snippets & Autocomplete Snippets and autocomplete support for Mustache templates, making HTML templating faster and more reliable.

Recommended Browser Extension

For developers who work with .vsix files for offline installations or distribution, the complementary One-Click VSIX extension is recommended, available for both Chrome and Firefox.

One-Click VSIX integrates a direct "Download Extension" button into each VSCode Marketplace page, ensuring the file is saved with the .vsix extension, even if the server provides a .zip archive. This simplifies the process of installing or sharing extensions offline by eliminating the need for manual file renaming.

• Get One-Click VSIX for Chrome →
• Get One-Click VSIX for Firefox →

License

This project is licensed under the MIT License. See the LICENSE file for full details.