csstailwind-csscontainer-queries

Tailwind Container Query not working with padding


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


Solution

  • 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