Tailwind in Meteor 3 app (with existing SCSS code)

help
1

I’m trying to add Tailwind to my Meteor 3 app. If first tried to do it as described here:

However, this resulted in frequent crashes of the standard-minifier:

Errors prevented startup:

While minifying app stylesheet:
node:fs:562:18: ENOENT: no such file or directory, open '/Users/tom/dev/marble/webapp/imports/ui/components/web3/ConnectWalletButton.js'
  at Object.openSync (node:fs:562:18)
  at Object.readFileSync (node:fs:446:35)
  at /Users/tom/.meteor/packages/meteor-tool/.3.1.2.1fcs6b7.4vyj++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/tools/fs/tools/fs/files.ts:1520:23
  at wrap.makeCacheKey (/Users/tom/.meteor/packages/meteor-tool/.3.1.2.1fcs6b7.4vyj++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/tools/fs/tools/fs/optimistic.ts:36:15)
  at recomputeNewValue (/Users/tom/.meteor/packages/meteor-tool/.3.1.2.1fcs6b7.4vyj++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/lib/node_modules/optimism/src/entry.ts:198:31)
  at Slot.withValue (/Users/tom/.meteor/packages/meteor-tool/.3.1.2.1fcs6b7.4vyj++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/lib/node_modules/@wry/context/lib/context.esm.js:69:29)
  at reallyRecompute (/Users/tom/.meteor/packages/meteor-tool/.3.1.2.1fcs6b7.4vyj++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/lib/node_modules/optimism/src/entry.ts:181:19)
  at Entry.recompute (/Users/tom/.meteor/packages/meteor-tool/.3.1.2.1fcs6b7.4vyj++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/lib/node_modules/optimism/src/entry.ts:91:9)
  at optimistic (/Users/tom/.meteor/packages/meteor-tool/.3.1.2.1fcs6b7.4vyj++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/lib/node_modules/optimism/src/index.ts:150:25)
  at CssFile.readAndWatchFileWithHash (/tools/isobuild/minifier-plugin.js:94:22)
  at packages/minifyStdCSS/plugin/minify-css.js:48:19
  at <runJavaScript-25>:503:26
  at Array.forEach (<anonymous>)
  at <runJavaScript-25>:500:10
  at CssToolsMinifier.watchAndHashDeps (packages/minifyStdCSS/plugin/minify-css.js:47:16)
  at CssToolsMinifier.minifyFiles (packages/minifyStdCSS/plugin/minify-css.js:61:42)
  at CssToolsMinifier.processFilesForBundle (packages/minifyStdCSS/plugin/minify-css.js:125:36)
  at /tools/isobuild/bundler.js:1944:7
  at Object.enterJob (/tools/utils/buildmessage.js:387:12)
  at minifyCssFiles (/tools/isobuild/bundler.js:1942:3)
  at ClientTarget.minifyCss (/tools/isobuild/bundler.js:1716:16)
  at /tools/isobuild/bundler.js:908:11
  at Object.enterJob (/tools/utils/buildmessage.js:387:12)
  at ClientTarget.make (/tools/isobuild/bundler.js:849:5)
  at /tools/isobuild/bundler.js:3299:7
  at /tools/isobuild/bundler.js:3458:25
  at Object.capture (/tools/utils/buildmessage.js:282:5)
  at bundle (/tools/isobuild/bundler.js:3280:18)
  at bundleApp (/tools/runners/run-app.js:585:26)
  at AppRunner._runOnce (/tools/runners/run-app.js:630:35)
  at AppRunner._runApp (/tools/runners/run-app.js:952:23)


Your application has errors. Waiting for file change.

This seems to happen on hot-module reload. So I looked up what Meteor recommended for Tailwind and found this PostCSS package:

The official package, however, conflicts with Meteor 3:

While selecting package versions:
error: Conflict: Constraint minifier-css@1.3.1 is not satisfied by minifier-css 2.0.0.
Constraints on package "minifier-css":
* minifier-css@~2.0.0 <- top level
* minifier-css@1.3.1 <- juliancwirko:postcss 2.0.5

So I am asking myself, what the recommended way is to get full Tailwind support in the first place? I need it for a third-party library that is built upon it.

2

not quite what you are lookng for but meteor-vite by jorgen vatle works really well for this sort of stuff, when using UI libraries like shadcn

3

How did u add it? Please mention the steps.

Since I had worked on Improve Tailwind support by harryadel · Pull Request #13534 · meteor/meteor · GitHub
I recommend following Meteor.js with React and Tailwind CSS 3 | by Frederico Maia | Meteor Blog since it’s the one that worked

1 Like
4

Thanks for the hint to the blog post. I used the official documentation on the Tailwind homepage which features a Meteor section. But it seems incorrect / outdated. Then, I thought that the issues was PostCSS, so I tried the Meteor PostCSS package. Will try to implement it using the Blog post as a guidance.

5

Thanks, that’s interesting. Yet I prefer to keep close to standard Meteor as much as possible. I had too many issues in the past when using community packages that went too deep into core features, especially when they eventually got abandoned. Actually, I try to use as few packages as possible. And if so, I try to focus on those that are “official” community-packages, for the same reasons.

6

Just as a first feedback: This blog post is also outdated, as it describes Tailwind 3, not Tailwind 4. The second command line I tried did not work anymore, because there’s no npx tailwindcss init -p anymore. My Google search lead me to the same installation instructions I had used before :sweat_smile:

The official docs describe three approaches: Using Vite, using PostCSS, and using the CLI. I am wondering what the best approach is in Meteor, so the bundler can actually build everything automatically? I have another app where I finally managed to setup things somehow. But in that app, every Hot Code Reload will inject an new version of the CSS into the page, without removing the previous one. So you end up with a mess of CSS after a while. There has to be a better way for this, and I am wondering how this looks like.

I also have the special challenge that I have to use Tailwind in parallel to SCSS, since I cannot migrate all my SCSS code yet and I need Tailwind for a third-party library only. I think my crashes in the minifier were caused by Tailwind trying to process SCSS (or the other way around).

So basically, I need to run leonardoventurini:scss in combination with Tailwind v4 (preferably).

7

I asked ChatGPT and it suggests that either one of the build pipelines (e.g. Tailwind) should run outside the regular Meteor build pipeline or I would have to implement a custom build plugin to make SCSS and Tailwind work in combination. Is that correct?

8

So to sum things up, my challenge is actually two-fold:
a) get Tailwind 4 to run in Meteor 3 in general, and
b) get Tailwind 4 to run in combination with existing SCSS

9

The instructions you followed look correct, and should work. I would suggest opening an issue in the Meteor repository; the error is a bug with Meteor’s postcss integration.

PostCSS can inform the bundler of files or folders to watch to know when to re-run postcss. Meteor uses this to ensure the client architectures are rebuilt when a relevant file is modified. The error is happening during this process.

In regards to using postcss with scss, it should work. SCSS would compile the source files into css files, and then the minifier runs the postcss plugins.

2 Likes
10

Thanks, zodern, as always. Will do!

11

Done: Error when processing Tailwind and SCSS in parallel · Issue #13633 · meteor/meteor · GitHub