Question 1

How do I set up tailwindcss-capsize with a custom font?

Accepted Answer

You need to add the font's metrics (like capHeight and ascent) to the fontMetrics key in your Tailwind config, using tools like the Capsize website or FontDrop! to extract values. Ensure the key matches your fontFamily definition for accurate calculations.

Question 2

What's the difference between tailwindcss-capsize and using Capsize directly?

Accepted Answer

tailwindcss-capsize integrates Capsize's functionality into Tailwind CSS as utility classes, streamlining the process for Tailwind users, while the original Capsize library requires manual CSS or JavaScript calculations. This plugin is Tailwind-specific but adds configuration steps.

Question 3

How can I use text truncation with the capsize utility?

Accepted Answer

You cannot apply truncate or line-clamp classes directly to the element with .capsize. Instead, wrap the text in a child element and apply those utilities to the child, as explained in the README's tips section to avoid conflicts with pseudo-elements.

Question 4

Does tailwindcss-capsize work with Tailwind CSS v3?

Accepted Answer

Yes, it's designed for modern Tailwind CSS versions using standard plugin architecture. However, check the npm package for specific compatibility notes, as updates might require adjustments in configuration or usage.

Question 5

What are the performance impacts of using this plugin?

Accepted Answer

It uses CSS pseudo-elements (::before and ::after) which have minimal runtime overhead. However, generating custom properties for each font and size can slightly increase CSS bundle size, but this is typically negligible in most projects.

Question 6

Can I change the default .capsize class name?

Accepted Answer

Yes, you can customize the class name by passing a className option to the plugin, e.g., pluginCapsize({ className: 'leading-trim' }), as documented in the options section, allowing for better integration with existing codebases.

Leading Trim

What is Leading Trim?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions