Padding not working for table component in Tailwind

Question

I am trying to add padding for table head and table rows in Tailwind based React App.

Here's my code:

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";

export default function App() {
  return (
    <table className="w-full px-2 rounded-t-md">
      <thead className="text-white bg-blue-600 text-left border border-red-600 p-2">
        <tr className="w-full p-2">
          <th className="font-medium">App Name</th>
          <th className="font-medium">Owner</th>
          <th className="font-medium">Date Created</th>
          <th className="font-medium">Scopes</th>
          <th className="font-medium">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr className="p-2">
          <td>Test App</td>
          <td>Shivam Sahil</td>
          <td>20 May 2022, 19:58 AM</td>
          <td className="break-words">all.create all.update all.read</td>
          <td>Edit</td>
        </tr>
      </tbody>
    </table>
  );
}

For some reason the padding doesn't seem to happen at all. I tried to inspect and check but even when adding padding in styles it won't show up, can someone help me understand what wrong am I doing here?

Here's the live sandbox:https://codesandbox.io/s/tailwind-css-and-react-forked-xwvdue?file=/src/App.js:0-884

Answer 1

You can adjust the padding inside the cells, so instead of <tr> you need set padding for all <th>, <td> tags.

<table className="w-full rounded-t-md">
  <thead className="text-white bg-blue-600 text-left border border-red-600">
    <tr className="w-full">
      <th className="font-medium p-2">App Name</th>
      <th className="font-medium p-2">Owner</th>
      <th className="font-medium p-2">Date Created</th>
      <th className="font-medium p-2">Scopes</th>
      <th className="font-medium p-2">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td className="p-2">Test App</td>
      <td className="p-2">Shivam Sahil</td>
      <td className="p-2">20 May 2022, 19:58 AM</td>
      <td className="break-words p-2">all.create all.update all.read</td>
      <td className="p-2">Edit</td>
    </tr>
  </tbody>
</table>

OR

Instead of adding the p-2 class everywhere using the Tailwind Utilities, you will get the same result.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  td,
  th {
    @apply p-2;
  }
}