PluginStatstailwindcss-text-box-trim weekly downloads statistics
By michaelcummings12 · npm · Tailwind plugins
Tailwind CSS utility classes for leading-trim, text-box-trim, and text-box-edge
tailwindcss-text-box-trim has 165 recorded weekly downloads on npm, an increase of 37.5% over the past 30 days.
It ranks #1622 of 2,256 tracked npm listings by weekly downloads.
Over 90 days, weekly downloads changed by -39.6%.
PluginStats has 121 daily observations since Jun 19, 2026; the latest is from Oct 17, 2026.
About tailwindcss-text-box-trim
tailwindcss-text-box-trim
Perfect typography spacing for Tailwind CSS v4+
Before: Standard text with excess space. After: Text with _text-box-trim_ applied, removing the excess space for perfect alignment.
Create pixel-perfect typographical layouts with precise control over the vertical spacing of text 🤩
Eliminate annoying leading whitespace and cap-height alignment issues with standard CSS. This package provides Tailwind CSS utilities for the CSS Text Box Trim specification.
Why use this?
Standard web typography often includes "internal leading" (extra space above and below the text glyphs) which makes it difficult to align text containers precisely with images, buttons, or other elements.
text-box-trim solves this by cropping that extra space, making your text behave more like a standard box model element.
Use text-box-trim along with text-box-edge to control which sides of the text box are trimmed and how much space to trim.
Installation
Install the package via npm:
Usage
This package is designed for Tailwind CSS v4+.
Import the CSS in your main CSS file (e.g., global.css):
Browser Support
text-box-trim is baseline available in Chrome 133+ and Safari 18.2+.
Firefox support is pending.
Utilities
_box-trim-\*_
Control which sides of the text box are trimmed.
• box-trim-both: Trims space from both start (top) and end (bottom). • box-trim-start: Trims space from the start (top) only. • box-trim-end: Trims space from the end (bottom) only. • box-trim-none: Removes trimming.
_box-edge-\*_
Define the reference edge for trimming.
• box-edge-text: Trims to the text edge (default). • box-edge-cap: Trims to the cap height (top of capital letters). Perfect for aligning headers. • box-edge-ex: Trims to the x-height. • box-edge-alphabetic: Trims to the alphabetic baseline. • box-edge-ideographic: Trims to the ideographic baseline (CJK).
Usage with tailwind-merge
Since these utilities do not collide with standard Tailwind classes (like text-* colors or sizes), configuration is optional.
However, if you want to support deduplication (e.g., ensuring box-trim-both overrides box-trim-none properly when both are present), you can configure it as follows:
Description from the npm listing.
- box-edge
- box-trim
- cap height trimming
- css
- css spacing
- css-spacing
- leading trim
- leading-trim
- tailwind
- tailwind css
- tailwind-css
- tailwindcss
- tailwindcss plugin
- tailwindcss-plugin
- text box
- text box edge
- text box trim
- text spacing
- text-box
- text-box-edge
Charts
Images: 30d · 1y · all time · 1600×900 dark
Adoption over time
7/30/90-day growth
Ranking history
Listing placement
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.
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.
Recent observations
Full history (121)Similar npm Tailwind plugins plugins
All 20 tailwindcss-text-box-trim alternativesData 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-text-box-trim. First seen Oct 16, 2026; last successful collection Oct 19, 2026. See the methodology.