Local #import does not result in text substitution - postcss

Question

I've followed this video and chrissainty/ondotnet-tailwindcss to configure Tailwind with the JIT and I'm pretty happy!
However, I wanted to take advantage of postcss-import to include multiple css files. Here's what my app.css looks like:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
#import "./other.css";
However, in the generated css I see generated code for Tailwind, but not for my other.css - it's still #import "./other.css". Here's my folder structure:
./Styles/app.css
./Styles/other.css
./package.json
./postcss.config.js
./tailwind.config.js
This is my postcss command:
cross-env TAILWIND_MODE=build postcss ./Styles/app.css -o ./wwwroot/css/app.css
I'm assuming that the problem is something to do with the Current Working Directory? I've tried the following variants for my #import statement:
#import ./Styles/other.css
#import ../Styles/other.css
#import Styles/other.css
But the text substitution doesn't happen. I've tried this with and without postcss-import in the devDependencies of the package.json.
I've included the contents of the config files, just in case.
package.json:
{
"scripts": {
"buildcss:dev": "cross-env TAILWIND_MODE=build postcss --verbose ./Styles/app.css -o ./wwwroot/css/app.css",
"buildcss:release": "cross-env NODE_ENV=production postcss ./Styles/app.css -o ./wwwroot/css/app.css"
},
"devDependencies": {
"autoprefixer": "10.3.1",
"cross-env": "7.0.3",
"cssnano": "^5.0.6",
"postcss": "8.3.6",
"postcss-cli": "8.3.1",
"postcss-import": "^14.0.2",
"tailwindcss": "2.2.7"
},
"dependencies": {
"#tailwindcss/forms": "^0.3.3"
}
}
postcss.config.js:
// postcss.config.js
const purgecss = require('#fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [
'./**/*.html',
'./**/*.razor'
],
// Include any special characters you're using in this regular expression
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
...process.env.NODE_ENV === 'production'
? [purgecss]
: []
]
}
tailwind.config.js:
module.exports = {
mode: 'jit',
purge: [
'./**/*.razor',
'./**/*.cshtml'
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
zIndex: {
'1': '1'
},
},
},
variants: {
extend: {
ringWidth: ['focus'],
borderWidth: ['focus'],
},
},
plugins: [
require('#tailwindcss/forms'),
],
}

Answer 1

Aha! It was the postcss config. I was looking at the wrong file. The original config was this:
module.exports = ({ env }) => ({
plugins: {
tailwindcss: {},
autoprefixer: {},
cssnano: env === "production" ? { preset: "default" } : false
}
});
It was missing the postcss-import plugin:
module.exports = ({ env }) => ({
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-import': {},
cssnano: env === "production" ? { preset: "default" } : false
}
});