NextJs with Tailwind, problem with removed unused styles on develope mode - docker

Question

I've started project where in the front is Next.js. I've decide to create it with Tailwind. Below my package.json with versions and dependencies:
{
"name": "frontend",
"private": true,
"scripts": {
"dev": "next dev -p 3000",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#fontsource/roboto": "^4.5.1",
"#mui/icons-material": "^5.2.1",
"#mui/lab": "^5.0.0-alpha.59",
"#mui/material": "^5.2.3",
"#mui/x-data-grid": "^5.1.0",
"#reduxjs/toolkit": "^1.6.2",
"#twilio/voice-sdk": "^2.0.1",
"axios": "^0.24.0",
"formik": "^2.2.9",
"lodash": "^4.17.21",
"next": "12.0.5",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-query": "^3.34.5",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"sass": "^1.44.0",
"swr": "^1.1.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^4.1.3",
"#types/node": "16.11.11",
"#types/react": "17.0.37",
"autoprefixer": "^10.4.2",
"eslint": "8.3.0",
"eslint-config-next": "12.0.5",
"postcss": "^8.4.5",
"postcss-preset-env": "^7.2.3",
"tailwindcss": "^3.0.15",
"typescript": "4.5.2"
}
}
I run this project locally at the moment, I use Docker for this, and this is my Dockerfile:
FROM node:alpine
ENV PORT 3000
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package*.json /app/
COPY yarn.lock /app/
RUN yarn install --ignore-engines
COPY . /app
RUN yarn build
EXPOSE 3000
CMD ["node_modules/.bin/next", "dev"]
This is my tailwind.config.js:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
minWidth: {
'xs': '20rem',
'56': '14rem',
'24': '6rem'
},
minHeight: {
'50': '50vh',
'5': '5rem',
'1/6': '16.666667%',
'5/6': '83.333333%',
'screen': '100vh',
'85v': '85vh'
},
backgroundColor: theme => ({
...theme('colors'),
'dark': '#343a40',
'strong-dark': '#212529',
'normal': '#ecedee'
}),
extend: {
width: {
'49/50': '98%',
'max-full': '500vw'
},
height: {
'max-full': '500vh'
},
spacing: {
'13': '13.4rem',
'14.4': '14.4rem',
'6.4': '6.4rem',
'15v': '15vh'
}
},
},
plugins: [],
}
I have problem with tailwind styles. From unknown reason styles are changing in files inside components due developing, but not inside pages directory. Due building every styles inside pages directory are loaded, but after changing/adding something classes are not recognized. If I change something inside tailwind.config.js classes are loading in every file, but still after that if I change/add some class that is not used before anywhere next is not recognizing it. I've looked for spelling bugs, I try reload node_modules, but still going back to the same point.
Anyone has the same problem?