Tailwind CSS plugin that generates utility classes for trimming whitespace above and below capital letters using Capsize.
tailwindcss-capsize is a Tailwind CSS plugin that provides utility classes for implementing text-box-trim functionality, which removes extra whitespace above and below capital letters in text elements. It solves optical alignment issues in web typography by leveraging font metrics to ensure text aligns precisely with surrounding design elements. The plugin integrates the Capsize methodology directly into Tailwind projects through configurable utility classes.
Frontend developers and designers using Tailwind CSS who need precise typographic control, particularly those building design systems or interfaces where text alignment affects visual polish.
Developers choose this plugin because it brings professional-grade typographic precision to Tailwind's utility-first workflow without custom CSS, ensuring consistent optical alignment across fonts and sizes. It future-proofs projects by aligning with the proposed CSS text-box-trim specification while providing immediate implementation.
✂️ Tailwind CSS utility classes for trimming whitespace above & below capital letters.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Implements the Capsize methodology to remove extra space from text bounding boxes, solving alignment issues as described in the Microsoft Design article, ensuring text aligns perfectly with design elements.
Generates utility classes like .capsize that fit directly into Tailwind's workflow, allowing developers to apply typographic precision without writing custom CSS, as shown in the usage examples.
Adheres to the proposed CSS text-box-trim specification, providing a future-proof solution that aligns with upcoming web standards for typography.
Offers options to adjust root size and class name through plugin parameters, giving flexibility for different project needs, as documented in the options section.
Requires obtaining and configuring precise font metrics (capHeight, ascent, etc.) for each font family using external tools, which is time-consuming and adds initial overhead.
Text truncation or line clamping cannot be applied directly to the capsize element, forcing the use of child wrappers as noted in the tips, increasing markup complexity.
Only works with pre-configured fonts in the Tailwind config, making it unsuitable for dynamic or multiple font sources without extensive manual updates.