TailwindCSS margin类在Docker容器内失效但本地运行正常问题排查

• 演示代码在Tailwind Playground、本地直接运行场景下表现均符合预期，容器化部署后mx类边距仅在容器内部不生效
• 业务侧相似逻辑的HTML代码（集成于大型应用中）存在同类问题：<p>元素间边距本地测试完全正常，容器化部署后失效，仅mx-2可生效，其余margin、padding属性均不生效
• 其余元素的margin样式在容器环境下可正常生效，排除全局样式覆盖问题，问题范围限定在对应公共代码片段或容器化构建流程

Dockerfile #

FROM node:14

# Create app directory
RUN mkdir -p /usr/src/app/
WORKDIR /usr/src/app/


COPY package*.json .
RUN npm install

# Bundle app source
COPY . .

EXPOSE 3000

ENV NODE_ENV production

CMD ["npm", "start" ]

tailwind.config.js #

const colors = require('tailwindcss/colors')

module.exports = {
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        blueGray: colors.blueGray,
        emerald: colors.emerald,
        lime: colors.lime,
        trueGray: colors.trueGray,
        teal: colors.teal,
        cyan: colors.cyan,
        sky: colors.sky,
        warmGray: colors.warmGray,
        green: {
          25: '#f5fff8'
        }
      },
      fontSize: {
        'xxs': '.70rem'
      },
      overflow: ['hover', 'focus'],
      textOverflow: ['hover', 'focus']
    },
  },
  variants: {
    extend: {
      display: ['hover', 'focus', 'group-hover'],
      opacity: ['disabled'],
      backgroundColor: ['active'],
      whitespace: ['hover', 'focus'],
      width: ['hover', 'focus'],
    },
  },
  plugins: [  
    require('@tailwindcss/forms'),
  ],
}

postcss.config.js #

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

该问题由动态生成Tailwind类名的写法导致，属于Tailwind生产构建阶段的典型问题。
Tailwind的生产构建会通过PurgeCSS扫描静态代码，移除所有未匹配到的工具类以压缩包体积。如果类名是通过字符串拼接的方式动态生成的，PurgeCSS无法识别到对应类名的存在，会直接将其从最终产物中剔除，对应样式自然无法生效。
本地运行时通常未开启生产模式的PurgeCSS能力，全量Tailwind样式都被引入，所以不会出现样式失效问题；容器化部署时会自动启用生产模式，触发类名裁剪逻辑，因此仅在容器环境下出现异常。
修复方式为将字符串拼接动态生成类名的逻辑，替换为通过条件判断返回完整静态类名的写法，调整后样式即可恢复正常。

内容的提问来源于stack exchange，提问作者broun