or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-tailwindcss--line-clamp

A TailwindCSS plugin that provides utilities for visually truncating text after a fixed number of lines

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/@tailwindcss/line-clamp@0.4.x

To install, run

npx @tessl/cli install tessl/npm-tailwindcss--line-clamp@0.4.0

TailwindCSS Line Clamp

A TailwindCSS plugin that provides utilities for visually truncating text after a fixed number of lines using CSS line clamping. This plugin extends TailwindCSS with line-clamp utilities that leverage the -webkit-line-clamp property for precise text truncation control.

Package Information

Package Name: @tailwindcss/line-clamp
Package Type: npm
Language: JavaScript
Installation: npm install -D @tailwindcss/line-clamp

Core Imports

const lineClampPlugin = require('@tailwindcss/line-clamp');

For TypeScript projects:

import lineClampPlugin = require('@tailwindcss/line-clamp');

Basic Usage

Add the plugin to your TailwindCSS configuration:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    // ...
  ],
};

Use the generated CSS classes in your HTML:

<!-- Clamp text to 3 lines -->
<p class="line-clamp-3">
  Long text content that will be truncated after 3 lines...
</p>

<!-- Remove line clamping on medium screens and above -->
<p class="line-clamp-3 md:line-clamp-none">
  Responsive text truncation...
</p>

<!-- Use arbitrary values -->
<p class="line-clamp-[7]">
  Text clamped to 7 lines...
</p>

Capabilities

Plugin Registration

The main export is a TailwindCSS plugin function that registers line-clamp utilities.

/**
 * TailwindCSS plugin that adds line-clamp utilities
 * @param {object} config - Plugin configuration object
 * @param {function} config.matchUtilities - TailwindCSS matchUtilities function
 * @param {function} config.addUtilities - TailwindCSS addUtilities function  
 * @param {function} config.theme - TailwindCSS theme function
 * @param {function} config.variants - TailwindCSS variants function
 */
const lineClampPlugin = plugin(
  function ({ matchUtilities, addUtilities, theme, variants }) {
    // Plugin implementation
  },
  {
    theme: ThemeConfiguration,
    variants: VariantsConfiguration
  }
);

module.exports = lineClampPlugin;

CSS Utility Generation

The plugin generates two types of CSS utilities using TailwindCSS's utility generation system.

Dynamic Line Clamp Utilities

Generated for any value defined in the theme configuration or used as arbitrary values:

/* Generated utility pattern: .line-clamp-{value} */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Continues for all theme values... */

/* Arbitrary value support */
.line-clamp-\[7\] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.line-clamp-\[var\(--custom-lines\)\] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--custom-lines);
}

Line Clamp None Utility

Always generated to remove line clamping:

.line-clamp-none {
  -webkit-line-clamp: unset;
}

Configuration Options

Theme Configuration

Configure available line clamp values in your TailwindCSS theme:

// Default theme configuration
const defaultTheme = {
  lineClamp: {
    1: '1',
    2: '2', 
    3: '3',
    4: '4',
    5: '5',
    6: '6'
  }
};

// Custom theme extension example
module.exports = {
  theme: {
    extend: {
      lineClamp: {
        7: '7',
        8: '8',
        9: '9',
        10: '10'
      }
    }
  }
};

Variants Configuration

Configure which variants are available for line-clamp utilities:

// Default variants configuration
const defaultVariants = {
  lineClamp: ['responsive']
};

// Custom variants example
module.exports = {
  variants: {
    lineClamp: ['responsive', 'hover', 'focus']
  }
};

Base Styles Object

Internal object containing shared CSS properties applied to all line-clamp utilities:

const baseStyles = {
  overflow: 'hidden',
  display: '-webkit-box',
  '-webkit-box-orient': 'vertical'
};

Types

/**
 * TailwindCSS plugin configuration object
 */
interface PluginAPI {
  matchUtilities: (utilities: Record<string, (value: string) => Record<string, string>>, options?: { values?: Record<string, string> }) => void;
  addUtilities: (utilities: Array<Record<string, Record<string, string>>>, variants?: string[]) => void;
  theme: (key: string) => Record<string, string>;
  variants: (key: string) => string[];
}

/**
 * Theme configuration for line-clamp utilities
 */
interface LineClampThemeConfig {
  lineClamp: Record<string, string>;
}

/**
 * Variants configuration for line-clamp utilities  
 */
interface LineClampVariantsConfig {
  lineClamp: string[];
}

/**
 * Plugin configuration object
 */
interface PluginConfig {
  theme: LineClampThemeConfig;
  variants: LineClampVariantsConfig;
}

/**
 * Main plugin function type
 */
type PluginFunction = (api: PluginAPI) => void;

/**
 * TailwindCSS plugin export
 */
declare const plugin: {
  (pluginFunction: PluginFunction, config?: PluginConfig): any;
  handler: () => void;
};

export = plugin;

Usage Patterns

Responsive Design

<!-- Mobile: 2 lines, tablet: 4 lines, desktop: no clamp -->
<p class="line-clamp-2 md:line-clamp-4 lg:line-clamp-none">
  Responsive text truncation example...
</p>

Custom Values

<!-- Using arbitrary values -->
<div class="line-clamp-[12]">Large content area</div>
<div class="line-clamp-[var(--dynamic-lines)]">CSS variable support</div>
<div class="line-clamp-[33]">Large arbitrary number</div>
<div class="line-clamp-[var(--line-clamp-variable)]">Custom CSS variable</div>

Configuration Examples

// Extensive customization
module.exports = {
  theme: {
    lineClamp: {
      1: '1',
      2: '2',
      3: '3', 
      4: '4',
      5: '5',
      6: '6',
      7: '7',
      8: '8',
      9: '9',
      10: '10',
      12: '12',
      'none': 'unset'
    }
  },
  variants: {
    lineClamp: ['responsive', 'hover', 'focus', 'group-hover']
  },
  plugins: [
    require('@tailwindcss/line-clamp')
  ]
};

Important Notes

The line-clamp-none utility only unsets -webkit-line-clamp but does not reset other properties like display and overflow
When removing line clamping, you may need additional utilities like flex or overflow-visible
Line clamping relies on -webkit-line-clamp which has broad modern browser support
The plugin supports arbitrary values for any numeric value or CSS variable
Default configuration provides utilities for 1-6 lines with responsive variants enabled