Why the default padding classes of tailwind css not working after I add a custimization to It?

user_12242764 0
Viewed 2460

After adding this custom padding class in tailwind.config.js

  module.exports = {
         theme: {
      padding: {
          yt: '56.25%'
        }
    }

I am able to use the class as pb-yt for bottom padding. However the normal classes for padding which used to work doesn't work now. Eg : p-8 p24 px-4 pb-4 are default classes by tailwind which used to work before I added the custom class. What am I doing wrong here?

tailwind-css
1 Answers

You're looking to extend the config (e.g., add the p-yt class but keep existing padding classes).

Luckily, Tailwind has a solution. Instead of doing what you had, move the padding object into an extend object.

module.exports = {
  theme: {
    extend: {
      padding: {
        yt: '56.25%'
      },
    }
  },
}

This tells TailwindCSS to add the p-yt utility and keep existing padding utilities. When you set the configuration without the extend object, you completely overwrite the existing configuration.

user_115069950
Related