		@@ -8,4 +8,10 @@ # Changelog

		## [Unreleased]
		## [0.4.0] - 2022-04-21

		This release of `@tailwindcss/line-clamp` is designed for Tailwind CSS v3.0+, and is not compatible with earlier versions.

		### Added

		- Add support for arbitrary values ([#10](https://github.com/tailwindlabs/tailwindcss-line-clamp/pull/10))

		## [0.3.1] - 2021-12-09
		@@ -49,3 +55,4 @@

		[unreleased]: https://github.com/tailwindlabs/tailwindcss-line-clamp/compare/v0.3.1...HEAD
		[unreleased]: https://github.com/tailwindlabs/tailwindcss-line-clamp/compare/v0.4.0...HEAD
		[0.4.0]: https://github.com/tailwindlabs/tailwindcss-line-clamp/compare/v0.3.1...v0.4.0
		[0.3.1]: https://github.com/tailwindlabs/tailwindcss-line-clamp/compare/v0.3.0...v0.3.1
		@@ -52,0 +59,0 @@ [0.3.0]: https://github.com/tailwindlabs/tailwindcss-line-clamp/compare/v0.2.1...v0.3.0

package.json

		{
		"name": "@tailwindcss/line-clamp",
		"version": "0.3.1",
		"version": "0.4.0",
		"main": "src/index.js",
		@@ -16,5 +16,19 @@ "license": "MIT",
		},
		"scripts": {
		"test": "jest"
		},
		"devDependencies": {
		"jest": "^27.4.4",
		"postcss": "^8.2.2",
		"prettier": "^2.5.1",
		"tailwindcss": "^3.0.23"
		},
		"peerDependencies": {
		"tailwindcss": ">=2.0.0 \|\| >=3.0.0 \|\| >=3.0.0-alpha.1"
		},
		"jest": {
		"setupFilesAfterEnv": [
		"<rootDir>/jest/customMatchers.js"
		]
		}
		}

README.md

		@@ -11,7 +11,3 @@ # @tailwindcss/line-clamp
		```sh
		# Using npm
		npm install @tailwindcss/line-clamp

		# Using Yarn
		yarn add @tailwindcss/line-clamp
		npm install -D @tailwindcss/line-clamp
		```
		@@ -36,3 +32,3 @@

		Use the `line-clamp-{n}` utilities to specify how many lines of text should be visible before truncating::
		Use the `line-clamp-{n}` utilities to specify how many lines of text should be visible before truncating:

		@@ -39,0 +35,0 @@ ```html

src/index.js

		const plugin = require('tailwindcss/plugin')

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

		const lineClamp = plugin(
		function ({ addUtilities, theme, variants, e }) {
		function ({ matchUtilities, addUtilities, theme, variants, e }) {
		const values = theme('lineClamp')

		matchUtilities(
		{
		'line-clamp': (value) => ({
		...baseStyles,
		'-webkit-line-clamp': `${value}`,
		}),
		},
		{ values }
		)

		addUtilities(
		[
		Object.entries(values).map(([key, value]) => {
		return {
		[`.${e(`line-clamp-${key}`)}`]: {
		overflow: 'hidden',
		display: '-webkit-box',
		'-webkit-box-orient': 'vertical',
		'-webkit-line-clamp': `${value}`,
		},
		}
		}),
		{
		@@ -20,0 +26,0 @@ '.line-clamp-none': {

@tailwindcss/line-clamp - npm Package Compare versions

New alerts