使用Vite+React时Tailwind CSS移除HTML元素默认样式的原因与解决办法

原因分析 #

Tailwind CSS 默认启用 preflight 功能，它会清除所有浏览器自带的默认样式（包括标题的字号、加粗效果，按钮的边框、背景，表单元素的默认样式等），目的是让元素在不同浏览器中保持一致的基础状态，避免浏览器默认样式导致的布局差异。这就是你遇到默认样式消失的核心原因。

可行解决办法 #

1. 手动恢复指定元素的默认样式 #

在全局CSS文件（比如 src/index.css）中，针对需要保留默认样式的元素自定义样式，示例：

/* 恢复标题的默认字号与加粗 */
h1 {
  font-size: 2em;
  font-weight: 700;
}
h2 {
  font-size: 1.5em;
  font-weight: 700;
}

/* 恢复按钮的基础样式 */
button {
  border: 1px solid ButtonBorder;
  background-color: ButtonFace;
  color: ButtonText;
  padding: 2px 6px;
  cursor: default;
}

/* 恢复输入框的默认边框与内边距 */
input[type="text"], select {
  border: 1px solid #ccc;
  padding: 2px 4px;
}

2. 禁用Tailwind的Preflight功能 #

如果完全不需要Preflight的样式重置，可以在 tailwind.config.js 中关闭它：

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

注意：禁用后浏览器默认样式会保留，但不同浏览器间的样式差异可能重新出现，需要自行处理兼容性问题。

3. 用Tailwind工具类替代默认样式 #

Tailwind提供了大量工具类，可以快速给元素添加符合需求的样式，既可控又能保证跨浏览器一致性，示例：

• 标题：<h1 className="text-4xl font-bold">主标题</h1>
• 按钮：<button className="border border-gray-300 bg-gray-100 px-4 py-2 rounded-md">确认</button>
• 输入框：<input type="text" className="border border-gray-300 px-3 py-2 rounded-md" />

内容的提问来源于stack exchange，提问作者Lord Beerus