Featured image of post 【CSS Framework TailwindCSS】概念 Concept

【CSS Framework TailwindCSS】概念 Concept

【CSS Framework TailwindCSS】概念 Concept

裝置斷點前綴詞

斷點前綴詞 寬度最小值 CSS
sm 640px @media (min-width: 640px) { … }
md 768px @media (min-width: 768px) { … }
lg 1024px @media (min-width: 1024px) { … }
xl 1280px @media (min-width: 1280px) { … }
2xl 1536px @media (min-width: 1536px) { … }

行動裝置優先

行動裝置導向

<!-- 文字置中將會在手機上生效,而當螢幕大於等於 768px 時,將會靠左對齊 -->
<div class="text-center md:text-left"></div>
斷點前綴詞 寬度最小值 套用 CSS
sm 640px text-center
md 768px text-left
lg 1024px text-left
xl 1280px text-left
2xl 1536px text-left

因此,通常最好優先設計手機的排版,接著在 sm 上修改,然後是 md ,以此類推。

單一導向斷點

<div class="bg-green-500 md:bg-red-500 xl:bg-green-500">
  <!-- ... -->
</div>
斷點前綴詞 寬度最小值 套用 CSS
sm 640px bg-green-500
md 768px bg-red-500
lg 1024px bg-red-500
xl 1280px bg-green-500
2xl 1536px bg-green-500

不必在 sm 或 xl 的斷點上指定背景顏色,你只需要指定一個功能何時開始生效,而不是何時結束。

元件化

使用 @apply 提取元件 class

<button class="btn-indigo">
  Click me
</button>

<style>
  .btn-indigo {
    @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
  }
</style>

使用 @apply 元件順序

使用多個 @apply 設定順序

無序

/* Input */
.btn {
  @apply py-2 p-4;
}

/* Output */
.btn {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

有序

/* Input */
.btn {
  @apply py-2;
  @apply p-4;
}

/* Output */
.btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding: 1rem;
}

@apply 會將 !important 移除以避免出現優先權問題

/* Input */
.first {
  color: blue !important;
}

.second {
  @apply first;
}

/* Output */
.first {
  color: blue !important;
}

.second {
  color: blue;
}

設定 @apply !important

如果你希望使用 @apply 在現存的 class 並且給它 !important,只要在宣告的結尾加上 !important 即可:

/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

指定元件層級為 components

為了避免非預期的意外,我們建議你將自定義元件的樣式使用 @layer components { … } 指令包住來告知 Tailwind 這些樣式屬於哪一個 層級:

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

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

參考資料

Donate KJ 贊助作者喝咖啡

如果這篇文章對你有幫助的話,可以透過下面支付方式贊助作者喝咖啡,如果有什麼建議或想說的話可以贊助並留言給我
If this article has been helpful to you, you can support the author by treating them to a coffee through the payment options below. If you have any suggestions or comments, feel free to sponsor and leave a message for me!
方式 Method 贊助 Donate
PayPal https://paypal.me/kejyun
綠界 ECPay https://p.ecpay.com.tw/AC218F1
歐付寶 OPay https://payment.opay.tw/Broadcaster/Donate/BD2BD896029F2155041C8C8FAED3A6F8
All rights reserved,未經允許不得隨意轉載
Built with Hugo
Theme Stack designed by Jimmy