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

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告