@import not compiling down

[roarkmccolgan]

Hi!

Why would my @import not compile?

@tailwind preflight;

@import "components/navigation.css";

@tailwind utilities;

/* Add utilities here... */

and my mix file:

let mix = require('laravel-mix')
require('laravel-mix-purgecss')

mix.js('resources/assets/js/app.js', 'public/js').version()
  .postCss('resources/assets/css/app.css', 'public/css')
  .options({
    postCss: [
      require('postcss-import')(),
      require('tailwindcss')('./tailwind.js'),
      require('postcss-cssnext')({
        // Mix adds autoprefixer already, don't need to run it twice
        features: { autoprefixer: false }
      }),
    ]
  })
  .purgeCss()

Not getting any errors. Thanks in advance!

[danielstgt]

With .purgeCss() applied, everything that isn't actually used somewhere gets purged, so it won't show up in your output css.

The default setting for this is:

Matches all php files in app/ and all files with extensions in the extensions option in resources/

Have you used any class/id/selector from navigation.css in these locations?

For dev/testing, you could add this to your webpack.mix.js config, to only apply .purgeCss() in production:

if (mix.inProduction()) {
    mix.purgeCss();
}

Edit: .purgeCss() already runs only in production, unless the default setting gets overwritten. @adamwathan's answer below should resolve your problem.

[adamwathan]

I would expect an error actually; postcss-import should error if your file contains any @import statements that aren't at the beginning of the file.

In your case, @tailwind preflight appears before @import ..., which would cause postcss-import to blow up.

The fix is to move the preflight and utilities calls to their own files, and make your main file just imports:

@import "tailwind/preflight.css";
@import "components/navigation.css";
@import "tailwind/utilities.css";

...where the contents of those two Tailwind files are just @tailwind preflight and @tailwind utilities respectively.

[danielstgt]

Oh, sorry I was completely on the wrong path with purgeCss then. Should have checked postCss a bit more :-).

Thanks @adamwathan for clearing up!