首頁 >web前端 >js教程 >我錯誤地使用了 Tailwind，所以你不必這樣做

我錯誤地使用了 Tailwind，所以你不必這樣做

Linda Hamilton原創: 2025-01-06 06:42:411009瀏覽

大約 3 年前，我遇到了 Tailwind CSS，一個很棒的網站開發庫。為了使本文保持簡短，我不會浪費文字來介紹它。已經有很多資源可供學習。相反，我想分享一個關於我在 Tailwind 早期不斷犯的錯誤的故事。沒必要跟我一樣掉進同一個坑。

Tailwind 透過將 CSS 規則包裝到所謂的 實用程式類別 中，打破了 級聯樣式表 的傳統概念。您無需在 .css 檔案中編寫 CSS 規則，而是直接在 DOM 元素上編寫類別名稱。雖然這種方法一開始感覺不自然和奇怪，但它很快就變得有意義了。我花了大約一天的時間才開始接觸它，現在我不想再寫純 CSS，除非被迫。 Tailwind 無縫整合到我的 #1 框架 Nuxt 中，在幾分鐘內創建具有視覺吸引力的響應式友善網站的簡單性真是太棒了。

但是有一個問題。您知道的選項越多，選擇包含的樣式越多，HTML 就會變得混亂。我早年感受到的第二個問題是重複自己。作為一名光榮的 DRY 原則追隨者，在我的模板中多次看到相同的類別序列讓我的眼睛很受傷。

我正在嘗試優化它。

第一個想法是將 Tailwind 類別序列提取為字串變數。在 Vue.js 中（Nuxt 是在 Vue 之上建構的），它看起來大致是這樣的。

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

最後，更容易維護和更改。其清晰度值得商榷。特別是如果您的應用程式周圍有相同的元素，並且您需要將定義提升到一些類似全域的常數中。

我正在進一步尋找更好的解決方案。

並向我介紹了 Tailwind 的 @apply 指令。基本上，這就像是對整個概念的否定。您可以建立自己的 sort-of-a-stylesheet 並用自訂類別和元素調整填充它，而不是直接將定義放在特定元素上。只是您可以從 Tailwind 實用程式類別中建立解決方案，而不是簡單的 CSS 規則。

很奇怪，但它似乎可以解決我重複定義的心理問題。

VueSchool 導師和 Tailwind 文件都警告我不要使用它，但我自然沒有聽。

I was using Tailwind wrong, so you don

我使用這種方法創建了幾個網站。它起作用了。問題解決了，還是？

快轉到 2024 年末。我對我的一個網站有了一些新想法。我開始編碼。我完全忘記了一年多前我所做的@apply惡作劇。突然，我發現自己無法將佈局組合在一起。

雖然我的模板中沒有使用明顯的樣式，但我的

卻偏離了位置。到底是怎麼回事？我在瀏覽器中開啟開發控制台來研究渲染的 HTML。它們應用了 CSS 樣式。

I was using Tailwind wrong, so you don

過了一些令人沮喪的時刻後，我找到了罪魁禍首。

突然，有：

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

在 tailwind.css 檔案中看起來不像 2023 年那麼好主意。

誰應該知道有一天我會需要別的東西，嗯？

第 1 課

永遠、永遠、永遠在元素選擇器上全域使用@apply。

雖然當你搭建一個新專案時它可能看起來很方便，但從長遠來看它可能會給你帶來麻煩。不僅你可以像我一樣輕易地忘記它。它也使事情變得不那麼靈活。有一天，你會變得更加明智並準備好擺脫它 - 但一旦你刪除全局樣式，建立在它之上的網站的一半將意外地崩潰。您準備好重新思考整個設計了嗎？

就我個人而言，我現在建議根本不要在 tailwind.css 中使用@apply（如果我有時間和耐心將它從我設法放置它的所有項目中剝離出來）。

如果你在沒有充分理由的情況下仍然堅持使用它（「喜歡覆蓋第三方庫中的樣式」 正如Tailwinds 文件所說），至少使用它來創建類.

擁有一些 .my-cool-css-class 是可以理解的，因為至少你必須將它附加到你想要設定樣式的元素上。這樣，每個人（包括未來的自己）都可以在那裡看到它，並且在需要時能夠找到它的定義。

是的，但是

錨元素是誘人打破這條規則的候選人。因為必須為每個附加一個類別屬性真的很無聊。

一種可能的替代方案是建立一個圍繞錨點（或 Nuxt 中內建的）的自訂連結元件。但你可能不喜歡它，我不會怪你。

事實上，使用 @apply 指令仍然是排名最高的解決方案。

也許您可以製作更多全域元素樣式有意義的範例。如果您 100% 確定，請使用它們。但這應該始終是個有充分依據的決定。

第 2 課

Tailwind 類別定義過長/重複的真正原因是程式碼設計不當。

使用像 Vue 這樣的現代 JavaScript 框架，您就能夠建立小型可重複使用元件，並將它們組合在一起建立複雜的解決方案。使用它。

上面的按鈕範例可以變成這樣：


  



<p>就這樣，重複的程式碼就消失了。 </p><p>另一方面，看到很長的類鏈總是讓我覺得可憐的元素背負著太多的擔憂。最好的辦法就是退後一步，修改導致你到達那裡的決定。 </p>

<p>我的經驗是，只需少量的 Tailwind 類別就可以創造美觀的設計。如果您想添加更多內容，它們通常不應該最終全部堆積在一個元素上。這與創建一個大型組件（或一個類，如果您願意的話）做所有事情幾乎相同。在某些時候，您確實需要停止添加更多行並開始分解事物。 </p>

<p>在最壞的情況下，您應該能夠將視覺要求高的 CSS 元素封裝到單獨的元件中，從而最大限度地減少所需的互動量。但說實話，可能已經有人這樣做了，您所需要做的就是找到合適的 Tailwind 元件庫以在您的專案中使用。 </p>

以上是我錯誤地使用了 Tailwind，所以你不必這樣做的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css less html String if sort for while include catch break using class Attribute JS console dom this idea everything Other

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：免費打字稿課堂課程下一篇：免費打字稿課堂課程

看更多