如何在 Tailwind CSS 中使用自定義百分比值作為填充？

Tailwind CSS 提供了許多用於樣式化元件的預定義實用程式類，例如 填充。有時，使用這些預定義類難以建立各種螢幕尺寸和內容型別的必要間距和響應性。Tailwind CSS 允許我們為填充提供百分比值，這將有助於使專案具有響應性。

在填充中使用自定義百分比

以下方法在 **Tailwind CSS** 中允許我們使用 **填充中的自定義百分比** 來實現專案的響應式和美觀佈局。

擴充套件 Tailwind 的配置

我們可以透過擴充套件 Tailwind CSS 配置檔案輕鬆地為 Tailwind CSS 中的填充使用自定義百分比值。為此，請按照以下步驟操作

  • **開啟“tailwind.config.js”：**“tailwind.config.js”檔案是您可以自定義 Tailwind CSS 設定的地方，通常位於專案的根資料夾中。如果您沒有此檔案，則可以透過在終端中執行以下命令來建立一個。
    • npx tailwindcss init

    並按照 Tailwind CSS 安裝指南 進行操作。

  • **新增自定義填充值：**在“tailwind.config.js”檔案的“theme.extend”部分中，新增所需的填充百分比值。這允許您為填充建立自定義實用程式類。
    • module.exports = {
    theme: {
        extend: {
        padding: {
            '1/20': '5%',   // Custom class for 5% padding
            '1/10': '10%',    // Custom class for 10% padding
            '3/10': '30%',   // Custom class for 30% padding
        },
        },
    },
 };
  • **在 HTML 中應用自定義類：**設定自定義填充值後，在您的 HTML 中使用它們。

示例程式碼

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>
        Custom Percentage in Padding
    </title>
</head>
<body>
    <div class="p-1/20 mb-3
                bg-green-400">
        Content with 5% padding
    </div>
    <div class="p-1/10 bg-yellow-400">
        Content with 10% padding
    </div>
</body>
</html>

輸出


使用任意值

最新版本的 Tailwind CSS 允許您使用任意值輕鬆應用自定義填充。它允許您使用方括號直接在類中指定自定義百分比值。

語法

<div class="p-[10%]">
 Your content here
</div>

示例程式碼

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>
        Custom Percentage in Padding
    </title>
</head>
<body>
    <div class="p-[5%] bg-violet-400 mb-3">
        Content with 5% padding
    </div>
    <div class="p-[10%] bg-pink-400">
        Content with 10% padding
    </div>
</body>
</html>

輸出


更新於： 2024年11月8日

13 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告