如何仅为特定页面启用Tailwind Preflight样式？

因为Tailwind默认会全局注入Preflight样式，如果你想全局关闭它，仅在特定页面启用，有两种可行的实现方式：

方式一：手动在指定页面导入Preflight样式 #

1. 先在tailwind.config.cjs中全局关闭Preflight：

// tailwind.config.cjs
module.exports = {
  corePlugins: {
    preflight: false,
  },
  // 其他配置项...
}

2. 在需要启用Preflight的页面中，手动引入Tailwind的基础样式。如果是常规PostCSS项目，可在该页面的专属CSS文件中添加：

/* 仅在需要Preflight的页面引入此CSS */
@import "tailwindcss/base";

若是React、Vue这类框架项目，直接在对应页面的组件文件中导入这个包含@import "tailwindcss/base"的CSS文件即可。

方式二：用CSS类名做作用域隔离（适合单页应用） #

如果是单页应用，可以通过类名限定Preflight的作用范围：

1. 同样先全局关闭Preflight：

// tailwind.config.cjs
module.exports = {
  corePlugins: {
    preflight: false,
  },
  // 其他配置项...
}

2. 在全局CSS文件中，把Preflight样式包裹在自定义类选择器内：

/* 全局CSS文件 */
.with-preflight {
  @import "tailwindcss/base";
}

3. 在需要启用Preflight的页面根元素上添加with-preflight类：

<!-- React示例 -->
<div className="with-preflight">
  <!-- 页面内容 -->
</div>

<!-- Vue示例 -->
<template>
  <div class="with-preflight">
    <!-- 页面内容 -->
  </div>
</template>

这种方式能确保Preflight样式只作用于带指定类名的元素及其子节点，不会影响其他页面。

注意：如果项目使用Tailwind JIT模式，要确保tailwindcss/base能被PostCSS正确解析，必要时检查Tailwind插件的加载配置是否正常。

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