PluginStatstailwindcss-percent-utils weekly downloads statistics
By SnehMoradia (2 listings) · npm · Tailwind plugins
Tailwind CSS plugin for percentage-based sizing, spacing, positioning, and flex utilities without square bracket syntax.
tailwindcss-percent-utils has 3 recorded weekly downloads on npm, a decrease of 89.7% over the past 30 days.
It ranks #2112 of 2,256 tracked npm listings by weekly downloads.
Over 90 days, weekly downloads changed by -93.6%.
PluginStats has 121 daily observations since Jun 19, 2026; the latest is from Oct 17, 2026.
About tailwindcss-percent-utils
📐 tailwindcss-percent-utils
A Tailwind CSS plugin that adds intuitive percentage utilities for sizing, spacing, positioning, and flex layouts—without arbitrary value syntax ([]).
✅ Tailwind CSS v3 & v4 • 🚀 Zero Configuration • 📏 Built-in Percentage Scale
✨ Why?
Tailwind CSS supports percentage values using arbitrary values:
With tailwindcss-percent-utils, write cleaner and more consistent utilities:
No square brackets.
Better readability.
Cleaner autocomplete.
Works seamlessly with Tailwind CSS.
✨ Features
• 📏 Percentage utilities from 0% to 1000% • 📦 Width, Height, Min/Max Size • 📐 Padding & Margin utilities • 📍 Position utilities • 💪 Flex Basis, Grow & Shrink utilities • ➖ Native negative support for margins and positioning • ⚡ Zero configuration • ✅ Tailwind CSS v3 & v4 compatible • 🚀 Works with all frameworks that use Tailwind CSS
🌍 Works With
• HTML • React • Next.js • Vue • Nuxt • Angular • Svelte • Astro • Laravel • WordPress • Remix • SolidJS • Qwik • Any Tailwind CSS project
📦 Installation
npm
pnpm
yarn
🚀 Setup
Tailwind CSS v4
Tailwind CSS v3
📐 Examples
Width & Height
Compiles to
Padding
Margin
Position
Flexbox
Compiles to
Responsive
Variants
🛠 Supported Utilities
| Utility | CSS Property |
| w-pr-* | width | | h-pr-* | height | | min-w-pr-* | min-width | | min-h-pr-* | min-height | | max-w-pr-* | max-width | | max-h-pr-* | max-height | | p-pr-* | padding | | px-pr-* | padding-inline | | py-pr-* | padding-block | | pt-pr-* | padding-top | | pr-pr-* | padding-right | | pb-pr-* | padding-bottom | | pl-pr-* | padding-left | | m-pr-* | margin | | mx-pr-* | margin-inline | | my-pr-* | margin-block | | mt-pr-* | margin-top | | mr-pr-* | margin-right | | mb-pr-* | margin-bottom | | ml-pr-* | margin-left | | top-pr-* | top | | right-pr-* | right | | bottom-pr-* | bottom | | left-pr-* | left | | basis-pr-* | flex-basis | | grow-pr-* | flex-grow | | shrink-pr-* | flex-shrink |
Negative values are supported for:
• Margin • Top • Right • Bottom • Left
📊 Value Scale
Percentage Utilities
Examples
Flex Grow / Shrink
🤝 Contributing
Contributions, bug reports, and feature requests are welcome.
1. Fork the repository 2. Create a feature branch 3. Commit your changes 4. Open a Pull Request
📄 License
Licensed under the MIT License.
Made with ❤️ by Sneh Moradia
⭐ If this project helps you, please consider giving it a star.
Description from the npm listing.
- tailwindcss
- tailwind
- tailwindcss-plugin
- tailwind-plugin
- css
- utility
- utilities
- percentage
- percent
- width
- height
- spacing
- padding
- margin
- position
- layout
- flexbox
- flex-grow
- flex-shrink
- flex-basis
Where tailwindcss-percent-utils sits in the listing
Each band is one page of 20. Weekly downloads on a log scale. Placement is projected from weekly downloads, so it can differ from the marketplace's own sort order. Hover a dot to see the listing.
Charts
Images: 30d · 1y · all time · 1600×900 dark
Adoption over time
7/30/90-day growth
Filled points are observed values; hollow points come from Internet Archive snapshots of the listing page. Dashed segments span periods with no observations — values between points are not interpolated.
Recent observations
Full history (121)Similar npm Tailwind plugins plugins
Data source
Weekly downloads (trailing 7 complete days) come from the official npm downloads API. Downloads include CI and mirrors and are not equivalent to installs or users. npm publishes no ratings.
Listing: https://www.npmjs.com/package/tailwindcss-percent-utils. First seen Oct 16, 2026; last successful collection Oct 19, 2026. See the methodology.