顺风 CSS 的某些部分无法在生产中运行

Question

我为我的下一个 JS 应用程序构建了一个静态网站，该应用程序使用 tailwind CSS 进行样式设置。我将静态用作 CDN。开发服务器（本地主机）中的网站运行良好。但是，在生产中，样式的某些部分似乎被破坏了（准确地说是页眉、页脚和暗/亮模式之间的切换）。附上截图供参考。
本地服务器：

生产：

当我检查本地和生产环境中的相应元素时，HTML 结构和类名似乎没有区别，但是当我将鼠标悬停在生产中损坏的元素（本例中为导航项）上时，相应的元素没有被突出显示。 到目前为止，这是我能够找到的。下面是几个配置文件：
next.config.js:

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  reactStrictMode: true,
  
  images: {
    // domains: ['raw.githubusercontent.com','ibb.co'],
    domains: ['raw.githubusercontent.com'],
    loader:'imgix',
    path:''
  },
  assetPrefix: isProd ? 'CDN_LINK_HERE' : '',
}

tailwind.config.css：

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我该如何解决这个问题？ 谢谢。

Answer 1

确保在 tailwind.config.css 的清除数组中添加需要应用 CSS 的完整路径列表。

module.exports = {
// ▼ here you need to add all paths according to your needs
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './your-other-component-folder/**/*.{js,ts,jsx,tsx}'], 
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}