TailwindCSS - Applied styles removed in production - css

Question

[UPDATE 28-9-2021]
What I also did to eliminate other causes: Update OS packages (Centos 8), rebuilt Apache / NGINX, rebuilt NPM modules, updated and rebuilt TailwindCSS, tried default config files / json files, but all these didn't give me any result :-( I'm really stuck here
[/UPDATE]
Maybe I'm overlooking something here.
I added some basic styling to my style.css for headings:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
p {
#apply text-theme-gray-lighter pb-4;
}
h1 {
#apply text-3xl py-2;
}
h2 {
#apply text-2xl py-2 border-b mb-2;
}
h3 {
#apply text-xl py-1 font-semibold text-theme-blue;
}
h4 {
#apply text-lg font-semibold;
}
h3.price {
#apply text-theme-gray;
}
.boks-bold {
#apply font-semibold p-4 px-6 text-lg m-4 my-6 mt-2 border shadow-md rounded;
}
}
This file is located at the root of my project.
This is my tailwind.config.js:
module.exports = {
variants: {
extend: {
grayscale: ['hover', 'focus'],
backgroundColor: ['checked'],
borderColor: ['checked'],
borderColor: ['focus-within'],
}
},
darkMode: 'media',
purge: ["*.jsx", "*.js", "*.php"],
plugins: [
// require('daisyui'),
// require('#tailwindcss/forms'),
require('#tailwindcss/custom-forms'),
],
daisyui: {
// styled: false,
// themes: false,
// rtl: false,
},
theme: {
customForms: theme => ({
default: {
'input, textarea, multiselect, checkbox, radio': {
borderdColor: theme('colors.gray.200'),
},
},
}),
container: {
padding: '1rem',
center: true,
},
extend: {
width: {
'full-150': '150vw',
'full-200': '200vw',
},
height: {
'18': '4.5rem',
'40rem': '40rem',
'730px': '730px',
'650px': '650px',
'1191px': '1191px',
'901px': '901px',
'722px': '722px',
'110perc': '110%',
},
maxHeight: {
'110perc': '110%',
},
zIndex: {
'-10': '-10',
},
borderWidth: {
'12': '12px',
},
colors: {
'theme-brown': '#BF8A23',
'theme-yellow': '#FAA71B',
'theme-brown-brighter': '#DDB15B',
'theme-gray': '#333333',
'theme-gray-lighter': '#444444',
'theme-blue': '#547A82',
},
minWidth: {
'0': '0',
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
'full': '100%',
},
animation: {
'scroll-rtl-slow': 'scrollbrand scroll 40s linear infinite',
},
keyframes: {
scrollbrand: {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(calc(-250px * 7))',
}
}
}
}
}
And this is my package.json:
{
"dependencies": {
"#tailwindcss/forms": "^0.3.3",
"#tailwindcss/typography": "^0.4.1",
"autoprefixer": "^10.3.1",
"daisyui": "^1.10.0",
"node-cron": "2.0.3",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.2.6",
"vue-tailwind": "^2.4.2"
},
"scripts": {
"build-css": "tailwindcss build -i style.css -o css/style.css",
"build": "tailwindcss style.css -o css/style.css",
"production": "cross-env NODE_ENV=production tailwindcss css/style.css -o css/style.min.css"
},
"name": "templateh.sceneryworkshop.com",
"version": "1.0.0",
"main": "tailwind.config.js",
"devDependencies": {
"#tailwindcss/custom-forms": "^0.2.1",
"cross-env": "^7.0.3",
"webpack": "^5.52.1",
"webpack-cli": "^4.8.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
To get the #apply working, I had to add -i to the command:
*"build-css": "tailwindcss build -i style.css -o css/style.css"*
But when I do the same when building production:
"production": "cross-env NODE_ENV=production tailwindcss -i css/style.css -o css/style.min.css"
The file doesn't get purged at all, so it keeps it's total size.
Anyone who has an idea what I'm doing wrong here?

Answer 1

Make sure to add path to your config file in your command:
"production": "cross-env NODE_ENV=production tailwindcss -c ./tailwind.config.js -i css/style.css -o css/style.min.css"