如何消除特定页面的顺风预战

里面有一个选项tailwind.config.cjs关闭预检。但我不想在整个项目中关闭它们。我需要为某些特定页面启用它们。有没有办法做到这一点。

关闭预检：

// tailwind.config.cjs
...
corePlugins: {
  preflight: false,
},
...

我问了同样的问题TailwindCSS 讨论 https://github.com/tailwindlabs/tailwindcss/discussions/10332#discussioncomment-4698289并找到了我的答案。

这是解决方案，只需将此插件添加到您的插件中并禁用预检选项即可：

// with class "tailwind-preflight" we can now add preflight only to components we want
// to prevent conflicts between ant design and tailwind

const plugin = require("tailwindcss/plugin");
const fs = require("fs");
const path = require("path");
const postcss = require("postcss");

module.exports = plugin(function ({ addBase }) {
  const preflightStyles = postcss.parse(
    fs.readFileSync(path.join(__dirname, "./preflight.css"), "utf8"),
  );

  // Scope the selectors to specific components
  preflightStyles.walkRules((rule) => {
    rule.selector = ".tailwind-preflight " + rule.selector;
  });

  addBase(preflightStyles.nodes);
});

关于插件的 Tailwind 文档：https://tailwindcss.com/docs/plugins https://tailwindcss.com/docs/plugins