我添加到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中文網其他相關文章！