search

tailwindlabs / tailwindcss-aspect-ratio

MIT License
972 stars 34 forks source link

production issue #22

Closed matthewswallace closed 3 years ago

matthewswallace commented 3 years ago

What version of @tailwindcss/aspect-ratio are you using?

^0.2.1

What version of Node.js are you using?

14.1.0

What browser are you using?

Brave

What operating system are you using?

macOS

Reproduction repository

https://merits-products-production.herokuapp.com/p/teams

Describe your issue

If I run npm run production the page layout for aspect ratio does not work however npm run dev this plugin works just fine.

the layout when working should look like the second grid layout on this page from tailwindui.com https://tailwindui.com/components/marketing/sections/team-sections

matthewswallace commented 3 years ago

Here is the same codebase for another site I'm working on where I ran npm run dev and you can see the plugin works. https://avid-rehab-production.herokuapp.com/p/team

adamwathan commented 3 years ago

Hey! Can you provide actual source code for a project that demonstrates this issue? Not your real project, just a minimal reproduction. My guess it's something to do with how things are actually configured to build for production.

Are you using interpolation by any chance, like aspect-w-{{ someVariable }}? If so, that isn't PurgeCSS friendly and can lead to issues like this:

https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

adamwathan commented 3 years ago

I'm not sure where these styles are coming from, but all of these inline styles are what's causing the problem:

image

They are overriding important styles applied by the aspect ratio classes like position: absolute on the child image.

You can see after I remove some of the offending inline styles, the images take on the correct aspect ratio (3:2 like you've defined):

image

I'm not sure what tooling you are using that is adding all of these extra styles or where it's coming from, but it's these extra styles you have that are not coming from Tailwind that are causing things to look different than they should. The fix for your project will be to track that stuff down and make sure you remove the styles that are overriding what you are trying to do with Tailwind.

Hope that helps — if you believe this is a bug in Tailwind or the aspect-ratio plugin and can supply a proper minimal reproduction demonstrating it then totally happy to take another look 🍻