我添加到tailwind CSS的东西是开箱即用的

每个Tailwind CSS项目，我都会添加一些自定义样式。有些样式几乎在每个项目中都会用到。我会分享这些，也很好奇大家在自己的tailwind.css文件中添加了什么。

首先，说说我自己的习惯：

• 定义 -webkit-tap-highlight-color。
• 添加底部填充 env(safe-area-inset-bottom)。
• 使用特殊符号美化无序列表。

下面详细解释这三点：

-webkit-tap-highlight-color

Android系统会在链接点击时高亮显示。我不喜欢这种效果，因为它会遮挡元素，所以我将其关闭以获得更好的用户体验。

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer 是Tailwind的指令，它通过告诉Tailwind将自定义样式放在哪个“容器”中来避免特异性问题。这就像假装层叠样式表不存在一样，因此在CSS排序方面无需过多担心。

简单地移除点击高亮可能会引发无障碍问题，因为它隐藏了交互式提示。因此，如果你选择这种方法，最好（如果你们有这方面的研究，我还想看看）启用:active来为这些操作提供一些反馈。Chris为此提供了一个代码片段。

env(safe-area-inset-bottom)

这个实用程序类处理新款iPhone（无“Home”按钮）的底部栏。如果没有它，某些元素可能会落在底部栏下方，导致难以阅读和点击。

@layer utilities {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

特殊符号列表项

我喜欢在无序列表中使用特殊符号作为列表项。我不会因为你查找这个而惩罚你。我们基本上是在谈论无序列表中的项目符号。Tailwind默认情况下通过Normalize删除它们。我把特殊符号添加到我的每个项目中。

我的方法如下：

@layer utilities {
  .list-interpunct > li:before {
    content: '・';
    float: left;
    margin: 0 0 0 -0.9em;
    width: 0.9em;
  }

  @media (min-width: 992px) {
   .list-interpunct > li:before {
      margin: 0 0 0 -1.5em;
      width: 1.5em;
    }
  }
}

现在我们也有::marker可以实现相同的功能，而且更容易使用。我没有使用它，因为Safari的兼容性有限。

轮到你了

我已经分享了我添加到所有Tailwind项目中的内容，现在轮到你了。你在项目中添加到Tailwind的自定义样式是什么？有什么你不可或缺的样式吗？请在评论中告诉我！我很乐意获得一些想法，并开始将它们整合到其他项目中。

以上是我添加到tailwind CSS的东西是开箱即用的的详细内容。更多信息请关注PHP中文网其他相关文章！