Tailwind CSS Snippets
Ready-made class lists for buttons, cards, forms, layouts, navbars and badges. Works in HTML, Vue, Svelte and Blade.
Type a prefix and press Tab. 72 snippets.
| Language | Prefix | What it inserts |
|---|---|---|
| HTML / XML | twbtn |
A primary button |
| HTML / XML | twbtn2 |
A secondary button |
| HTML / XML | twcard |
A card |
| HTML / XML | twcont |
A centered container |
| HTML / XML | twcenter |
Center everything |
| HTML / XML | twgrid |
A responsive grid |
| HTML / XML | twinput |
A text input |
| HTML / XML | twlabel |
A form label |
| HTML / XML | twbadge |
A badge |
| HTML / XML | twnav |
A navbar |
| HTML / XML | twhero |
A hero heading |
| HTML / XML | twmuted |
Muted text |
| HTML / XML | twmodal |
A modal backdrop |
| HTML / XML | twdark |
Light and dark colors |
| HTML / XML | twtrunc |
Truncate one line |
| HTML / XML | twvideo |
A 16:9 box |
| HTML / XML | twstack |
A vertical stack |
| HTML / XML | twspin |
A spinner |
| Vue | twbtn |
A primary button |
| Vue | twbtn2 |
A secondary button |
| Vue | twcard |
A card |
| Vue | twcont |
A centered container |
| Vue | twcenter |
Center everything |
| Vue | twgrid |
A responsive grid |
| Vue | twinput |
A text input |
| Vue | twlabel |
A form label |
| Vue | twbadge |
A badge |
| Vue | twnav |
A navbar |
| Vue | twhero |
A hero heading |
| Vue | twmuted |
Muted text |
| Vue | twmodal |
A modal backdrop |
| Vue | twdark |
Light and dark colors |
| Vue | twtrunc |
Truncate one line |
| Vue | twvideo |
A 16:9 box |
| Vue | twstack |
A vertical stack |
| Vue | twspin |
A spinner |
| Svelte | twbtn |
A primary button |
| Svelte | twbtn2 |
A secondary button |
| Svelte | twcard |
A card |
| Svelte | twcont |
A centered container |
| Svelte | twcenter |
Center everything |
| Svelte | twgrid |
A responsive grid |
| Svelte | twinput |
A text input |
| Svelte | twlabel |
A form label |
| Svelte | twbadge |
A badge |
| Svelte | twnav |
A navbar |
| Svelte | twhero |
A hero heading |
| Svelte | twmuted |
Muted text |
| Svelte | twmodal |
A modal backdrop |
| Svelte | twdark |
Light and dark colors |
| Svelte | twtrunc |
Truncate one line |
| Svelte | twvideo |
A 16:9 box |
| Svelte | twstack |
A vertical stack |
| Svelte | twspin |
A spinner |
| Laravel Blade | twbtn |
A primary button |
| Laravel Blade | twbtn2 |
A secondary button |
| Laravel Blade | twcard |
A card |
| Laravel Blade | twcont |
A centered container |
| Laravel Blade | twcenter |
Center everything |
| Laravel Blade | twgrid |
A responsive grid |
| Laravel Blade | twinput |
A text input |
| Laravel Blade | twlabel |
A form label |
| Laravel Blade | twbadge |
A badge |
| Laravel Blade | twnav |
A navbar |
| Laravel Blade | twhero |
A hero heading |
| Laravel Blade | twmuted |
Muted text |
| Laravel Blade | twmodal |
A modal backdrop |
| Laravel Blade | twdark |
Light and dark colors |
| Laravel Blade | twtrunc |
Truncate one line |
| Laravel Blade | twvideo |
A 16:9 box |
| Laravel Blade | twstack |
A vertical stack |
| Laravel Blade | twspin |
A spinner |
This extension runs no code and asks for no permissions.