Next.js项目中TailwindCSS宽高样式失效问题求助

核心问题是你写的Tailwind类名完全不符合语法规则，导致Tailwind无法识别并生成对应的CSS样式——而flex这类类名写法正确，所以能正常生效。

错误类名修正： #

• 宽高类：w100% → w-full，h100% → h-full（Tailwind用full作为100%的快捷类名，是预设的标准写法）
• 自定义间距类：py-40px → py-[40px]，mx-100px → mx-[100px]（自定义数值需要用方括号包裹，Tailwind才会解析生成对应样式）

修改后的Footer组件代码： #

export default function Footer() {
  return (
    <footer className="w-full">
      <div className="h-full py-[40px] mx-[100px]">
        <div className="h-full flex flex-row mx-[100px] justify-between items-center">
          <div>....</div>
          <ul>something about my social links</ul>
        </div>
      </div>
    </footer>
  );
}

额外优化建议： #

你的tailwind.config.ts的content配置已经覆盖了组件所在路径，无需调整。如果后续需要频繁使用40px、100px这类间距，可以在配置文件中添加自定义spacing值，方便复用：

theme: {
  extend: {
    spacing: {
      '40px': '40px',
      '100px': '100px',
    },
  },
}

配置后就能直接用py-40px、mx-100px这类类名了。

内容的提问来源于stack exchange，提问作者Simon Johnson