Question

我的 NextJs 生产版本有一个很常见的问题。虽然在开发过程中偶尔也会发生这种情况，但我主要担心的是，有时当我部署我的项目时，某些样式根本不起作用，就好像 classNames 根本不存在一样。

例如：

<div className='space-x-4'>
  <span />
  <span />
  <span />
</div>

我希望我的 span 之间有 1rem 的空间，它在开发中运行良好，但一旦部署，所有 span 就会粘在一起，没有边距。（唯一的解决方法是在 global.scss 和重新部署中切换顺风导入） - 经过测试，我得出的结论是，此声明是错误的，简单的重新部署有帮助，但问题仍然存在。

示例：

不起作用

@tailwind base;
@tailwind components;
@tailwind utilities;

作品

@tailwind base;
@tailwind utilities;
@tailwind components;

作品

@tailwind base;
@tailwind components;
@tailwind utilities;

已经提出/回答了类似的问题，但似乎没有一个对我的情况有帮助。我尝试了不同的导入并无数次检查了我的顺风配置。奇怪的是，它不会在每次部署时发生，但仍然很烦人。

如果您能就这种情况发生的原因提供任何建议或见解，我将不胜感激。

配置：

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    'src/pages/**/*.{js,ts,jsx,tsx}',
    'src/components/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: false,
  theme: {
    ...
  },
  variants: {},
  plugins: [],
};

next.config.js

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
  future: {
    webpack5: true,
  },
};

postcss.config.js（刚刚存在）

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Tailwind 随机决定禁用样式 NextJs

0 个答案: