first, install the @tailwindcss/line-clamp
second, pass it to the tailwind config
finally we are able to use "line-clamp" in our components
xxxxxxxxxx
enter npm i @tailwindcss/line-clamp in the terminal to install the package
----------------------------------------------------------------------------------------------
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
plugins: [require('@tailwindcss/line-clamp')],
};
----------------------------------------------------------------------------------------
//here is your component
<p className="desc text-xs lg:text-sm font-light line-clamp-4">
{description}
</p>
contact me if you want to work together
xxxxxxxxxx
<div class="text-5xl font-extrabold ...">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
Hello world
</span>
</div>