CODEWITHSUNDEEP
htmlcssreactjstailwind-csspadding
Uday Pratap Chauhan
Uday Pratap Chauhan

Reputation: 3

Getting Inconsistent padding in tailwind css (on react+vite)

I am getting this type of padding /border . Click the link below to view.

[Inconsistent padding in tailwind]

Want like this (https://i.sstatic.net/2RsqliM6.png)

I was trying to get border with gradient from top to bottom of purple-900 to purple-600. But i don't know how to do that. So I wrapped each card in in a div and provided padding of p-0.5 but It doesn't seem to be consistent padding from all sides.

Any solutions.

Here is the Code of card layout .

const PlanCard = ({ price, features, onHover, isHovered }) => {
  return (
    <div className="p-2px rounded-lg bg-gradient-to-b from-purple-900 to-purple-500">
    <div
      className={`w-full min-w-50 flex-col max-w-xs p-6 rounded-md shadow-lg transition-transform duration-300 ease-in-out ${
        isHovered ? 'bg-gradient-to-b from-purple-900 to-purple-600 text-white scale-110' : 'bg-white'
      } transition-colors duration-300`}
      onMouseEnter={onHover}
      onMouseLeave={onHover}
    >
      <h2 className="text-2xl font-bold mb-4">{price}</h2>
      <ul className="text-left">
        {features.map((feature, index) => (
          <li key={index} className="mb-2">
            <h3 className="font-semibold">{feature.title}</h3>
            <ul className="list-disc list-inside">
              {feature.points.map((point, idx) => (
                <li key={idx}>{point}</li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
      <button className="mt-4 w-full 
        bg-purple-500 text-white py-2 rounded hover:bg-purple-700 [enter image description here][1]active:bg-purple-900 active:scale-90">
        SELECT
      </button>
    </div>
    </div>
  );
};



export default PlanCard;

Want to get the consistent padding or border with gradient around the div.

Upvotes: 0

Views: 223

Answers (2)

woo.y
woo.y

Reputation: 31

If you want to use px in Tailwind, you should write it as p-[2px] or p-0.5 (which means 2px).

For more details, you can refer to the Tailwind documentation. https://tailwindcss.com/docs/padding

Upvotes: 0

Christiaan Prinsloo
Christiaan Prinsloo

Reputation: 36

There could be many reasons for this including the margins on your cards. Also, p-2px will have no effect, it should be written as p-[2px]

I would also recommend doing gradients via CSS or inline and not tailwind.

Upvotes: 0

Related Questions