我直接添加到 Tailwind CSS 的东西

在每个使用 Tailwind CSS 的项目中，我最终都会向其中添加一些东西。其中一些东西我在每个项目中都会添加。我会与您分享这些内容，但我也很想知道你们会在自己的 tailwind.css 文件中添加什么。

我先从我自己说起。在每个项目中

• 我定义 -webkit-tap-highlight-color。
• 我添加了一个底部填充，设置为 env(safe-area-inset-bottom)。
• 我用 interpuncts 装饰无序列表。

请允许我详细说明这三点。

-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 上没有“主页”按钮的底部栏。如果没有它，某些元素可能会落到栏下，使其难以阅读和点击。

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

Interpuncts

我喜欢在无序列表中使用 interpuncts。我不会因为 查找它 而惩罚你。我们基本上是在讨论无序列表中的项目符号。Tailwind 通过 Normalize 默认将其删除。我把 interpuncts 偷偷塞进我每个项目中。

我这样处理它

@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 添加什么？有什么是不可或缺的吗？请在评论中告诉我！我很乐意听到一些想法，可以开始将其整合到其他项目中。