@tailwindcss/line-clamp

@tailwindcss/line-clamp is an official Tailwind Labs plugin that generates line-clamp-1 through line-clamp-6 utility classes, each combining overflow: hidden, display: -webkit-box, -webkit-box-orient: vertical, and -webkit-line-clamp to visually clamp text to a fixed number of lines. It also ships a line-clamp-none utility to reset clamping, commonly paired with responsive variants like md:line-clamp-none so text is truncated on small screens but shown in full on larger ones.

The plugin is built on Tailwind’s matchUtilities API, so it supports arbitrary values out of the box (line-clamp-[33], line-clamp-[var(--custom)]) and exposes a lineClamp theme key for extending the default 1-6 range. As of Tailwind CSS v3.3, line-clamp utilities were folded into Tailwind core, so this plugin is now primarily relevant to projects still pinned to Tailwind v2 or early v3 releases that need the same utilities without upgrading.

What You Get

• line-clamp-1 through line-clamp-6 utility classes generated by default, each setting overflow: hidden, display: -webkit-box, -webkit-box-orient: vertical, and -webkit-line-clamp: N
• A line-clamp-none utility that resets -webkit-line-clamp to unset, typically combined with a responsive prefix to restore full text on larger breakpoints
• A configurable lineClamp theme key in tailwind.config.js for extending or overriding the default clamp values (e.g. adding 7, 8, 9, 10)
• Support for arbitrary clamp values via square-bracket syntax (line-clamp-[33]) since the plugin is built on Tailwind’s matchUtilities API
• A variants: { lineClamp: [...] } config hook for enabling additional variants (e.g. hover) beyond the default responsive variant

Common Use Cases

• Clamping card, list, and grid-item descriptions to a fixed number of lines so uneven content lengths don’t break layout alignment
• Truncating blog post excerpts or article previews on index pages while keeping card heights consistent
• Pairing line-clamp-2 md:line-clamp-none so text is truncated on mobile but shown in full on desktop breakpoints
• Adding line-clamp utilities to Tailwind CSS v2 or early v3 projects that predate the utilities becoming built into Tailwind core in v3.3

Under The Hood

Architecture The entire plugin is a single Tailwind CSS plugin definition in src/index.js, built via Tailwind’s plugin() factory imported from tailwindcss/plugin. The handler function receives Tailwind’s matchUtilities, addUtilities, theme, and variants helpers: it registers a dynamic line-clamp utility through matchUtilities (reading its value set from theme('lineClamp'), which enables both the default numeric values and arbitrary-value syntax), and a static line-clamp-none utility through addUtilities, gated by the lineClamp variants config. The second argument to plugin() supplies the default theme.lineClamp map (1 through 6) and default variants.lineClamp (['responsive']). There is no internal layering beyond this — the entire surface area is one function that plugs into Tailwind’s extension points, which is appropriate given the narrow, single-purpose scope of the package.

Tech Stack The package is plain CommonJS JavaScript with no build/compile step — package.json points main directly at src/index.js and ships a hand-written src/index.d.ts for TypeScript consumers. Its only runtime dependency is a tailwindcss peer dependency (>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1), so it has zero third-party runtime dependencies of its own. Development tooling is limited to jest for testing, postcss (used to actually run the Tailwind plugin pipeline in tests), and prettier for formatting, configured inline in package.json.

Code Quality Tests live in src/index.test.js and use Jest plus a small custom matcher (toMatchCss in jest/customMatchers.js) that compiles the plugin through postcss(tailwindcss(config)).process('@tailwind utilities') and asserts on the generated CSS after stripping whitespace — a pragmatic, output-based testing style suited to a CSS-generating plugin. Coverage is narrow (two test cases: the numeric/arbitrary line-clamp-{n} utilities and the line-clamp-none reset) but directly exercises the real Tailwind compilation pipeline rather than mocking it. GitHub Actions CI (.github/workflows/nodejs.yml) runs npm test on push/PR, and a separate release.yml workflow handles npm publishing with provenance. No TypeScript source or linter config is present; the .d.ts file is hand-maintained rather than generated.

What Makes It Unique The plugin itself introduces no novel technique — it’s a thin, well-scoped wrapper around -webkit-line-clamp, a long-standing (if vendor-prefixed) CSS property, exposed through Tailwind’s standard plugin extension points. Its significance is historical rather than technical: it was the reference implementation Tailwind Labs used to validate the pattern before folding the same utilities into Tailwind CSS core as of v3.3, at which point this package became optional legacy tooling for projects that haven’t upgraded.