如何通过CDN使用Tailwind Preflight解决样式异常问题

方法1：直接嵌入Preflight基础重置样式 #

由于无法使用npm，最直接的方式是把Preflight核心重置样式复制到HTML文件的<style>标签中，放在Tailwind CDN链接之后，确保覆盖页面原有冲突样式。

以下是Preflight核心重置代码（覆盖常用场景，可直接使用）：

/* Preflight 基础样式重置 */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

::before, ::after {
  --tw-content: '';
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  margin: 0;
  line-height: inherit;
}

/* 表单元素重置（解决边框样式冲突关键） */
input, button, textarea, select {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

将这段代码放入HTML的<head>区域，紧跟在Tailwind CDN脚本之后：

<head>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 嵌入Preflight重置样式 -->
  <style>
    /* 粘贴上述Preflight代码 */
  </style>
</head>

方法2：检查并启用Tailwind CDN默认Preflight #

Tailwind CDN版本默认包含Preflight，若你曾修改配置禁用了它，需重新开启：

在Tailwind配置脚本中，确保corePlugins.preflight未被设为false，如果有相关配置，删除或改为true：

<script>
  tailwind.config = {
    corePlugins: {
      // 移除或修改这一行：preflight: false,
      preflight: true
    }
  }
</script>

额外排查建议 #

• 检查页面中是否存在其他全局样式（如旧CSS重置、自定义边框规则）干扰Tailwind样式，将自定义样式放在Tailwind CDN之前，让Tailwind样式获得更高优先级。
• 用简单测试验证：给元素添加border border-red-500类，观察是否生效，快速排除优先级或加载问题。

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