React+Vite+TailwindCSS v4项目中保留HTML默认样式的方法

我正在使用TailwindCSS v4和Vite构建React应用，发现TailwindCSS类能正常生效，但HTML元素（如button）的默认样式完全消失，显示为纯文本样式。请问如何在使用TailwindCSS的同时保留button等元素的默认经典样式？

示例代码 #

const App = () => {
  return (
    <div>
      <h1 className="text-3xl font-bold text-blue-500">Text</h1>
      <button>Click Me</button>
      <h1>Text</h1>
    </div>
  )
}

export default App

样式对比 #

当前按钮无经典按钮样式	预期带经典按钮样式的效果

这是因为TailwindCSS v4默认启用了Preflight（基础样式重置工具），它会清除所有HTML元素的默认浏览器样式，包括button的边框、背景、内边距等，让元素回归纯文本状态，方便开发者从零定制样式。

方案1：完全禁用Preflight #

在tailwind.config.js中修改配置，关闭Preflight：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  corePlugins: {
    preflight: false, // 关闭基础样式重置
  },
}

注意：禁用Preflight后，Tailwind的全局盒模型重置等基础样式也会失效，可能引发布局或样式冲突，需根据项目需求权衡。

方案2：手动恢复指定元素的默认样式 #

如果只想保留button这类特定元素的原生样式，可在全局CSS文件（如src/index.css）中通过@layer base覆盖Preflight的重置规则：

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

@layer base {
  button {
    /* 模拟原生button默认样式，适配系统主题 */
    border: 1px solid ButtonBorder;
    background-color: ButtonFace;
    color: ButtonText;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
  }

  button:hover {
    background-color: ButtonHover;
  }

  button:active {
    background-color: ButtonActive;
  }
}

这里使用CSS原生系统颜色变量，能让按钮样式和当前系统主题保持一致，更贴近原生体验。

内容的提问来源于stack exchange，提问作者Ganesh Wadule