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
- Download and install Visual Studio Code.
- Open the Extensions view (
Ctrl+Shift+X on Windows/Linux or ⌘+Shift+X on macOS).
- Search for Tailwind CSS Snippets or install it directly from the Visual Studio Marketplace.
- 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:
Fork the GitHub repository.
Create a new branch for your feature or fix:
git checkout -b feature/your-feature
Make your changes, commit them, and push to your fork.
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
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.
License
This project is licensed under the MIT License. See the LICENSE file for full details.
| |
