Local @import does not result in text substitution

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
    }
});