At present, the plugin will only output min-width statements. This works with mobile first design but not for desktop first design which relies on max-width.

Would be awesome if this plugin had an option for this.

Hi,

I am using the last version of the polyfill, v.0.1.2, and the last version of this plugin v.1.0.1 and I am getting the error -> Document.querySelectorAll: 'https://github.com/media (min-width: 375px) ' is not a valid selector

I am using React v17.0.2, NextJS 12.1.0 and Tailwind 3.0.17 with PostCSS.

I add the import in useEffect inside the _app file,

Anyone has the same error?

Thanks

I am trying to use your plugin for my Tailwind project, but I am getting these errors in the console.

I suspect that the error is throw because the container is being used within a @media tag.
I don't see where I am using it under a media tag, because I am only using TailwindCSS.

I created a repo here where I reproduced the bug.
https://github.com/Enebz/tailwind-container-query-demo

When you are located in / press the "Go to list" button to see the problem.

On line 6 in pages/Demo.jsx, you can see the various container queries.
grid-cols-3 cq-w-sm:grid-cols-4 cq-w-md:grid-cols-5 cq-w-lg:grid-cols-6 cq-w-xl:grid-cols-7

When navigating (even on a wide screen) the grid appears with three columns, which is for the lowest screen width. When you resize the screen, it goes to the correct column-size and follows expected behaviour.

...

After last week's stable-channel-update-for-desktop for Google Chrome on Mac OS, tailwind-container-query is not longer working for me. (The class doesn't trigger when it should. It still works on Safari.) I dont know if this is due to this library or container-query-polyfill. Anyone else seeing this or have any ideas?

Hi, the plugin is really cool and adopts the concept of tailwind, I really liked it
I have been trying for hours to add it to my project but I failed to do so
I encountered many errors installing Container Query Polyfill in the project
That's why the plugin didn't work for me
Is there a guide for the steps to add to a project next or react ?

Hey @dgknca, Thanks for the plugin! It works fine but can't seem to get it to work with the container-name specific modifiers. I'm assuming the readme fix in #5 is correct. My setup looks like this:

<div class="... container-type-size container-name-lf">
  <div class="... cq-w-lf-xl:bg-blue-300" />
</div>

// tailwind.config.js
  theme: {
    containerName: {
      lf: 'layoutframe',
      // ...
    },
    containerQuery: {
      // ...
      lg: '480px',
      xl: '540px'
    },
  }

According to vscode intellisense, the raw CSS produced by the above setup is correct but the modifier doesn't seem to work. This one does work though: cq-w-xl:bg-blue-300. Any idea what might be the issue?

Looks like I was looking for Tailwind container queries just as this project was posted.

All seems to working well!

I'm wondering if it might be possible to implement arbitrary values. To be honest, I'm not even sure if Tailwind supports this for plugins or not.

Much thanks

I created an issue with container-query-polyfill as well here. It seems when building a production version of a tailwind app, this does not work.

I created a stripped down version here:

https://github.com/dreamboyx1/container-query-polyfill-example

I'm that package on.

• Mac Firefox 106.0.5 (64-bit)
• MacOS 12.6.1

The main branch just uses container-query-polyfill. The version that uses this package is under branch tailwindcss-container-query.

clone the package then
git checkout tailwindcss-container-query
npm install
npm run prod

This builds a production version of the Create React App app. You can connect to it a http://locations:3000. Just using npm start works as advertised. Seems to me there is likely an optimization or tree shaking issue.

Anywho. Thought you might like to know.