No Tailwind CSS output when using postcss-easy-import

[sboerrigter]

What version of @tailwindcss/jit are you using?

v.0.1.3

What version of Node.js are you using?

v15.12.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/sboerrigter/tailwind-jit-easy-import

👋

When using postcss-easy-import (https://www.npmjs.com/package/postcss-easy-import) the compiler doesn't output any tailwind CSS and doesn't give any errors. You can reproduce this but by running npm run dev in the reproduction repository: https://github.com/sboerrigter/tailwind-jit-easy-import.

If you replace @tailwindcss/jit with tailwindcss in postcss.config.js the CSS output does get compiled correctly and the background of the page should turn green because of bg-green-500.

[adamwathan]

Hey! In your case just need to move your plugins around in postcss.config.js:

  module.exports = {
    plugins: {
+     'postcss-easy-import': {},
      '@tailwindcss/jit': {},
-     'postcss-easy-import': {},
      autoprefixer: {},
    },
  }

The regular tailwindcss library has some special logic for treating @import "tailwindcss/base" as @tailwind base, but haven't added that to the JIT which is why you see the difference. Going to add that now I think anyways 👍

[sboerrigter]

Thanks. Changing plugins the order fixes it indeed!