Tailwind CLI not importing external files

Question

I am using Tailwind CSS 3.0 and have configured it according to the Using with Preprocessors documentation.

My main.css file looks like this:

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

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

@import "tailwindcss/utilities";

My postcss.config.js looks like this:

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {}
  }
}

The directory structure looks like this:

Styles/v2
├── custom-base-styles.css
├── custom-components.css
└── main.css
wwwroot/dev
└── v2
    └── main.css

And I execute the following command to build my main.css file:

npx tailwindcss -i ./Styles/v2/main.css -o ./wwwroot/dev/v2/main.css --watch

The build is executed and my wwwroot/dev/v2/main.css file is produced, but none of the additional changes added in my custom styles are included. Also; the --watch argument is listening for changes to the main.css input file, but non of the @import-ed files.

Answer 1

This should also do the trick!

tailwindcss -i ./Styles/v2/main.css -o style.css --postcss

Answer 2

It turns out I wasn't actually using PostCSS directly when using npx tailwindcss. As explained on the Tailwind CSS Getting Started guide, Tailwind CLI and PostCSS are two different ways of using Tailwind.

So in the above question, the answer is to use PostCSS CLI and invoke the build using: postcss ./Styles/v2/main.css -o style.css --watch.