0

我为我的下一个 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: [],
}

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

4

1 回答 1

2

确保将需要应用 CSS 的完整路径列表添加到tailwind.config.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: [],
}
于 2021-10-23T06:51:14.137 回答