Tailwind CSS Auto Bracket
A VS Code extension that automatically generates bracket syntax for Tailwind CSS, making your coding experience smoother and faster.
Features
- Quick input using unit abbreviations:
w10px → w-[10px]
- Support for various units: px, rem, vh, vw, % and more
- Support for negative values:
border-1px → border-[-1px]
- Support for various properties: width, height, padding, margin and more
How to Use
- Now supports Tailwind class names in any string, not just className!.
- Type the property name, number, and unit abbreviation.
- Example:
w10px, h20vh, p5r, m10p
- Select the autocomplete suggestion or press Enter.
Supported Property Abbreviations
- Width/Height:
w, h, minw, maxw, minh, maxh
- Padding:
p, px, py, pt, pr, pb, pl
- Margin:
m, mx, my, mt, mr, mb, ml
- Gap:
gap, gapx, gapy
- Border:
border, bordert, borderr, borderb, borderl
- Position:
top, right, bottom, left, inset
Supported Unit Abbreviations
px: px (Example: w10px → w-[10px])r: rem (Example: w1.5r → w-[1.5rem])vh: viewport height (Example: h20vh → h-[20vh])vw: viewport width (Example: w50vw → w-[50vw])%: percent (Example: w50% → w-[50%])e: em (Example: w2e → w-[2em])
Requirements
- Visual Studio Code 1.60.0 or higher
- Working with JavaScript, TypeScript, React, HTML, CSS, or Vue files
Extension Settings
This extension doesn't add any settings to customize, it works right out of the box.
Known Issues
- Now works in all string contexts, including backtick (`) templates!
- Only processes patterns with a valid unit abbreviation (e.g.
w10px, not just w10 w10p)
Release Notes
1.0.5
1.0.4
- Enhanced to work in all string contexts, including backtick (`) templates and regular strings
- No longer limited to className/class attributes
1.0.0
- Initial release
- Automatic bracket syntax generation for Tailwind CSS
- Support for various units (px, rem, vh, vw, %)
- Support for various properties (width, height, padding, margin, etc.)
- Support for negative values
1.0.1
Fixed issue #.
1.1.0
Added features X, Y, and Z.
Following extension guidelines
This extension follows the VS Code Extension Guidelines to ensure quality, performance, and compatibility with the VS Code ecosystem.
🔗 You can find and install this extension from the Visual Studio Marketplace.
| |
