Tailwind CSS：如何在填充中使用自定义百分比？答案

【问题标题】：Tailwind CSS: How to use custom percentages in padding?Tailwind CSS：如何在填充中使用自定义百分比？
【发布时间】：2022-02-09 19:10:15
【问题描述】：

我们如何在 Tailwind CSS 中使用自定义百分比填充？

我的配置：

theme: {
    extend: {
      spacing: {
        '80\%': '80%', // p-80% - doesn't work
      }
    },
  },

我们可以用普通的 CSS 以旧的方式实现这一点：

.p-80\% {
   padding: 80%;
}

但理想情况下，我们也可以使用 Tailwind。

有什么想法吗？

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您无需为 Tailwind 转义百分号，它会解决这个问题。这是一个播放示例https://play.tailwindcss.com/CYR6JOXYyz?file=config

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

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

【讨论】：

【解决方案3】：

我发现使用间距来自定义不仅仅是填充、边距、宽度和高度all at once

代码

const defaultTheme = require('tailwindcss/defaultTheme')

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

标记

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

【讨论】：