Tailwindcss margin not working inside docker but works perfectly outside container

  css, docker, next.js, tailwind-css

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'),
  ],
}

Source: Docker Questions

LEAVE A COMMENT