Tailwind CSS: How to use custom percentages in padding?

Question

How can we use custom percentage on padding in Tailwind CSS?

My config:

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

We can achieve that in the old way with the plain CSS:

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

But ideally, we can do it with Tailwind too.

Any ideas?

Answer 1

While the other answers do provide an answer, this can be frustrating if you only need to use the custom value once. I found this answer when trying to solve such an issue, so for those who find this after me, tailwind now supports arbitrary values.

You can use them by appending square brackets containing a CSS value (e.g. [80%]) to a prefix such as p- for padding or mr- for margin-right.

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