Meteor-Community-Packages / meteor-postcss

Tailwind's Just-in-Time mode will only push the classes you actually used in your components to CSS (so similar to a production build, but in development). The result is quicker rebuild times and better browser performance, in other words great DX.

Currently when enabling JIT mode, the initial build is fine but when adding classes in your JSX/HTML, they aren't added to the CSS until you manually restart Meteor.

This may be fixed by implementing this guideline: https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#3-dependencies (but I'm not sure).

May be related to #52. https://v2.tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files
JIT is now mandatory on Tailwind going forward

Still happening in Tailwind 3.0.1
Using TAILWIND_MODE=watch

@csellis @StorytellerCZ
Yes, exactly, I have this problem after updating to version 3, and the styles are not updated and I have to run the software again.
Do I have to enter this environmental variable manually?
Or should it be included in this package?

I've entered mine in an npm script, but it doesn't seem to work still.

	"scripts": {
		"meteor": "env $(cat .env | xargs) NODE_ENV=development TAILWIND_MODE='watch' npm run meteor:run",
	}

The plugin doesn't appear to use this recommended messaging syntax:

for (let message of result.messages) {
  if (message.type === 'dependency') {
    watcher.addFile(message.file)
  } else if (message.type === 'dir-dependency' && message.glob) {
    watcher.addPattern(file.join(message.dir, message.glob))
  } else if (message.type === 'dir-dependency') {
    watcher.addPattern(file.join(message.dir, '**', '*'))
  }
}

Here's where I think files are built:

meteor-postcss/plugin/minify-css.js

Line 73 in fbdbf3c

CssToolsMinifier.prototype.processFilesForBundle = function (files, options) {

@csellis @StorytellerCZ
Loading PostCSS Plugin failed: Cannot find module 'cssnano'
in build

I haven't found a solution but I have found a workaround by using Postcss as a separate process from meteor. And then let meteor handle the outputted css as it would normally do with css files.

Remove meteor's postcss package

meteor remove juliancwirko:postcss

Install postcss-cli

npm i -D postcss-cli

Setup watcher in package.json. Use the file with your @tailwind-imports as input (here main.css) and you can use any filename as output (here post.css).

"scripts": {
   "postcss": "postcss client/main.css -o client/post.css --watch"
}

Now you can run meteor like you've always done and run the postcss watcher in a separate terminal window. Meteor automatically picks up the built post.css-file and merges it in your website.

npm run postcss

I have the postcss-load-config package also installed so it loads my postcss config from my package.json.

Clever solution @iggyvanlith . Also discussed with my team about using the CDN for development, and running the build separately. I'd love for people to poke holes in that idea.

Thanks @iggyvanlith. This with concurrently instead of separate tabs works very well indeed.

I've some news about this here.

Hi community, to provide core support to CSS Minifier with PostCSS we are incorporating it to the core as a new core package: minifier-css-postcss.

I think it doesn't make sense to keep this package anymore but this is up to the community to decide.

The latest beta of Meteor (2.6.1) supports Tailwind 3.x.

Read the migration guide linked in the PR:
meteor/meteor#11886

Feedback is welcome in the same PR linked above.

Since this has become a core package I will release a patch version with a deprecation message to switch to the core package and then will archive this repository.

Published juliancwirko:postcss@2.1.0-beta.0

Published in juliancwirko:postcss@2.1.0

Support Tailwind JIT mode