如何在 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 次浏览

开启你的 职业生涯

完成课程，获得认证

开始
广告