Direct rem-Based Sizing Utilities (e.g., w-5rem, h-10rem, max-w-15rem)

[atiquz]

🚀 Feature Request: Add Explicit rem-Based Sizing Utilities (w-64rem, h-32rem, max-w-80rem)

📖 Summary

Tailwind CSS currently uses abstract naming conventions for sizing utilities (e.g., w-5, w-5xl, max-w-7xl). While powerful, these can be unintuitive and require frequent config lookups. I propose adding explicit rem-based utilities (like w-64rem) for better clarity, design system alignment, and developer experience.

---

🎯 Problem Statement

1. Ambiguous Naming

   • w-5 = 1.25rem (spacing scale) vs w-5xl = 64rem (container scale) → Same number, wildly different meanings.
   • New developers must memorize two separate scales.

2. Design Tool Misalignment
   Tools like Figma/Sketch/XD use rem/px units, forcing manual conversion to Tailwind's abstract classes.

3. Accessibility Concerns
   While Tailwind uses rem under the hood, the abstraction hides this from developers who need to enforce rem-based layouts.

---

💡 Proposed Solution

Introduce direct rem-based utilities for sizing:

<!-- Current (confusing) -->
<div class="w-5xl max-w-7xl h-96">...</div>

<!-- Proposed (clear) -->
<div class="w-64rem max-w-80rem h-24rem">...</div>

🌟 Why This Matters

Tailwind excels at utility-first CSS, but abstraction shouldn't come at the cost of clarity. This change would:

• Reduce cognitive load for new developers
• Accelerate design-to-code workflows
• Make responsive layouts more intentional
• Align with CSS best practices

---

🌟 Request

Please consider adding rem-based sizing utilities to Tailwind core or as an official plugin.
Thank you for building such an amazing tool!
(Let me know if you'd like additional details or data to support this proposal.)

[philipp-spiess]

Hey! The default spacing scale is already defined based on rem:

@theme {
  --spacing: 0.25rem;
}

So each number is a multiple of one-quarter of rem, meaning m-4 is equivalent to m-[1rem] etc. If you want to use full rem unit scales, you can always change the spacing scale or use arbitrary values (like I did with m-[1rem]).

[atiquz]

Thanks for clarifying the rem-based spacing scale and the use of arbitrary values like m-[1rem]. I understand m-4 equals 1rem, and the current scale is powerful. However, I think adding utilities like w-1rem, h-5rem, text-1rem, w-1px, and text-15px in Tailwind CSS 5 would make it easier for beginners. These explicit unit names would reduce confusion and align with standard CSS units.

While w-[1rem] and w-[1px] are useful, they require more typing. Predefined utilities without brackets would simplify workflows. I’d love to see this in Tailwind 5.

Basically I want arbitrary values without brackets for w-[1rem] to w-1rem and for w-[1px] to w-1px for upcoming tailwind version.