📐 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:

<div class="w-[37%]"></div>

With tailwindcss-percent-utils, write cleaner and more consistent utilities:

<div class="w-pr-37"></div>

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

npm install tailwindcss-percent-utils

pnpm

pnpm add tailwindcss-percent-utils

yarn

yarn add tailwindcss-percent-utils

🚀 Setup

Tailwind CSS v4

@import "tailwindcss";

@plugin "tailwindcss-percent-utils";

Tailwind CSS v3

module.exports = {
  plugins: [
    require("tailwindcss-percent-utils"),
  ],
};

📐 Examples

Width & Height

<div class="w-pr-80 h-pr-60"></div>

Compiles to

width: 80%;
height: 60%;

Padding

<div class="p-pr-10 px-pr-5"></div>

Margin

<div class="-mt-pr-10 ml-pr-20"></div>

Position

<div class="absolute -top-pr-20 left-pr-50"></div>

Flexbox

<div class="basis-pr-50 grow-pr-80 shrink-pr-20"></div>

Compiles to

flex-basis: 50%;
flex-grow: 0.8;
flex-shrink: 0.2;

Responsive

<div class="w-pr-100 md:w-pr-75 lg:w-pr-50"></div>

Variants

<div class="hover:w-pr-75 focus:h-pr-50"></div>

🛠 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

0 → 1000

Examples

w-pr-25   → 25%
w-pr-50   → 50%
w-pr-100  → 100%
w-pr-250  → 250%
w-pr-1000 → 1000%

Flex Grow / Shrink

grow-pr-80   → 0.8
grow-pr-100  → 1
grow-pr-250  → 2.5
grow-pr-1000 → 10

🤝 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.