自訂 Tailwind CSS – 擴充框架

在本文中，我們將深入了解自訂 Tailwind CSS以滿足您專案的需求。 Tailwind 非常靈活，可以擴展到預設配置之外，讓您可以建立完全自訂的設計系統。

---

1.為什麼要客製化 Tailwind？

預設情況下，Tailwind 提供了廣泛的實用程式類，但有時您會想要超出可用的範圍。您可以添加自己的顏色、字體、間距值，甚至斷點，讓 Tailwind 非常適合您的設計系統。

範例：

您可能想要在專案中使用品牌特定的顏色或自訂字體。 Tailwind 可讓您在其設定檔 (tailwind.config.js) 中輕鬆設定這些設定。

---

2.設定 Tailwind 設定檔

透過 npm 安裝 Tailwind 後，您可以透過執行以下命令建立設定檔：

npx tailwindcss init

這將產生一個 tailwind.config.js 文件，您可以在其中自訂 Tailwind 的預設值。

範例：

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#5A67D8',
      },
      fontFamily: {
        custom: ['Open Sans', 'sans-serif'],
      },
    },
  },
}

在此範例中：

• 我們新增了自訂顏色（品牌）和自訂字體系列（自訂）。

---

3.新增自訂顏色和間距

Tailwind 可讓您定義自訂顏色和間距值，以滿足您專案的設計需求。您可以擴展預設調色板或完全替換它。

範例 – 自訂顏色：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF',
        secondary: '#A78BFA',
      },
    },
  },
}

現在您可以在 HTML 中使用這些顏色：

<div class="bg-primary text-white">Custom Background</div>

範例 – 自訂間距：

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
}

這些新的間距值現在可以像這樣使用：

<div class="mt-72">Extra Margin</div>

---

4.自訂斷點

如果預設的響應式斷點不符合您的設計要求，您可以修改或新增新的斷點。

範例：

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px', // Adding a custom breakpoint
    },
  },
}

現在您可以在新的 3xl 斷點處套用樣式。

---

5.清除未使用的 CSS

Tailwind 可以產生大量 CSS，但您可以透過清除未使用的樣式來顯著減少生產 CSS 的大小。 Tailwind 有一個內建的清除選項，可以從最終的 CSS 檔案中刪除未使用的類別。

設定清除：

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.js'],
}

這可確保只有 HTML 和 JavaScript 檔案中使用的 CSS 類別包含在生產版本中，從而使您的最終 CSS 檔案小得多。

---

結論

自訂 Tailwind CSS 可讓您根據專案的特定需求自訂框架。無論是添加自訂顏色、字體、間距，甚至是斷點，Tailwind 都可以讓您靈活地創建獨特的設計系統，同時仍利用實用程式優先類別的強大功能。

---

在 LinkedIn 上關注我

裡多伊‧哈桑

造訪我的網站

以上是自訂 Tailwind CSS – 擴充框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！