Tailwind中Table组件padding不生效问题求助

在基于Tailwind的React应用中，尝试为table的<thead>和<tr>元素添加padding，但设置后完全不生效，即使通过浏览器元素检查手动添加样式也无效果。

原代码 #

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

问题原因 #

• 浏览器默认的表格布局规则中，<thead>和<tr>属于结构性容器元素，不支持padding属性，padding仅对表格的单元格（<th>、<td>）生效。
• 无论通过Tailwind类还是手动添加样式，给<thead>或<tr>设置padding都会被浏览器的默认样式规则直接忽略。

解决方法 #

将Tailwind的padding类（如p-2）直接应用到<th>和<td>元素上：

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

export default function App() {
  return (
    <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>
  );
}

内容的提问来源于stack exchange，提问作者Shivam Sahil