I have the following postcss.config.js

module.exports = {
    plugins: [
        require('postcss-import')(),
        require('tailwindcss'),
        require('autoprefixer'),
    ]
};

And the following app.css:

/* Import Tailwind as Global Utils */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import "./custom.css";

And custom.css:

.hero {
    background-image: url("../images/hero.jpg");
}

And the following rollup config:

postcss({
    extract: 'public/dist/app.css',
    plugins: [
        url({
            url: 'inline'
        })
    ]
})

Now if I move the .hero class into my app.css it works as expected and the background is inlined, however while it is in custom.css the code is not evaluated.

Cheers.