How to add @tailwindcss/container-queries plugin

[mcade]

I previously had a version of tailwind installed in my app that did not support container queries:

config :tailwind,
  version: "3.1.8"

I want to use container queries so I updated it 3.2.

I also updated my tailwind.config.js:

plugins: [
    ..
    require("@tailwindcss/container-queries"),
    ..
 ]

I deleted my app.css and then ran mix tailwind.install and then mix tailwind default. Then I try to run the app and see this error in the terminal:

Error: Cannot find module '@tailwindcss/container-queries'
Require stack:
- /Users/app/assets/tailwind.config.js
- /snapshot/tailwindcss/lib/cli/build/plugin.js
- /snapshot/tailwindcss/lib/cli/build/index.js
- /snapshot/tailwindcss/lib/cli.js
- /snapshot/tailwindcss/standalone-cli/standalone.js
1) If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at Module.require (pkg/prelude/bootstrap.js:1855:31)
    at Module.require (/snapshot/tailwindcss/standalone-cli/standalone.js:25:22)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/app/assets/tailwind.config.js:22:5)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Module._compile (pkg/prelude/bootstrap.js:1894:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/app/assets/tailwind.config.js',
    '/snapshot/tailwindcss/lib/cli/build/plugin.js',
    '/snapshot/tailwindcss/lib/cli/build/index.js',
    '/snapshot/tailwindcss/lib/cli.js',
    '/snapshot/tailwindcss/standalone-cli/standalone.js'
  ],
  pkg: true

Any idea on how I can add this plugin?

[josevalim]

You can't use plugins with this package, as everything has to be precompiled. You must then use tailwind from npm.

[mcade]

@josevalim I thought this package was supposed to support first party plugins? https://tailwindcss.com/blog/tailwindcss-v3-2#container-queries

[josevalim]

Can you please sanity check that the new plugin has been included then? You should be able to extract and see the executable contents. Perhaps it was forgotten to be included in Tailwind side? :)

[mcade]

I'm not sure what you mean or how to do that but I asked GPT-4 and it was no help either.

[josevalim]

So my theory is that the plug-in you mentioned was not included in the standalone tailwind. In order to check that, you can download tailwind standalone executable from their website and try to see what is inside, and if that includes your plugin or not. Another option is to check the tailwind paths in the stack trace you posted.

[chrismccord]

Sounds like you need to jump on latest tailwind and run mix tailwind.install:

config.exs:

config :tailwind,
  version: "3.2.7",
  ...

I just verified this works. Thanks!

[mcade]

Okay, I spent too many hours trying to figure this out last night but this solves it, thanks!

I also want to take a moment to express my immense gratitude for the work you guys have done in creating Elixir and Phoenix. These tools and the community around them have been transformative for me.

With heartfelt appreciation, Maurice

[chrismccord]

Glad you got things working. Thanks! ❤️❤️❤️🐥🔥