'Tailwind CSS: How to use custom percentages in padding?

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?

csstailwind-css


Solution 1:[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>

Solution 2:[2]

You don't need to escape the percent sign for Tailwind, it will take care of that. Here's a play example https://play.tailwindcss.com/CYR6JOXYyz?file=config

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

The class Tailwind will create is .p-80\% for the above config.

Solution 3:[3]

I found that using spacing to customize more than padding, margin, width, and height all at once

Code

const defaultTheme = require('tailwindcss/defaultTheme')

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

Markup

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 The Otterlord
Solution 2 JHeth
Solution 3 The Otterlord

Related Questions