tailwindcss 实践

1. hover父节点，显示子元素

如图，删除按钮不显示， hover到一行，才显示删除按钮，平常用事件切换state才可以实现的效果，用tailwind两个class就可以实现了。

如图给父节点加上group，给目标节点加上invisible group-hover:visible就可以实现上述的效果了。更高级的用法在Differentiating nested groups

2. 多行文本省略

文本太长，如下

只需要显示三行

只需要安装插件

npm install @tailwindcss/line-clamp

配置tailwind.config.js

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

使用

<p className="line-clamp-3">{text}</p>

参考：
Multi-line truncation with @tailwindcss/line-clamp