solid tundra
My html classes in VS Code are being sorted (by prettier plugin vscode?) center is being moved in front of hidden which is causing a conflict because display: flex from the center class is overriding display: none; from the hidden class. Elements that should be hidden on mobile sizes are showing because of the over riding specificity.
solid tundra
I looked at this more when I woke up. In Lesson 15 Amy's classes have center before hidden The code is working for her in the video though (lines 46 and 49 in the image)
zenith escarp
So the order of precedence here is actually based on the generated css and not the order of the classes as they're listed in code. If you inspect the output css I think you'll see what you shared above where the center class is defined after the hidden class so it takes precedence
Let me take a look at her video really quickly
One thing we can do is only apply the center class on large screens and up with lg-center. I think that should help for now at least. I need to have @plain wraith double check the use of the center class here though.
solid tundra
thanks James. I left it as is for now and moved on in the lesson.
This issue might make a good youtube video for you. I saw questions about Tailwind hidden (in various frameworks) not working. I did not find any answers that helped me though.
Do you think it would be helpful for Tailwind to add !important onto the hidden class? Adding hidden should probably override any other display settings from other classes.
zenith escarp
thanks James. I left it as is for now and moved on in the lesson.
This issue m...
I think more the correct answer is to conditionally add those classes based on screen size/media queries. In theory, you wouldn't want to use two classes that both change the display css property. We need to get @plain wraith me to confirm lol
plain wraith
We actually resolve this in a future lesson but you are correct