TailwindCSS 如何使用自定义百分比设置盒子模型的 padding？

在使用TailwindCSS时，您可以通过在tailwind.config.js文件中扩展它的默认主题来创建自定义百分比的padding类。Tailwind 已经为您提供了一组预定义的padding工具类，但如果您需要使用特定的百分比值来设置padding，您可以按照以下步骤操作：

1. 打开您的项目中的tailwind.config.js文件。
2. 定位到theme部分。
3. 扩展padding属性以包含您希望使用的百分比值。

以下是一个具体的例子：

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      padding: {
        '5p': '5%',   // 创建一个名为 'p-5p' 的工具类，对应 5% 的 padding
        '10p': '10%', // 创建一个名为 'p-10p' 的工具类，对应 10% 的 padding
        // 你可以继续添加更多自定义的百分比
      }
    }
  },
  variants: {},
  plugins: [],
}

在上面的配置中，我们添加了两个自定义的padding百分比类：p-5p和p-10p。现在，您可以在您的HTML中使用这些类，就像使用Tailwind的其他工具类一样。

例如：

html
<div class="p-5p bg-gray-200">这个盒子有5%的padding</div>
<div class="p-10p bg-gray-300">这个盒子有10%的padding</div>

在上述的HTML代码中，第一个div将会有等于其宽度5%的padding，第二个div将会有等于其宽度10%的padding。

请注意，当您添加自定义配置时，最好遵守Tailwind的命名约定，即p-{size}用于padding，m-{size}用于margin等等，以保持一致性和可预测性。同时，确保在项目构建过程中，您的tailwind.config.js文件被正确引入和处理，以便生成相应的CSS。

虽然其他答案确实提供了答案，但如果您只需要使用自定义值一次，这可能会令人沮丧。我在尝试解决这样的问题时找到了这个答案，因此对于那些在我之后发现这个问题的人来说， tailwind 现在支持任意值。

您可以通过将包含 CSS 值（例如 ）的方括号附加[80%]到前缀（例如p-用于 padding 或mr-margin-right）来使用它们。

shell
<div class="p-[80%]">
    Hello world!
</div>

对于 Tailwind，您不需要转义百分号，它会处理这个问题。这是一个播放示例https://play.tai​​lwindcss.com/CYR6JOXYyz?file=config

shell
theme: {
  extend: {
    spacing: {
      '80%': '80%', // p-80% - should work
    }
  },
},

.p-80\%Tailwind 将为上述配置创建类。

我发现使用间距可以一次性自定义更多的内容：内边距、边距、宽度和高度

代码

shell
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
     extend: {
      padding: {
        'p-80': '80%',
      },
      // Build your palette here
          colors: {
      'black': '#393939',
    }
  }
  }
}

标记

shell
<a href="#" class="p-80">TailWindCSS Dev</a>