CODEWITHSUNDEEP
tailwind-css
iknowmagic
iknowmagic

Reputation: 385

Tailwind - How to customize padding such as px-10

In Tailwind, I want to customize px-10 to equal

padding-left: 10; 
padding-right: 10px;

How do I do that?

Many thanks.

Upvotes: 4

Views: 8719

Answers (2)

liyimeng
liyimeng

Reputation: 1

you can set options in thier config file~tailwind.config.ts

theme: {
    extend: {
        padding: {  
            '2.5': '0.625rem',
        }
    },
},

it will auto generate px-2.5, like

padding-left: 10px;
padding-right: 10px;

Upvotes: 0

Kaung Khant Zaw
Kaung Khant Zaw

Reputation: 1638

You can add custom padding values as shown in their documentation

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
       sm: '10px',
      }
    }
  }

and use it as

<div class="px-sm"> .. <div/>

OR

Use your custom values inside class by using JIT mode

<div className="pl-[10px] pr-[10px]"> .. </div>

Upvotes: 9

Related Questions