[Bug] umi max 与 tailwindcss 样式冲突

[TanGuangZhi]

What happens?

umi max 与 tailwindcss 样式冲突，比如下面的 button 按钮样式

Mini Showcase Repository(REQUIRED)

Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现，并上传到你的 GitHub 仓库

pnpm dlx create-umi@latest
选择 ant pro

npx max g tailwindcss
成功后选择 umi 示例项目左侧菜单的 CRUD 示例，即可复现

How To Reproduce

https://github.com/TanGuangZhi/ReactLearn

Context

• Umi Version: 4.0.24
• Node Version: 16.17.0
• Platform: macos 12.3

[xiaohuoni]

tailwindcss 和 antd 一起用，不是要加 tailwindcss 配置吗？主要是 “corePlugins”

/** @type {import('tailwindcss').Config} */
// TODO: content error
module.exports = {
  content: ['./src/**/**/*.tsx'],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
};

[TanGuangZhi]

tailwindcss 和 antd 一起用，不是要加 tailwindcss 配置吗？主要是 “corePlugins”

/** @type {import('tailwindcss').Config} */
// TODO: content error
module.exports = {
  content: ['./src/**/**/*.tsx'],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
};

感谢，按这个配置了 tailwind.config.js 文件，与 ant 冲突的问题解决了。
额外问下：上面这个配置的写法实在 umi 文档里哪部分？我在引入 tailwindcss 时没有注意到有这块文档，谢谢

[xiaohuoni]

这个配置是 tailwind 的文档。

[Ray-56]

当我加了 preflight: false, 配置后，默认重置样式就没有了，于是我使用 addBase 加入一些默认重置样式

plugin: [
    plugin(({ addVariant }) => {
      // addVariant('zh-CN', '&[lang="zh-CN"]');
      // addVariant('en-US', '&[lang="en-US"]');
    }),
    // 本意为移除 base 中的部分样式
    // 相关链接 https://stackoverflow.com/questions/71783177/remove-specific-style-from-tailwind-base
    plugin(function ({ addBase, theme }) {
      addBase({
        h1: { fontSize: theme('fontSize.2xl'), background: 'red' },
        h2: { fontSize: theme('fontSize.xl') },
        h3: { fontSize: theme('fontSize.lg') },
      });
      addBase({ '#test': { background: 'red' } });
  })
]

但是在生成的样式中没有 addBase 的样式

[Ray-56]

当我加了 preflight: false, 配置后，默认重置样式就没有了，于是我使用 addBase 加入一些默认重置样式

plugin: [
    plugin(({ addVariant }) => {
      // addVariant('zh-CN', '&[lang="zh-CN"]');
      // addVariant('en-US', '&[lang="en-US"]');
    }),
    // 本意为移除 base 中的部分样式
    // 相关链接 https://stackoverflow.com/questions/71783177/remove-specific-style-from-tailwind-base
    plugin(function ({ addBase, theme }) {
      addBase({
        h1: { fontSize: theme('fontSize.2xl'), background: 'red' },
        h2: { fontSize: theme('fontSize.xl') },
        h3: { fontSize: theme('fontSize.lg') },
      });
      addBase({ '#test': { background: 'red' } });
  })
]

但是在生成的样式中没有 addBase 的样式

找到问题了，plugin -> plugins

[yc-w-cn]

关闭 preflight 以后，可以通过引入 @tailwind base 使用的 modern-normalize.css 文件解决默认样式重置问题