Using CSS var for line-clamp

[barbieswimcrew]

Hey guys! When using Stimulus Read More I noticed that they use a CSS variable --read-more-line-clamp to affect line clamp. Now, unfortunately this is not per se compatible with your line-clamp plugin. Still, I thought I'd ask if it wouldn't be an improvement if the plugin also used a CSS variable?

[wongjn]

As per the documentation, you should be able to add the CSS variable as a value:

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

Which would then produce the line-clamp-read-more utility class candidate you could use.

[barbieswimcrew]

Oh wow, thank you so much @wongjn - I knew how to add "custom" utility class candidates but I didn't know that it even works to use css vars in there as shown by you. Sorry for the inconvenience and thank you so much for your help!

[Susanmacke]

Using CSS var for line-clamp is a way to simplify and make your code more readable by creating a reusable variable for the line-clamp property. Instead of repeating the same line-clamp value multiple times, you can define a CSS var with the desired value and use it throughout your code. This allows for easier changes and updates, as you only have to change the value in one place.
upsers