Tailwind Container Query not working with padding

499 Views Asked by At

I'm attempting to use the container query plugin for Tailwind but my container query is breaking (not generating the class) when I add padding to the parent. When I remove it, all of a sudden it works? Is there something about container queries that I'm missing?

Tailwind Play

1

There are 1 best solutions below

0
On BEST ANSWER

The container queries seem to be working. When you adding padding on the container, the @[360px]: container query no longer applies because the container content width is now less than 360px:

Padding on one side = 6 = 1.5rem = 24px
      Content width = 360px - (24px × 2) = 312px

To evidence that container queries are still working with the padding: https://play.tailwindcss.com/AzP54wWVga