# The line-clamp plugin exists for Tailwind versions before 3.3

> The @tailwindcss/line-clamp plugin adds utilities that truncate text after a fixed number of lines, and the README opens by saying it is no longer required because Tailwind CSS v3.3 includes those utilities by default. What remains interesting is the caveat about which properties the reset does not clear.

**tailwindlabs/tailwindcss-line-clamp** — A plugin that provides utilities for visually truncating text after a fixed number of lines.

- Repository: https://github.com/tailwindlabs/tailwindcss-line-clamp
- Stars: 1,188 · Forks: 35
- Language: JavaScript
- License: MIT
- Published: 2026-10-19 · Updated: 2026-10-19 · Language: en
- Canonical page: https://hysenlabs.com/projects/tailwindlabs-tailwindcss-line-clamp

## The note at the top decides whether you need it

The first thing in the README is a note: as of Tailwind CSS v3.3, the line-clamp utilities are included in the framework by default and this plugin is no longer required. That is the entire decision for most projects. The plugin exists because before v3.3 the utilities were not in the framework, and the maintainers chose to ship them as a plugin first and then fold them into core, which is a common way to get a feature into a stable release without a breaking change. The current package version is 0.4.4, with the last release tagged on 2023-03-30 and the last push to the master branch on 2026-05-12. If you are reading this to decide whether to install the plugin, the answer is almost certainly no unless you are pinned to an older Tailwind.

## What the utilities actually emit

Each `line-clamp-{n}` utility sets four CSS properties, and the table in the README spells them out so you can read the generated CSS without running it. For `line-clamp-1` through `line-clamp-6` the output is `overflow: hidden`, `display: -webkit-box`, `-webkit-box-orient: vertical` and `-webkit-line-clamp` set to the number. The `line-clamp-none` utility emits only `-webkit-line-clamp: unset`. Utilities for clamping up to six lines are generated by default, and the values are numeric strings, so the `-webkit-line-clamp` value and the utility name always agree. The mechanism is the webkit line clamp property, which is why the display value has to be the webkit box display rather than a block, and why the other properties are part of the same declaration rather than separate utilities.

## Removing the clamp does not remove everything it set

The note after the usage example is the part that catches people out, and it is worth reading twice. The `line-clamp-{n}` set other properties like `display` and `overflow` in addition to `-webkit-line-clamp`, and those are not unset by `line-clamp-none`. So depending on what you are trying to achieve, you may need to explicitly override those properties with utilities such as `flex` or `overflow-visible` as well. The `line-clamp-none` utility only resets the line clamp itself. If a paragraph was clamped and you remove the clamp at a breakpoint, the element is left with `display: -webkit-box` and `overflow: hidden`, which is why the removal often looks like it did not take effect. The usage example shows the intended shape, with `line-clamp-3` on the base and `md:line-clamp-none` at the medium breakpoint, but the reset is partial and you have to supply the rest.

## Usage in markup and in a config file

The markup usage is a single class on a paragraph, with the text inside. The configuration side is where the plugin earns its keep on older Tailwind versions, because the `lineClamp` key under `theme.extend` lets you generate values beyond the default six, and the `variants` key lets you enable responsive or hover variants:

```js
module.exports = {
  theme: {
    extend: {
      lineClamp: {
        7: '7',
        8: '8',
        9: '9',
        10: '10',
      }
    }
  },
  variants: {
    lineClamp: ['responsive', 'hover']
  }
}
```

The values are strings rather than numbers, which is how the plugin writes the `-webkit-line-clamp` value, and the key is `lineClamp` under `theme.extend` rather than a top-level key, so it extends the defaults instead of replacing them. The installation is a dev dependency plus a require in the plugins array of the config file:

```js
plugins: [
  require('@tailwindcss/line-clamp'),
]
```

and the peer dependency range in the manifest accepts Tailwind 2, Tailwind 3 and the 3.0 alphas, which is the range that covers the versions this plugin was written for.

## A small package with a small job

The repository is small and the manifest shows the shape. The package is `@tailwindcss/line-clamp` at version 0.4.4, its main entry point is `src/index.js` with type declarations at `src/index.d.ts`, and the published files are the source directory. The only runtime dependency is Tailwind itself, listed as a peer dependency with the range `>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1`, so the plugin never pulls its own copy of the framework. The dev dependencies are Tailwind 3.0.23, postcss 8.2.2, Jest 27 and Prettier, and the test script is a plain `jest` with a custom matchers file loaded in the setup. The top level of the repository has a `src/` directory, a `jest/` directory, a `scripts/` directory, a CHANGELOG.md and the licence file, and the licence is MIT with public publish access configured in the manifest. There is no GitHub release history beyond the tags, and the last push was in May 2026.

## Conclusion

Adopt this plugin only if you are on Tailwind CSS before v3.3, since v3.3 includes the utilities by default and the README says so plainly. Do not add it to a modern project, because you would be installing a second implementation of something the framework already ships. Verify first your Tailwind version, and if you do use the plugin, read the note about the properties that `line-clamp-none` does not unset, because that is where the visible bugs come from when you remove clamping at a breakpoint.

## FAQ

### Do I still need the @tailwindcss/line-clamp plugin?

Only on Tailwind CSS versions before v3.3. The README notes that as of v3.3 the line-clamp utilities are included in the framework by default and the plugin is no longer required.

### Which CSS properties does the line-clamp utility set?

Each line-clamp-{n} utility sets overflow: hidden, display: -webkit-box, -webkit-box-orient: vertical and -webkit-line-clamp set to n. Utilities up to six lines are generated by default.

### Why does line-clamp-none not fully remove the clamping?

Because it only emits -webkit-line-clamp: unset, and does not unset the display and overflow properties that the line-clamp utilities also set. The README notes you may need to override those explicitly with utilities like flex or overflow-visible.

### How do I add more than six line-clamp values?

Extend the `lineClamp` key under `theme.extend` in your tailwind.config.js, listing the extra numbers as strings, and use the `variants` key under `variants` if you want responsive or hover variants enabled.

### What licence is the tailwindcss-line-clamp plugin released under?

The MIT licence, with the licence file in the repository root. The current version is 0.4.4, tagged on 2023-03-30, and the last push to the master branch was on 2026-05-12.

## Sources

- [Issues](https://github.com/tailwindlabs/tailwindcss-line-clamp/issues)
- [License: MIT](https://github.com/tailwindlabs/tailwindcss-line-clamp/blob/master/LICENSE)
- [README](https://github.com/tailwindlabs/tailwindcss-line-clamp/blob/master/README.md)
- [Releases](https://github.com/tailwindlabs/tailwindcss-line-clamp/releases)
- [tailwindlabs/tailwindcss-line-clamp on GitHub](https://github.com/tailwindlabs/tailwindcss-line-clamp)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/tailwindlabs-tailwindcss-line-clamp