Tailwind Simple Autocomplete
Simplified autocomplete for Tailwind CSS that groups values together, making it faster to write utility classes.
Features
Instead of scrolling through hundreds of individual classes like bg-amber-50, bg-amber-100, bg-amber-200... this extension shows grouped values:
- Type
bg- → See amber-50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
- Type
p- → See 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10,...
- Type
w- → See all width values grouped together
Supported Utilities
- Colors: bg, text, border, ring, shadow, outline, fill, stroke, etc.
- Spacing: p, m, px, py, pt, pr, pb, pl, gap, space-x, space-y
- Sizing: w, h, min-w, max-w, min-h, max-h, size
- Position: inset, top, right, bottom, left, start, end
- Typography: text, font, leading, tracking, line-clamp
- Border: border, rounded (all sides)
- Flexbox & Grid: gap, grid-cols, col-span, flex, grow, shrink, order
- Effects: opacity, shadow, blur, brightness, contrast, grayscale, saturate
- Backdrop: backdrop-blur, backdrop-brightness, backdrop-contrast, etc.
- Transforms: scale, rotate, translate, skew
- Transitions: duration, delay
- Z-index: z
- Scroll: scroll-m, scroll-p (all directions)
Compatibility
Works with both Tailwind CSS v3 and v4.
Usage
- Type a Tailwind prefix followed by
- (e.g., bg-, p-, w-)
- Select from the grouped autocomplete suggestions
- Choose your specific value from the dropdown
Disable Default Tailwind IntelliSense (Optional)
If you want to use ONLY this extension and hide the default Tailwind CSS IntelliSense suggestions, add this to your VSCode settings:
{
"tailwindCSS.suggestions": false
}
Or disable the official Tailwind CSS IntelliSense extension completely.
Requirements
- VSCode 1.80.0 or higher
- Works with HTML, JavaScript, TypeScript, React, Vue, Svelte, PHP (Laravel Blade), ASP.NET Razor, Astro, Markdown, and more
Supported File Types
- HTML (
.html)
- JavaScript/JSX (
.js, .jsx)
- TypeScript/TSX (
.ts, .tsx)
- React (
.jsx, .tsx)
- Vue (
.vue)
- Svelte (
.svelte)
- PHP/Laravel Blade (
.php, .blade.php)
- ASP.NET Razor (
.razor, .cshtml)
- Astro (
.astro)
- Markdown (
.md, .mdx)
Icon Setup
To add an icon to your extension:
- Create a PNG image named
icon.png (128x128 pixels minimum, recommended 256x256)
- Place it in the root directory of your extension
- The icon is already configured in
package.json
You can create an icon using:
- Figma, Canva, or any design tool
- AI tools like DALL-E, Midjourney
- Icon generators online
- Or use a simple Tailwind CSS logo variant
License
MIT
| |
