Padding not working for table component in Tailwind - tailwind-css

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;
}
}