StencilJS cannot find a valid PostCSS plugin

Question

I’m passing a valid PostCSS plugin to StencilJS in the usual way via the PostCSS configuration, and I get an unexpected error message at runtime:

Build Error: @tailwindcss/postcss is not a PostCSS plugin at Processor.normalize ...

stencil.config.ts

import { Config } from '@stencil/core';
import { postcss } from '@stencil-community/postcss';

export const config: Config = {
  plugins: [
    postcss({
      plugins: [
        '@tailwindcss/postcss': {},
      ],
    })
  ]
};

rozsazoltan · Accepted Answer · 2026-01-27 16:52:56Z

1

Yes, StencilJS by itself is not capable of interpreting PostCSS. A community plugin, @stencil-community/postcss, enables this. Since it’s a third-party plugin, it may behave differently from the official PostCSS configuration. As it hasn't been actively updated for two years, similar unexpected errors can be expected. The solution is to import the PostCSS plugins as JS and then pass the result by running them as JS functions:

stencil.config.ts

import { Config } from '@stencil/core';
import { postcss } from '@stencil-community/postcss';
import tailwindcss from '@tailwindcss/postcss';

export const config: Config = {
  plugins: [
    postcss({
      plugins: [
        tailwindcss(),
      ],
    })
  ]
};

Reference:

How to install and use TailwindCSS into StencilJS via PostCSS

answered Jan 27 at 16:52

rozsazoltan

20k8 gold badges57 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

StencilJS cannot find a valid PostCSS plugin

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related