A visual studio code extension
Rich UI CollectionWe have a rich UI collection for building any kind of website. We are still gathering more components and sections for your website.
Learn MoreBuilt for BeginnersTailwind Snippets is very helpful for beginners. It is also helpful for those who want components in Tailwind CSS like Bootstrap or Material UI.
Learn MoreUseful for DevelopersThose developers who don't want to focus on design now can only focus on Development and let Tailwind Snippets to generate the Design of their project.
Learn More24/7 SupportIf you face any issue with this extension or want to add your favourite components to Tailwind Snippets then Submit the form below.
Learn More
About TailwindES7Snippets
Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. It is becoming popular day by day. So we should adopt it on our project. But some beginners faced problems when they tried to use it for first time. So I have developed this extension. This extension will help you to build website faster than ever. You will get all necessary sections and components for your website. Just you have to write a shortcut and VS Code will suggest you the code.
Some Snippets Shortcuts
| Component | Snippet | Description |
|---|---|---|
| Button 1 | tw-button-animated | A button with animated effects |
| Button 2 | tw-button-cartoon | A cartoon-style button |
| Button 3 | tw-button-curtains | A button with curtain-like animation |
| Card 1 | tw-card-1 | Basic card style 1 |
| Card 2 | tw-card-2 | Basic card style 2 |
| Card 3 | tw-card-animated1 | Animated card style 1 |
| Loader 1 | tw-loader-1 | Basic loader style 1 |
| Loader 2 | tw-loader-2 | Basic loader style 2 |
| Loader 3 | tw-loader-3 | Basic loader style 3 |
| Input 1 | tw-input-cartoon | Cartoon-style input field |
| Input 2 | tw-input-default1 | Default input field style 1 |
| Input 3 | tw-input-default2 | Default input field style 2 |
| Radio Button 1 | tw-radio-colorPicker | Color picker radio button |
| Radio Button 2 | tw-radio-default1 | Default radio button style 1 |
| Radio Button 3 | tw-radio-default2 | Default radio button style 2 |
| Tooltip 1 | tw-tooltip-default | Default tooltip style |
| Tooltip 2 | tw-tooltip-github | GitHub-style tooltip |
| Tooltip 3 | tw-tooltip-linkedin | LinkedIn-style tooltip |
| Form 1 | tw-form-1 | Basic form style 1 |
| Toggle Button 1 | tw-toggle-apple | Apple-style toggle button |
| Toggle Button 2 | tw-toggle-check | Checkbox-style toggle button |
| Toggle Button 3 | tw-toggle-color | Color-changing toggle button |