How do you run css compilation when templates are updated?

[neojp]

I'm trying to run the new @tailwindcss/jit plugin with ember-cli-postcss and it's working as long as I add these rules in the app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

So far, it's working, but only if I update the app.css file. I'd like for the app.css to recompile everytime I update the template as well. Would that be possible? I saw this in the README.

Process Trees

When using the filter version of this add-on the default configuration is now to only run on the css tree. This will mean that the add-on is only run when CSS files are changed. If you need the process to run on other trees or when other files are changed, you should update the processTrees option to include more trees from the following list: [template, js, css, test, all,]

However, if I use `processTrees: ['template', 'css'], it throws an error as if postcss were trying to read js files in order to compile them.

Any ideas on how to properly implement this post-css plugin? I'm a bit lost.

    postcssOptions: {
      compile: {
        enabled: true,
        map: true,
        plugins: [
          require('@tailwindcss/jit')('./tailwind.config.js'),
          require('postcss-import'),
        ],
      },
      filter: {
        enabled: true,
        map: false,
        processTrees: ['template', 'css'],
        plugins: [
          require('@tailwindcss/jit')('./tailwind.config.js'),
        ]
      }
    }

Thanks!

[fpauser]

I got it nearly fully working with this setup:

ember-cli-build.js:

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require('postcss-import')({ path: ['node_modules'] }),
          require('@tailwindcss/jit')('./tailwind.config.js'),
        ],
        cacheInclude: [/.*\.(css|scss|hbs)$/, /.tailwind\.config\.js$/],
      },
    },
  });

  return app.toTree();
};

tailwind.config.js:

module.exports = {
  purge: ['app/**/*.hbs'],
}

Run it via TAILWIND_MODE=watch ember s.

Downside: In development new jit-generated tailwind classes are appended to the app.css. Possibly unneeded tailwind classes are not removed while developing. The final production build is fine and contains only the used classes.

More info: https://github.com/jeffjewiss/ember-cli-postcss#compile-caching https://github.com/tailwindlabs/tailwindcss-jit#getting-started

[Alonski]

@neojp @fpauser I also want this :)

Going to try what fPauser wrote

[Alonski]

@fpauser That works well enough I think :) The file will keep growing in development but for production builds this won't be a problem. Thanks!

[NullVoxPopuli]

the TAILWIND_MODE=watch ember s doesn't work for me. my app.css doesn't update when I make changes to templates.

https://github.com/NullVoxPopuli/limber/pull/2/files#diff-e835654135548f75db36136807171b4d12d3514e043f4f80a146b88cc668fba4

[neojp]

@fpauser ~Adding the cacheInclude doesn't trigger a css rebuild for me when updating hbs or js files.~ Spoke too soon. This works, thanks!

@Alonski is right and the css doesn't remove unneeded classes. I wonder if this is due to the way Tailwind handles this or if it's an ember-cli-postcss issue due to the way file caching works.

[fpauser]

@neojp As @Alonski stated - the production build will contain only the tailwind classes in use. Would be great to get it fully working in development too. Maybe someone with a deeper knowledge about the inner workings of ember-cli-postcss and related broccoli stuff could have a look...

[NullVoxPopuli]

Adding to my comment above, the TAILWIND_MODE=watch trick only works for me in classic build mode (non-embroider). I opened an issue on the embroider repo with my config: https://github.com/embroider-build/embroider/issues/729 But I think this is more an ember-cil-postcss issue, as there is weirdness around needing TAILWIND_MODE in general

[bertdeblock]

Does adding /.tailwind\.config\.js$/ to cacheInclude really work for you guys? I have a tailwind.config.js file in the root of my project, but I'm not seeing it as being part of the tree that cacheInclude applies to. However files underneath /app are part of that tree so adding it there works, but isn't something I want to do.

[neojp]

I've noticed it doesn't work all the time. Sometimes I have to go save the app.css to get the styles updated again. I'm not very happy about this D:

[fpauser]

Just came across this: https://github.com/tailwindlabs/tailwindcss-jit/issues/57#issuecomment-800161776 Summary: The non-removal of unused classes while developing is intended behavior!

[fpauser]

@neojp This issue could be relevant regarding missing/not generated classes: https://github.com/tailwindlabs/tailwindcss-jit/issues/110

[fpauser]

I am quit happy with this setup (monorepo, shared tailwind config): https://github.com/fpauser/ember-tailwind-jit-monorepo-setup

[neojp]

For the record, I am using ast-hot-load which according to this comment, it seems to be the cause of the issue.

I will have to revisit this without it and also make sure I am using the latest version of Tailwind as they finally merged JIT into it. No need to use the experimental node module.

[LevelbossMike]

To people coming to this thread because they can't get postcss to recompile with tailwind's jit mode and embroider:

Because ember-cil-postcss is using broccoli-postcss-single which makes use of BroccoliCachingWriter you have to tell ember-cli-postcss to include the directories that you are watching in the trees that it looks for via the cacheInclude-option.

I.e. the docs state that you have to use the following config to have ember-cli-postcss recompile when you update a template:

    postcssOptions: {
      compile: {
        enabled: true,
        cacheInclude: [
          /.*\.hbs$/,
          /.*\.css$/,
          /.*\.html/,
        ],
        plugins: [
          require('tailwindcss')('./tailwind.config.js'),
          require('autoprefixer'),
        ],
      },
    },

This works with "classic" ember-cli but won't retrigger a rebuild with embroider. I think the reason is that https://github.com/ember-cli/broccoli-caching-writer will only check the cacheInclude patterns against the trees that it caches - which in this case would be the app/styles-tree. We have to explicitly state the entire app-tree for the cacheInclude patterns to make sense. To get this to work with embroider you have to use the following config:

    postcssOptions: {
      compile: {
        enabled: true,
        // you need this otherwise we won't recompile on changes in the `app`-tree
        includePaths: ['app'],
        cacheInclude: [
          /.*\.hbs$/,
          /.*\.css$/,
          /.*\.html/,
        ],
        plugins: [
          require('tailwindcss')('./tailwind.config.js'),
          require('autoprefixer'),
        ],
      },
    },

I don't know enough about broccoli and why this works in ember-cli without embroider (which it does) but this option is needed if you are running embroider.

[emattias]

Doing what @LevelbossMike suggested works for me but, if I understood correctly, setting includePath: ['app'] will stop rebuilding with the new tailwind config when tailwind.config.js is changed by adding it to cacheInclude like this: cacheInclude: [/.*\.(css|scss|hbs)$/, /.tailwind\.config\.js$/],

Is there a way to not have to restart the whole ember build when making changes to tailwind.config.js when using embroider?

[NullVoxPopuli]

I have a new/better way of running tailwind with jit + embroider: https://github.com/embroider-build/embroider/issues/729

[nightire]

Doing what @LevelbossMike suggested works for me but, if I understood correctly, setting includePath: ['app'] will stop rebuilding with the new tailwind config when tailwind.config.js is changed by adding it to cacheInclude like this: cacheInclude: [/.*\.(css|scss|hbs)$/, /.tailwind\.config\.js$/],

Is there a way to not have to restart the whole ember build when making changes to tailwind.config.js when using embroider?

I move the tailwind.config.js to the ./config folder, then my config is like includePath: ['app', 'config'], now it works perfectly.

[ballPointPenguin]

Tailwind 3 now enables JIT by default. This configuration is working for me (ember 3.28, ember-cli-postcss 7, tailwind 3):

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');

const isProduction = EmberApp.env() === 'production';

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        cacheInclude: [/.*\.(css|scss|hbs)$/, /.tailwind\.config\.js$/],
        map: false,
        plugins: [
          tailwindcss('./tailwind.config.js'),
          autoprefixer,
          ...(isProduction ? [cssnano] : []),
        ],
      },
    },
  });

  return app.toTree();
};

[nightire]

@ballPointPenguin No more includePath? How about with embroider? Did you test it?

[ballPointPenguin]

@ballPointPenguin No more includePath? How about with embroider? Did you test it?

I did not test embroider yet.

[mbernwieser]

Does anybody know how to configure this in an addon? Trying to rebuild the css of the addon (tailwind 3) if there are changes to the addon files (.hbs/.js) while running the dummy-app. Right now it needs a complete restart of the development server to update the purged classes...

Don't even know if this is something which belongs in the index.js (because of the addon-files) or in the ember-cli-build.js (because it's running in the dummy-app) - tried a few configurations in both but couldn't make it work.

Thanks in advance!

//EDIT: solved it! includePaths: ['addon'], was missing in the postcssOptions in the index.js file. In addition with the configuration from @ballPointPenguin this works well.

[marcemira]

@mbernwieser This worked for me too!!! thanks a lot!. I must find a way to have it also rebuild on tailwind config changes, it actually triggers and rebuilds something, but it doesn't applies the new changes, must restart server for that and it's annoying. Will keep looking

[monarchwadia]

@LevelbossMike 's approach worked for me on Tailwind v3