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

3. h1 h2 h3 默认样式是 inherit 显示的很小

默认：

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

解决办法：

@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
  h2 {
    font-size: var(--text-xl);
  }
  h3 {
    font-size: var(--text-lg);
  }
  a {
    color: var(--color-blue-600);
    text-decoration-line: underline;
  }
}

参考：
Preflight