使用順風 css 時在哪里存儲自定義 css 類

Question

我第一次使用順風 css。
我有自定義 css 類來制作微調器，這些類與順風無關。
這是我的主 css 文件中的代碼。
我的問題是在使用順風時是否有更好的方法來組織自定義 css？
當我需要它們時，基本上在哪里編寫自定義 css 類。

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 8px;
  border: 4px solid #fa6400;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fa6400 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@layer components {
  .btn-primary {
    @apply py-2 font-bold text-white transition duration-200 rounded shadow-lg  hover:shadow-xl disabled:opacity-50;
  },
  .btn-link {
    @apply mb-6 text-sm hover:underline
  }
}

Answer 1

從官方文檔可以做出如下解釋。

當您需要向 Tailwind 項目添加真正自定義的 CSS 規則時，最簡單的方法是將自定義 CSS 添加到您的樣式表中：

@tailwind base;
@tailwind components;
@tailwind utilities;

.my-custom-style {
  /* ... */
}

要獲得更多功能，您還可以使用 @layer 指令將樣式添加到 Tailwind 的base 、 components和utilities層：

所以我們有一個問題，為什么 Tailwind 將樣式分組到圖層中？

答案很簡單：

在 CSS 中，樣式表中規則的順序決定了當兩個選擇器具有相同特性時哪個聲明獲勝：

.btn {
  background: blue;
  /* ... */
}

.bg-black {
  background: black;
}

在這里，兩個按鈕都是黑色的，因為 .bg-black 在 CSS 中位於 .btn 之后：

<button class="btn bg-black">...</button>
<button class="bg-black btn">...</button>

為了管理這一點，Tailwind 將它生成的樣式組織成三個不同的“層”——ITCSS 推廣的一個概念。

• 基礎層用於重置規則或應用於普通 HTML 元素的默認樣式。
• 組件層用於您希望能夠使用實用程序覆蓋的基於類的樣式。
• 實用程序層適用於小型、單一用途的類，它們應始終優先於任何其他樣式。

明確這一點可以更容易地理解您的樣式將如何相互交互，並且使用 @ layer指令可以讓您控制最終的聲明順序，同時仍然以您喜歡的任何方式組織您的實際代碼。

更多詳細信息，請關注順風官方文檔鏈接。

希望能幫助到你！