Tailwind CLI and plugins not producing the correct transpiled CSS

I'm using the Tailwind CLI to transpile some CSS and have issues getting postcss plugins to work with it.

The command I use is

npx tailwindcss -i ./assets/postcss/tailwind.css -o ./assets/dist/css/app.css

My app.css indeed gets produced.

Now the issue is that I use external plugins such as postcss-simple-vars, according to which I can use @variables inside my css. Tailwind CLI, knowing about this vars plugin thanks to its config, would logically transpile this (I also have issues with the mixin plugin, so it's not like it's limited to that only).

This is my tailwind.config.js (relevant part for plugins):

  plugins: [
    require('postcss-nested'),
    require('postcss-simple-vars'),
    require('postcss-mixins'),
    require('tailwindcss')
  ]

And this is my original tailwind.css:

@import "tailwindcss/base";

@colorr: yellow;

body {
    background-color: @colorr;

}

Sadly, the produced app.css show the above exactly as is, meaning it does not transpile that part here about the variables. The import gets resolved though.

Same story with attempts at putting mixins in the css using the corresponding mixin plugin. It's like my plugins literaly get ignored.

My guess right now is that my CLI calls somehow ignore the plugins. Any idea?

Solution

The plugins array in tailwind.config.js is for Tailwind plugins, which are distinct from PostCSS plugins.

For using PostCSS plugins with the Tailwind CLI:

Create a file to act as a PostCSS configuration file. Commonly, this file is called postcss.config.js (but can be any file name).

Add the PostCSS plugin array within the file:

module.exports = {
  plugins: [
    require('postcss-nested'),
    require('postcss-simple-vars'),
    require('postcss-mixins'),
    require('tailwindcss')
  ],
};

Tailwind maintainers recommend that you use their bundled version of their nesting plugin for optimal compatibility:

module.exports = {
  plugins: [
    require('tailwindcss/nesting'),
    require('postcss-simple-vars'),
    require('postcss-mixins'),
    require('tailwindcss')
  ],
};

postcss-mixins recommend to have their plugin before postcss-nested and postcss-simple-vars:

module.exports = {
  plugins: [
    require('postcss-mixins'),
    require('tailwindcss/nesting'),
    require('postcss-simple-vars'),
    require('tailwindcss')
  ],
};

Pass the PostCSS flag to the Tailwind CLI command:
```
npx tailwindcss -i ./tailwind.css -o ./app.css --postcss
```
If you used a different file name in step 1, pass the PostCSS configuration file as the value for the flag:
```
npx tailwindcss -i ./tailwind.css -o ./app.css --postcss path/to/postcss.configuration.js
```

Furthermore, you are using incorrect syntax for what I presume would be for a variable to be used via postcss-simple-vars. Variables are denoted by a dollar sign prefix ($), not at (@):

$colorr: yellow;

body {
    background-color: $colorr;
}

Full example with all plugins working available on StackBlitz.