如何仅在指定div内启用TailwindCSS Preflight样式重置？

因为你是逐步重构项目，无法全局启用Preflight，这里提供两种可行的局部启用方案：

方案一：通过Tailwind自定义插件实现局部Preflight #

在tailwind.config.js中编写自定义插件，将Preflight的核心重置样式嵌套到指定类（比如.preflight-enabled）下：

const plugin = require('tailwindcss/plugin')

module.exports = {
  corePlugins: { preflight: false },
  plugins: [
    plugin(function({ addBase }) {
      addBase({
        '.preflight-enabled': {
          // 重置基础元素的默认样式，对齐Preflight规则
          'p, h1, h2, h3, h4, h5, h6, ul, ol, dl, figure, blockquote, details, fieldset, menu, pre, textarea, input, select, form, table': {
            margin: '0',
            padding: '0',
            border: '0',
            fontSize: '100%',
            font: 'inherit',
            verticalAlign: 'baseline',
          },
          // 单独重置p标签的底部外边距（匹配你的需求）
          'p': {
            marginBottom: '0',
          },
          // 重置列表项样式
          'ul, ol': {
            listStyle: 'none',
          },
          // 可根据Preflight源码补充更多需要的重置规则，比如表格、按钮等
        },
      })
    })
  ],
}

这样，所有.preflight-enabled容器内的元素都会应用这些重置样式，和全局Preflight的效果一致。

方案二：通过CSS嵌套引入完整Preflight #

如果你需要完整的Preflight样式，不想手动复制规则，可以通过PostCSS嵌套功能实现：

1. 安装PostCSS嵌套插件：

npm install postcss-nested --save-dev

2. 在postcss.config.js中启用插件：

module.exports = {
  plugins: {
    'postcss-nested': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

3. 创建一个自定义CSS文件（比如local-preflight.css），将Preflight嵌套到目标类下：

.preflight-enabled {
  @import 'tailwindcss/preflight';
}

4. 在项目入口文件中引入这个CSS文件即可。

注意事项 #

• 局部Preflight的样式权重需要足够，避免被旧CSS覆盖，必要时可以给重置样式添加!important（过渡阶段应急使用，不推荐长期依赖）。
• 可以根据当前重构的组件需求，只添加需要的Preflight规则，减少不必要的样式冗余。

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