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

Question

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

制作：

当我检查本地和生产环境中的相应元素时，HTML 结构和 class 名称似乎没有区别，但是当我将鼠标悬停在损坏的元素（导航项在这种情况下）在生产中，相应的元素没有被突出显示。到目前为止，这是我能够找到的。以下是几个配置文件：
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: [],
}

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

Certain parts of tailwind CSS not working in production

reactjs

npm

next.js

image-optimization

static-web-apps