Tailwindcss margin not working inside docker but works perfectly outside container [duplicate]

Question

Sample: https://play.tailwindcss.com/Xialm0nYXU (this works as expected in tailwind playground & when app is run directly on laptop but not within my containerized app. The margins mx are not working only inside containers.)

I have a HTML code that is similar to the above (but within a larger application). The margins between the <p> elements work fine while testing locally. But once I containerize my application it stops working. Oddly margin works at mx-2 but nothing else work, padding is not working either. Margins for other elements work fine (even inside container), so it should be something about this shared snippet that stops working inside a container. I could not share the whole application code, so I understand you might not have full context to understand what else could be happening. But want to check if anyone knows what could possibly cause issue only when run inside container. I suspect something gets messed up in the containerization process. Appreciate any pointers here.

My 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.json:

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: {},
  },
}

Update: The problem turned out to be me dynamically generating tailwind class names through string concatenation. Exactly what the tailwind folks recommended not to do as PurgeCss cant recognize those classes at build time. Once i turned that into an annoyingly long conditional statement returning statically coded class names things started working fine. For information on this checkout tailwind doc - https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

Answer 1

The problem turned out to be me dynamically generating tailwind class names through string concatenation. Exactly what the tailwind folks recommended not to do as PurgeCss cant recognize those classes at build time. Once I turned that into an annoyingly long conditional statement returning statically coded class names things started working fine. For information on this checkout tailwind doc - https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html