tiny-vue/packages/theme-saas/plugins/line-clamp.js

45 lines
813 B
JavaScript

const plugin = require('tailwindcss/plugin')
const baseStyles = {
overflow: 'hidden',
display: '-webkit-box',
'-webkit-box-orient': 'vertical'
}
const lineClamp = plugin(
({ matchUtilities, addUtilities, theme, variants }) => {
const values = theme('lineClamp')
matchUtilities(
{
'line-clamp': (value) => ({
...baseStyles,
'-webkit-line-clamp': `${value}`
})
},
{ values }
)
addUtilities(
[
{
'.line-clamp-none': {
'-webkit-line-clamp': 'unset'
}
}
],
variants('lineClamp')
)
},
{
theme: {
lineClamp: { 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6' }
},
variants: {
lineClamp: ['responsive']
}
}
)
module.exports = lineClamp