Tailwind CSS: How to use custom percentages in padding?

user_413225 0
Viewed 6384

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?

tailwind-css css
3 Answers

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>
user_141041860

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.

user_76579150

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>
user_118251260
Related