Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle dependency messages #35



Copy link

@bradlc bradlc commented May 19, 2021

This pull requests adds support for PostCSS dependency messages, which are used by plugins to register file dependencies. Documentation:

Note that there is also a dir-dependency message type but I am not sure how/if Stencil can support this.

Copy link

dtaalbers commented Jun 16, 2021

Can we get this PR merged @claviska? I'd like to see the official Tailwind CSS support for Stencil JS. I believe they are waiting for this PR to be merged. Would be awesome if we can get this going!

Copy link

@dtaalbers I no longer have any affiliation with Stencil or the company that maintains it.

Copy link

@claviska Oh thats my bad. Sorry to bother you!

Copy link

Just a follow-up from someone else on the Tailwind team — Stencil won't work properly out of the box with the JIT engine until it supports both dependency and dir-dependency messages, so even if this is merged we will still need to figure out dir-dependency support.

Copy link

FYI, here's a local dev process that is working well for me (admittedly with a specific use case) which allows JIT and HMR


  • Don't use shadow dom (Use Tailwind globally)
  • Don't use Stencil to build your PostCSS
  • Do use www output target in Stencil


  • Add an npm script to build Tailwind to the www directory or wherever Stencil outputs your files (NODE_ENV is required for TW to pick up changes to tsx files)
    NODE_ENV=development  tailwindcss -i ./src/site.pcss -o ./www/site.css --watch
  • Config should have something like this
    mode: 'jit',
    purge: ['./src/**/*.html', './src/**/*.{ts,tsx}'],


  • Config should look something like this, note the empty: false and globalStyle properties:
    import { Config } from '@stencil/core'
    export const config: Config = {
      globalStyle: 'www/site.css',
      outputTargets: [
          type: 'www',
          empty: false,
          serviceWorker: null,


  • Make sure you <link to the stylesheet that Stencil creates/copies, it will be in the www/build dir, don't use the one Tailwind generates.

How it works

  • Tailwind is in watch mode and will recompile when you change your main pcss file, tsx files or the tailwind config
  • Once the tailwind output is written to disk Stencil sees the change (to the globalStyle file) and copies the file (into the build dir) and updates the browser
  • 🎉

Copy link

Hey thanks @adamwathan for the direction! I'm going to do some research on dir-dependency and what we need to get it shipped.

@splitinfinities splitinfinities self-assigned this Sep 27, 2021
@splitinfinities splitinfinities added the Feature: Enhancement New feature or request label Sep 27, 2021
Copy link

@splitinfinities splitinfinities left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thank you! I'm going to add some tests, investigate dir-dependency then update y'all here soon.

@splitinfinities splitinfinities changed the base branch from master to update-dependencies September 27, 2021 20:02
@splitinfinities splitinfinities merged commit 263d0da into stencil-community:update-dependencies Sep 27, 2021
Copy link

Prereleased v2.1.0-0 and added #38 to investigate the dir-dependency messages. I'd love to get Tailwind's v2 JIT working within a Shadow DOM context and across the board. If anyone has tips or tricks to help get us there, I'd really appreciate it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Feature: Enhancement New feature or request
None yet

Successfully merging this pull request may close these issues.

None yet

6 participants