PostCSS and @import with postcss-import?

[jenstornell]

To have my imported css to be inlined in the same file as the rest, I tried to install postcss-import. The reason for a file import in my case is to drag in some old css from a previous version of my site.

postcss.config.js

I have postcss-import installed.

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

tailwind.config.js

@tailwind base;
@tailwind components;

@import "testing.css";

@tailwind utilities;

Error message

@import must precede all other statements

So it wants me to place the @import first in the file. Moving the file first will break the npm run build process.

Question

Is there a good way around this? With postcss-import or anything else?

[jenstornell]

I was looking at the wrong place, I was looking in https://tailwindcss.com/docs/installation but the solution to the problem is in https://tailwindcss.com/docs/using-with-preprocessors/.

In short, the import needs to be placed first in both files.

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'), // postcss-import needs to be first
    require('tailwindcss'),
    require('postcss-nesting'),
    require('autoprefixer')
  ]
}

tailwind.config.js

@import "testing.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

[dariusrosendahl]

This is the answer I was looking for:

require('postcss-import'), // postcss-import needs to be first

THANK YOU.

[feroz39]

After looking for last 3 days this help me a lots. Thanks man.

[brennanangel]

While you likely clicked the link, for the next person landing here...

This is no longer the recommend way, see https://tailwindcss.com/docs/using-with-preprocessors

The correct format is

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

[vitality82]

Works, but still shows a warning:

[vite:css] @import must precede all other statements (besides @charset or empty @layer) 1 | @tailwind "tailwindcss/base"; 2 | @import url("./styles/base.css");

[wongjn]

As per the warning, @import must precede all other statements (besides @charset or empty @layer), so:

-@tailwind "tailwindcss/base";
+@import "tailwindcss/base";
 @import url("./styles/base.css");

[pinsoegustave]

This is working properly.