如何在 Tailwind CSS 中指定確切的 600px 寬度

在 Tailwind CSS 中，開發人員有時需要使用預設實用程式類中沒有的特定樣式。一個常見需求是為元素設定恰好為 600 畫素的寬度。本文將指導我們在 Tailwind CSS 中指定恰好為 600px 的寬度。

方法

可以使用以下方法指定 600px 寬度

使用 w-[size] 類

這是在 tailwind CSS 中指定固定寬度（如 600px）的最簡單方法。最新版本的 Tailwind CSS 支援使用任意值。我們可以透過在方括號內指定所需的寬度值（如 w-[600px]）來執行此操作。

語法

<div class="w-[600px]">
 Your content here
</div>

示例程式碼

此示例演示了透過將 div 的寬度指定為 600px 來使用任意值。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>600px Width Example</title>
</head>
<body class="p-10">
    <div class="w-[600px] bg-blue-500 
           p-4 text-white rounded-lg">
        This div has a width of exactly 600px.
    </div>
</body>
</html>

輸出


使用 tailwind.config.js

指定 600px 精確寬度的另一種方法是擴充套件主題以在 'tailwind.config.js' 檔案中包含自定義寬度。按照下面提到的步驟執行相同操作

  • 開啟 'tailwind.config.js' 檔案。
  • 在 'tailwind.config.js' 檔案的 'theme.extend' 部分中，將寬度值指定為 600px。這允許你為 600px 精確寬度建立自定義實用程式類。
    • module.exports = {
    theme: {
        extend: {
        width: {
            '600': '600px', // Add your custom width here
        },
        },
    },
    }
  • 現在你可以在 HTML 中使用自定義實用程式類。

示例程式碼

此示例演示了建立自定義實用程式類以將 div 的寬度指定為 600px 的過程。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>600px Width Example</title>
</head>
<body class="p-10">
    <div class="w-600 bg-blue-500 
            p-4 text-white rounded-lg">
        This div has a width of exactly 600px.
    </div>
</body>
</html>

輸出


更新於： 2024 年 11 月 11 日

8 次瀏覽

開啟你的 職業生涯

完成課程，獲得認證

開始
廣告